Javascript/JQuery中的多DIV冲突检测

multiple DIV collision detection in Javascript/JQuery

本文关键字：DIV 冲突检测 JQuery Javascript      更新时间：2023-09-26

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

但是，在看了StackOverflow中的各种类似问题后，这些问题通常涉及2个DIV的碰撞，或者使用某种jQuery可拖动的检测技巧，我仍然有点不知所措，不知道如何在这些想法的基础上扩展一个简单的"如果我正在触摸/重叠/碰撞另一个对象，它也应该被感染"，该方法可以应用于页面上的大量元素，说小于100以便不向下拖动浏览器。

我基本上可以确定物体的位置和宽度/高度，这样我就知道它们需要多少空间，但当我试图开发一种检查所有人群是否发生碰撞的功能时，大脑会"眩晕"。

让人口随机流动而没有麻烦-参见JSFiddlehttps://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);
     });
 }

任何能将我推向正确方向的提示、技巧、改编或代码片段都将不胜感激。

一个快速、简单、肮脏的解决方案（还有更复杂的算法）将使用：

document.elementFromPoint(x, y);

它在指定的位置获取元素。完整的规格可以在这里找到。

假设你的"僵尸"是矩形的，你可以对每个角落都这样称呼，如果你被击中，那不是背景或你要检查的元素，你就发生了碰撞。。。

编辑：

另一种方法，甚至比上面的方法"更往下、更脏"，但速度极快，是让两个物体的中心点进行检查，然后找到它们在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();

它返回一个字段为left、top、right和bottom的"rect"对象
现在我们检查接近度。。。

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

Danny

相关文章：