如何为自制RGB猜色小游戏添加延迟动画与计分板功能

问题修复点 #

• 计分功能实现：
  • 原代码分数变量定义在gamestart函数内部，每次游戏重置会清空分数，调整为全局变量持久存储
  • 猜对时分数+1，同步更新到页面计分板，猜错可自定义分数规则（示例默认清零，可自行调整）
• 全屏祝贺动画修复：
  • 原动画渐变逻辑错误：初始透明度为0时，op += op * 0.1运算后永远为0，改用CSS过渡实现更流畅的渐变效果
  • 原逻辑调用动画后立刻重置游戏，导致动画被中断，调整为等动画播放完成后再重置游戏
  • 增加动画结束后自动隐藏祝贺层的逻辑，不影响下一轮游戏

完整修改后代码 #

HTML（和原有逻辑一致，仅修改了标题语义） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RGB猜色游戏</title>
</head>
<body>
    <h1 class="text-centered" id="main-h1">Guess The Color!</h1>
    <h2 class="text-centered" id="colorguess"></h2>
    <p id="score"></p>
    <div class="box-container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div id="bravo">
        <p id="bravo-text">BRAVO</p>
    </div>
</body>
<script src="script.js"></script>
</html>

CSS（仅新增祝贺层过渡逻辑，其余代码保持不变） #

*{
    box-sizing: border-box;
}
body{
    font-family: arial;
    background-color: #1c1874;
    color: #fff;
}
.text-centered{
 text-align: center;  
 text-shadow: 0px 2px 2px rgba(150, 150, 150, 1); 
}
.box-container{
    padding: 200px;
    align-self: center;
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
}
.box{
    width: 200px;
    height: 200px;
    border-radius: 20px;
    cursor: pointer;
    border:5px solid #ffffff;
}
#score{
    font-weight: 500;
    font-size: 2em;
    position: fixed;
    top: 5%;
    left: 5%;
}
#score::before {
    content: "Score: ";
}
#bravo{
    position: fixed;
    display: none;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    text-align: center;
    font-size: 5em;
    background-color: rgba(4, 8, 97, 0.69);
    /* 新增过渡效果替代JS定时器，动画更流畅 */
    transition: opacity 0.5s ease;
}
#bravo.show{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
}
#bravo-text{
    flex: 0 0 120px;
    text-shadow: 0px 2px 2px rgba(150, 150, 150, 1);
}

JS（核心逻辑修改） #

// 分数变量移到全局作用域，避免每次游戏重置被清空
let score = 0;
const scoreboard= document.getElementById('score');
const brv = document.getElementById('bravo');

function getrandomcolor(){
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    return `rgb(${r}, ${g}, ${b})`;
}

function displaybravo(){
    // 显示全屏祝贺层
    brv.classList.add('show');
    // 展示1.5秒后隐藏祝贺层，再重置下一轮游戏
    setTimeout(()=>{
        brv.classList.remove('show');
        gamestart();
    },1500)
}

function gamestart(){
    const mainh1 = document.getElementById('main-h1');
    mainh1.innerHTML = "Guess the color!";
    const rgbvaluetrue = getrandomcolor();
    document.getElementById('colorguess').innerHTML = rgbvaluetrue;
    const box = document.getElementsByClassName('box');

    for(let i=0;i<box.length;i++){
        box[i].style.backgroundColor = getrandomcolor();
    }
    // 随机给一个色块赋值正确颜色
    const rand = Math.floor(Math.random() * box.length);
    box[rand].style.backgroundColor = rgbvaluetrue;

    // 色块点击判断逻辑
    function markSelection() {
        if(this.style.backgroundColor == rgbvaluetrue) {
            // 猜对加分
            score++;
            scoreboard.innerHTML=score;
            mainh1.innerHTML="BRAVO";
            // 标题展示1秒后弹出全屏祝贺动画
            setTimeout(displaybravo, 1000);
        } else {
            // 猜错默认清零分数，不需要清零可删除下两行
            score = 0;
            scoreboard.innerHTML=score;
            gamestart();
        }
    }
    
    for(let i=0;i<box.length;i++){
        box[i].onclick = markSelection;
    }
}
// 初始化游戏
gamestart();

内容的提问来源于stack exchange，提问作者Anđelo Motika