HTML Canvas找松鼠游戏重启按钮点击画布后消失的原因及修复

问题触发原因 #

核心问题出在分数更新的逻辑上：

• 你的重启按钮是#scoreboard div的子元素，而你在点击击中/未击中松鼠的逻辑中，都直接使用scoreboard_div.innerText = Score: ${score}/5``更新分数。innerText属性会直接覆盖元素内的所有内容，把原本的子元素（也就是重启按钮）全部替换为纯文本，所以只要触发一次分数更新，按钮就会消失。
• 除此之外你的重启逻辑还存在变量作用域问题：重启按钮的点击回调里重新用var声明了allSquirrels和squirrel，这两个是函数内的局部变量，不会修改外层游戏逻辑使用的变量，就算按钮没消失，重启功能也无法正常生效。

修复方案 #

步骤1：修改HTML结构，把分数单独放在独立容器里 #

把#scoreboard的内容修改为：

<div id="scoreboard">
    <span id="score-text">Score: 0/5</span>
    <input type="button" class="btn btn-success" id="restart-btn" value="Restart">
</div>

给分数单独套一个span，避免修改分数时影响按钮。

步骤2：修改JS中所有更新分数的逻辑 #

把所有原来的scoreboard_div.innerText = Score: ${score}/5``替换为：

document.getElementById('score-text').innerText = `Score: ${score}/5`

这样只会更新分数文本，不会动到旁边的重启按钮。

步骤3：修复重启逻辑的变量作用域问题 #

把重启按钮点击回调里的两句var声明去掉，修改为：

restart_btn.addEventListener("click", () => {
    if (currentSquirrel >= 5) {
        currentSquirrel = 0;
        score = 0;
        document.getElementById('score-text').innerText = `Score: ${score}/5`;
        // 去掉var，直接修改外层变量
        allSquirrels = [squirrel1, squirrel2, squirrel3, squirrel4, squirrel5];
        squirrel = allSquirrels[currentSquirrel];
        clearCanvas();
        ctx.drawImage(squirrel_img, squirrel[0], squirrel[1], squirrel[2], squirrel[3]);
        document.getElementsByTagName("body")[0].addEventListener("click", mouseClickRun);
    } else {
        alert("The game is already running." + currentSquirrel);
    }
});

可选优化：避免点击重启按钮触发游戏点击判定 #

因为你把点击事件绑在了body上，点击重启按钮也会触发游戏的点击逻辑，可以在mouseClick函数最开头加一行判断：

if (event.target.id === 'restart-btn') return;

点击按钮时直接跳过游戏判定逻辑。

内容的提问来源于stack exchange，提问作者Add it yeah