如何将JavaScript碰撞检测函数放入循环？避免调用栈溢出

问题分析 #

原碰撞检测函数的两个核心问题：

1. 原代码里score = +1是赋值为1而非累加，就算多次触发也只会把score设为1；就算改成累加，只要碰撞状态持续（比如玩家一直站在硬币上），同一帧内会重复加分。
2. 用while循环强制持续检测会直接导致调用栈溢出——因为while会在单次函数调用里无限循环，只要碰撞条件不消失，就会一直占用调用栈，直到浏览器触发栈溢出错误，完全阻塞游戏逻辑。

正确实现思路 #

核心是给硬币加「是否已被收集」的状态标记，结合游戏主循环（每一帧检测一次）来避免重复加分，同时不会阻塞调用栈。

完整修改代码 #

1. 初始化时给硬币添加收集状态：

// 玩家和硬币的基础属性
const player = {
  x: 50,
  y: 50,
  width: 30,
  height: 30,
  velocityY: 0
};

const coin = {
  x: 100,
  y: 100,
  width: 20,
  height: 20,
  isCollected: false // 标记硬币是否已被收集
};

let score = 0;

2. 修改碰撞检测函数，加入状态判断：

function checkCollision() {
  // 如果硬币已经被收集，直接跳过检测
  if (coin.isCollected) return;

  // 碰撞检测逻辑（和原逻辑一致，可根据游戏实际碰撞需求调整）
  const isColliding = 
    player.y + player.height + player.velocityY >= coin.y && 
    player.x + player.width >= coin.x && 
    player.x <= coin.x + coin.width;

  if (isColliding) {
    score += 1; // 正确的累加分数（原代码是赋值为1，这里修正）
    coin.isCollected = true; // 标记为已收集，防止重复加分

    // 可选：硬币被收集后，延迟一段时间重置位置并恢复可收集状态
    setTimeout(() => {
      coin.x = Math.random() * (window.innerWidth - coin.width);
      coin.y = Math.random() * (window.innerHeight - coin.height);
      coin.isCollected = false;
    }, 1500);
  }
}

3. 把碰撞检测放到游戏主循环里，每一帧执行一次：

function gameLoop() {
  // 这里放玩家移动、场景渲染等游戏核心逻辑
  // 比如更新玩家位置：player.y += player.velocityY;

  // 每一帧检测一次碰撞
  checkCollision();

  // 更新分数显示
  document.getElementById('score').textContent = `当前分数：${score}`;

  // 循环调用，维持游戏帧更新
  requestAnimationFrame(gameLoop);
}

// 启动游戏
gameLoop();

为什么这么做可行？ #

• 状态标记isCollected确保每个硬币只会被加一次分，直到被重置。
• 用requestAnimationFrame的主循环每一帧检测一次，既不会重复触发，又能保证游戏逻辑流畅，不会出现栈溢出——因为每一帧的检测都是独立的函数调用，执行完就释放调用栈空间。

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