javascript - Javascript/JQuery 中的多个 DIV 碰撞检测

Question

正在制作一个“僵尸”或“标记你就是它”或“哎哟!你有虱子”风格的游戏，其中每个 AI 对象(基本上是一个人)随机运行。有一个初始对象是“它”或“被感染”，当它在屏幕上移动并与另一个对象触摸/重叠/碰撞时，它应该将触摸的对象更改为与触摸它的对象相同的颜色。新感染的物体可以继续感染它们随机碰撞的其他物体，直到原则上整个群体的颜色与第一个感染的物体相同。 (我会担心更高级的人工智能，感染者会主动寻找附近的物体，或者健康的物体可以避开受感染的物体，稍后)。

但是在查看了 StackOverflow 中通常处理 2 个 DIV 碰撞或使用某种 jQuery 可拖动检测技巧的各种类似问题之后，我仍然对如何基于这些想法进行扩展感到有点茫然提出一个简单的“如果我与另一个对象接触/重叠/碰撞，它也应该被感染”，可以应用于页面上的大量元素，比如说......少于 100 个，以免拖累浏览器.

我基本上已经确定了物体的位置和宽度/高度，这样我就知道它们占用了多少空间，但是当我试图开发一个检查所有群体是否发生碰撞的功能时，大脑会变得“bzzzzt” .

让人口毫无困难地随机移动 - 请参阅 JSFiddle https://jsfiddle.net/digitalmouse/5tvyjhjL/1/以获得相关代码。受影响的函数应该位于“animateDiv()”中，如下所示，以使 stackoverflow 问题询问编辑器很高兴我在问题中包含了一些代码。 :)

 function animateDiv($target) {
     var newq = makeNewPosition($target.parent());
     var oldq = $target.offset();
     var speed = calcSpeed([oldq.top, oldq.left], newq);

     // I believe collision should be dealt with here,
     // just before moving an object

     $target.animate({
         top: newq[0],
         left: newq[1]
     }, speed, function () {
         animateDiv($target);
     });
 }

任何能插入我走向正确方向的提示、技巧、改编或代码片段都值得赞赏。

Answer 1

一个快速、低级和肮脏的解决方案(有更复杂的算法)将使用:

document.elementFromPoint(x, y);

它获取指定位置的元素。完整的规范可以找到here .

假设你的“僵尸”是矩形的，你可以为每个 Angular 调用这个，如果你被击中，那不是背景或你正在检查的元素，你就会发生碰撞......

编辑:

另一种方法，甚至比上面“更令人沮丧和肮脏”，但速度快得愚蠢，是获取两个对象的中心点进行检查，然后找到它们在 X 和 Y 上的绝对位移。如果差异小于它们的宽度和高度的一半之和然后它们重叠。它绝不是完美的像素，但它应该能够快速处理大量对象。

编辑2:

首先，我们需要获取每个对象的中心(进行检查)

// Values for main object
// pop these in vars as we'll need them again in a sec...
hw = object.style.width >> 1; // half width of object
hh = object.style.height >> 1; // (bit shift is faster than / 2)

cx = object.style.left + hw; // centre point in x
cy = object.style.top + hh; // and in y

// repeat for secondary object

如果您不知道/存储可以使用的宽度和高度:

object.getBoundingClientRect();

它返回一个“矩形”对象，其中包含左侧、顶部、右侧和底部字段。
现在我们检查邻近度...

xDif = Math.abs(cx - cx1); // where cx1 is centre of object to check against

if(xDif > hw + hw1) return false; // there is no possibility of a collision!

// if we get here, there's a possible collision, so...

yDif = Math.abs(cy - cy1);

if(yDif > hh + hh1) return false; // no collision - bug out.
else {
    // handle collision here...
}

丹尼