使用JS开发Flappy Bird游戏：重置后速度累积问题求助

你的问题根源在于每次游戏重置时，旧的动画循环没有被终止，新的循环又被启动，导致多个循环同时运行。每个循环都会独立更新小鸟速度、管道和云朵的位置，最终表现为速度叠加的效果。

修复步骤： #

1. 添加变量跟踪当前动画帧ID，方便终止旧循环
2. 重置游戏时先终止之前的动画循环
3. 更新动画循环调用方式，保存帧ID

修改后的关键代码： #

首先在全局变量区域新增：

let animationId; // 跟踪动画帧ID

然后修改draw函数中的动画循环调用：

function draw() {
  // ... 原有代码保持不变 ...

  // 替换原requestAnimationFrame(draw)为：
  animationId = requestAnimationFrame(draw);
}

最后在resetGame函数中添加终止旧循环的逻辑：

function resetGame() {
  cancelAnimationFrame(animationId); // 终止旧的动画循环
  birdY = canvas.height / 2;
  pipes = [];
  clouds = [];
  velocity = 0;
  score = 0;
  frameCount = 0;
  pipeSpeed = 2;
  cloudSpeed = 0.5;
}

这样修改后，每次重置游戏时都会先停止之前的动画循环，确保只有一个循环在运行，速度累积的问题就会消失。

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