JavaScript:碰撞检测

Question

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

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

假设有:

<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....
}

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

Answer 1

这是一个非常简单的边界矩形例程。它期望 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))
    );
}

要查看此功能的实际效果，here's a codepen @MixerOID 亲切制作.