JavaScript：碰撞检测

Question

JavaScript 中的碰撞检测是如何工作的？

我不能使用 jQuery 或 gameQuery - 已经在使用原型 - 所以，我正在寻找非常简单的东西。我不要求完整的解决方案，只是指出正确的方向。

假设有：

 <div id="ball"></div>
and
<div id="someobject0"></div>

现在球在移动（任何方向）。 “Someobject”(0-X) 已经预先定义好，其中有 20-60 个随机放置，如下所示：

 #someobject {position: absolute; top: RNDpx; left: RNDpx;}

我可以创建一个带有“someobject(X)”位置的数组并在“球”移动时测试碰撞……类似于：

 for(var c=0; c<objposArray.length; c++){
........ and code to check ball's current position vs all objects one by one....
}

但我想这将是一个“菜鸟”解决方案，而且看起来很慢。有更好的吗？

原文由 jack moore 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

首先要有一个实际的功能，它将检测你是否在球和物体之间发生碰撞。

为了性能起见，实现一些粗略的碰撞检测技术会很棒，例如， 边界矩形，如果需要的话，如果检测到碰撞，还可以使用更准确的技术，这样你的函数运行得会快一点，但使用的恰恰是相同的循环。

另一个有助于提高性能的选项是对您拥有的对象进行一些预处理。例如，您可以将整个区域分解为像通用表格一样的单元格，并存储包含在特定单元格中的适当对象。因此，要检测碰撞，您正在检测球占据的单元格，从这些单元格中获取对象并使用碰撞检测功能。

为了进一步加快速度，您可以实现 2d-tree 、 quadtree 或 R-tree 。

原文由 Li0liQ 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是一个非常简单的边界矩形例程。 It expects both a and b to be objects with x , y , width and height 属性：

 function isCollide(a, b) {
    return !(
        ((a.y + a.height) < (b.y)) ||
        (a.y > (b.y + b.height)) ||
        ((a.x + a.width) < b.x) ||
        (a.x > (b.x + b.width))
    );
}

要查看此功能的实际效果，请 查看@MixerOID 亲切制作的 代码笔。

原文由 Husky 发布，翻译遵循 CC BY-SA 3.0 许可协议