javascript - 画布碰撞？

Question

测试我的游戏，当用户和怪物发生碰撞时，我希望弹出警报但没有运气：

function die() {

  for (var i = 0; i < monster.length; i++) {
    if (user.destinationX === monster[i].destinationX && user.destinationY === monster[i].destinationY {
      alert("die");
    }
  }
}

Answer 1

我将提供一个带有解释的合并答案。如果您喜欢这个解释，请注明 karaxuna或user2317489。

正如 Kolink 所提到的，您的问题是 pacman 故障，或者更确切地说，您的怪物不仅仅是像素 - 它们有自己的大小。您当前正在检查一个对象的来源并查看它是否与另一个实体的完全相等 - 如果有的话，这种情况很少发生。相反，您需要检查的是怪物是否至少有一个共同点（换句话说，碰撞检查）。

这可以通过检查一个的原点是否在另一个的边界框内来轻松完成，或者换句话说，如果monster2.x <= monster1.x <= (monster2.x+monster2.width)和 monster2.y <= monster1.y <= (monster2.y+monster2.height)。Arnelle Balane 提供的没有解释的代码就是这样做的。

这并不总是一个好的近似值，因为这盲目地假设你的怪物是一个正方形。为了使它成为一个圆圈，您需要检查一个怪物的中心是否在另一个中心的一定距离内（其中距离是公制的，并使用 计算sqrt(pow(x,2)+pow(y,2))。不过，所有这些都是更精细的细节。

Answer 2

试试这种碰撞检测方法。它基于两个对象的重叠来检测两个对象之间的碰撞。

function hasCollision(object1, object2) {
  if (object1.x + object1.width < object2.x) return false;
  if (object1.x > object2.x + object2.width) return false;
  if (object1.y + object1.height < object2.y) return false;
  if (object1.y > object2.y + object2.height) return false;
  return true;
}

function die() {
  for (var i = 0; i < monster.length; i++) {
    if (hasCollision(user, monster)) {
      alert("die");
    }
  }
}

此碰撞检测考虑对象的形状（正方形/矩形）并检查两个对象是否重叠。它还需要对象的宽度和高度来确定对象的边缘在哪里（或者您可以根据当前拥有的内容对其进行修改）。

Answer 3

不要使用严格的比较。因为帧率可能不同。您现在正在检测像素碰撞。你应该考虑每个物体的形状