如何实现JavaScript游戏速度归零时显示结束界面？

1. 游戏结束界面显示逻辑 #

针对velocity.z归零时触发游戏结束的需求，你需要在游戏主循环中持续检测状态，切换渲染逻辑：

• 新增全局状态变量标记游戏状态：

  let gameOver = false;
  

• 在主循环（如animate函数）中加入检测与状态切换：

  function animate() {
    if (!gameOver) {
      // 保留原有的游戏更新、渲染代码
      // ...
      // 检测速度（处理浮点数精度问题，用阈值判断）
      if (Math.abs(velocity.z) < 0.01) {
        gameOver = true;
      }
      requestAnimationFrame(animate);
    } else {
      // 渲染游戏结束界面
      drawGameOverScreen();
    }
  }
  

• 实现结束界面绘制函数：

  function drawGameOverScreen() {
    // 半透明遮罩
    ctx.fillStyle = 'rgba(0,0,0,0.7)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // 结束文本
    ctx.fillStyle = '#ffffff';
    ctx.font = '48px Arial';
    ctx.textAlign = 'center';
    ctx.fillText('游戏结束', canvas.width/2, canvas.height/2 - 50);
    
    // 绘制重启按钮区域
    ctx.fillStyle = '#4CAF50';
    ctx.fillRect(canvas.width/2 - 100, canvas.height/2, 200, 60);
    ctx.fillStyle = '#ffffff';
    ctx.font = '24px Arial';
    ctx.fillText('重新开始', canvas.width/2, canvas.height/2 + 35);
  }
  

2. 重启按钮交互修复 #

按钮不显示或无效，是因为缺少结束状态下的渲染与点击事件绑定：

• 给Canvas添加点击事件监听，判断点击区域：

  canvas.addEventListener('click', (e) => {
    if (gameOver) {
      const rect = canvas.getBoundingClientRect();
      const clickX = e.clientX - rect.left;
      const clickY = e.clientY - rect.top;
      // 判断是否点击到重启按钮
      if (clickX >= canvas.width/2 - 100 && clickX <= canvas.width/2 + 100 && clickY >= canvas.height/2 && clickY <= canvas.height/2 + 60) {
        resetGame();
      }
    }
  });
  

• 实现游戏重置函数，恢复初始状态：

  function resetGame() {
    gameOver = false;
    // 重置速度为初始值，替换成你游戏里的初始参数
    velocity = { x: 0, y: 0, z: 5 };
    // 重置其他必要变量：玩家位置、分数等
    animate(); // 重启游戏循环
  }
  

关键提醒 #

• 井字棋是回合制逻辑，和Canvas实时渲染的循环逻辑不匹配，不要直接套用，必须在每一帧持续检测游戏状态
• 注意浮点数精度问题，不要直接判断velocity.z === 0，用小阈值（如0.01）判断更可靠

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