如何为JavaScript经典贪吃蛇游戏添加可刷新页面的重新开始按钮

方案1：刷新页面重置（最简单，完全符合你的需求） #

第一步：添加HTML按钮 #

在你的页面中canvas标签的下方，插入默认隐藏的重新开始按钮：

<canvas id="canvas" width="400" height="400"></canvas>
<!-- 新增下面这行按钮代码 -->
<button id="restartBtn" style="display:none; margin-top:10px; padding:6px 12px; font-size:14px;">重新开始</button>

第二步：修改JS代码 #

1. 在JS代码最顶部，新增获取按钮元素的代码：

const ctx = canvas.getContext("2d");
// 新增下面这行
const restartBtn = document.getElementById('restartBtn');

2. 找到isGameOver函数，在gameOver = true的判断逻辑块末尾，添加按钮显示和点击事件绑定代码：

if (gameOver) {
    // 原有显示Game Over的代码保持不变
    ctx.fillStyle = "white";
    ctx.font = "50px Verdana";
    var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
    gradient.addColorStop("0", " magenta");
    gradient.addColorStop("0.5", "blue");
    gradient.addColorStop("1.0", "red");
    ctx.fillStyle = gradient;
    ctx.fillText("Game Over!", canvas.width / 6.5, canvas.height / 2);

    // 新增下面两行代码
    restartBtn.style.display = 'block';
    restartBtn.onclick = () => location.reload();
}

到这里功能就完成了，游戏结束后按钮会自动显示，点击就会刷新页面重置所有游戏状态。

方案2：不刷新页面重置（体验更丝滑） #

如果不想重载页面，可以新增重置游戏状态的函数实现无刷新重启：

1. 先按照方案1的第一步添加HTML按钮
2. 在JS代码最后新增重置函数：

function resetGame() {
    // 重置所有游戏参数
    speed = 7;
    headX = 10;
    headY = 10;
    snakeParts.length = 0;
    tailLength = 2;
    appleX = 5;
    appleY = 5;
    inputsXVelocity = 0;
    inputsYVelocity = 0;
    xVelocity = 0;
    yVelocity = 0;
    score = 0;
    // 隐藏重启按钮
    restartBtn.style.display = 'none';
    // 重新启动游戏循环
    drawGame();
}

3. 把isGameOver函数里的按钮点击事件替换成调用重置函数即可：

restartBtn.onclick = resetGame;

内容的提问来源于stack exchange，提问作者Paradox