画布碰撞？答案

【问题标题】：Canvas collision?画布碰撞？
【发布时间】：2013-04-19 12:22:02
【问题描述】：

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

function die() {

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

【问题讨论】：

您所经历的类似于 PacMan 中的故障，您偶尔可以直接穿过鬼魂而不会死亡。即，期望位置相等，而不是检查它们之间的距离是否太近。

标签： javascript html html5-canvas 2d-games

【解决方案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)) 计算。不过，所有这些都是更精细的细节。

【讨论】：

【解决方案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");
    }
  }
}

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

【讨论】：

@Kolink 对不起。我实际上正在做一些解释:)

【解决方案3】：

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

【讨论】：

真的吗？您是否单击“添加”按钮？还是“编辑”按钮？