Question

制作一个小“僵尸”或“标记你是它”或“ew！你有cooties” - 风格游戏，其中每个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。

假设你的'僵尸'是矩形的，你可以为每个角调用它，如果你得到一个命中，那不是你正在检查的背景或元素，你就会发生碰撞... < / p>

编辑：

另一种方法，即使比上面“笨拙和肮脏”，但愚蠢的快，将是检查两个物体的中心点，然后在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();

返回一个'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...
}

丹尼

Javascript / JQuery中的多个DIV冲突检测

1 个答案: