Javascript：碰撞检测

Question

Javascript：碰撞检测有人可以帮我理解碰撞检测在JS中是如何工作的吗？我不能使用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）”位置的数组，并在“ball”移动时测试碰撞...类似于：for(var c=0; c<objposArray.length; c++){........ and code to check ball's current position vs all objects one by one.... }但我想这将是一个“noob”解决方案，它看起来很慢。有更好的吗？

Answer 1

首先要做的是检测球与物体之间是否发生碰撞的实际功能。

为了性能起见，实现一些粗略的碰撞检测技术（例如，边界矩形）以及在检测到碰撞时需要更准确的技术将是很好的，这样您的功能可以更快地运行但是使用完全相同的同样的循环。

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

为了加快速度，你可以实现2d-tree，quadtree或R-tree。

Answer 2

这是一个非常简单的边界矩形例程。该公司预计双方a并b能与对象x，y，width和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))
    );}

Answer 3

你可以尝试jquery-collision。完全披露：我刚刚写了这个并发布了它。没有找到解决方案，所以我自己写了。

它允许你做：

var hit_list = $("#ball").collision("#someobject0");

这将返回与“#ball”重叠的所有“＃someobject0”。