如何在游戏循环中只检测一次碰撞而不是连续检测？

Question

我正在 JavaScript 中编写一个小型 space 游戏，如何检测碰撞？

我正在使用 requestAnimationFrame() 循环游戏，我的问题是：
我如何检测两个物体之间的碰撞，因为计数（死亡）变量被递增 仅一次 而不是连续递增？

// --- Collision ---
asteroids.forEach(asteroid => {
  //if (collisionOccured) { return; } I thought might work...
  if (distance(spaceship.x + spaceship.width, spaceship.y + spaceship.width, asteroid.x, asteroid.y) < asteroid.radius + spaceship.width) {
     console.log('Collision');
     collisionOccured = true;
     deaths++;
  }
});

我想我明白问题出在哪里了，两个物体正在碰撞，所以它们之间的距离比条件小 n 帧，所以 deaths 变量更多地计算它们碰撞的帧数而不是碰撞次数。
但是我该如何做对呢？任何想法？

如果有帮助，这里是距离函数：

function distance(x1, y1, x2, y2) {
  return Math.sqrt(Math.pow(Math.abs(x1 -  x2), 2) + Math.pow(Math.abs(y1 - y2), 2));
}

Answer 1

如果之前没有检测到碰撞，您只能增加死亡计数。

if (distance(spaceship.x + spaceship.width, spaceship.y + spaceship.width, asteroid.x, asteroid.y) < asteroid.radius + spaceship.width) {         
    if (!collisionOccured) {
      console.log('Collision');
      collisionOccured = true;
      deaths++;
    }
}

如果这不起作用，那是因为 collisionOccured 在每帧开始时被设置为 false，您应该尝试找到一种方法来保持变量在前一帧中的值。

如何在游戏循环中只检测一次碰撞而不是连续检测？

How to detect collision only once in Game-loop instead of continuously?

html

javascript

canvas

collision-detection

game-loop

我正在 JavaScript 中编写一个小型 space 游戏，如何检测碰撞？