Question

我创建了一个小游戏，其中一些块在主div上移动。同时持有div的鼠标（我已将光标的位置分配给该div）。

我只是想跟踪一下，光标div是否在块上移动（那些也是div）。如果是这样，游戏就会结束。

如何检测块或光标div是否相互移动？

Answer 1

如果您使用的是jQuery，可以使用以下命令找到div的左侧，顶部，宽度和高度：

$(myDiv).offset().left
$(myDiv).offset().top
myDiv.offsetWidth
myDiv.offsetHeight

使用它们来计算每个div的左，右，顶部和底部。然后，如果出现两个div相互重叠：

left1 < right2 && left2 < right1 && top1 < bottom2 && top2 < bottom1

Answer 2

这不是一个简单的使用普通javascript的任务，因为你必须追踪div的祖先并总结相对位置，直到你找到一个绝对定位的div。

另一方面，使用jQuery或Prototype等javascript库完成此任务非常简单。例如，在jQuery中，$(myDiv).offset()返回div相对于文档的位置。

如果你还包括jQuery UI，并使你的主div成为“可拖动”，并且所有其他div都是“Droppable”，那么你所需要的只是挂在Droppable's over event上以获得主要信息div被拖过另一个。

Answer 3

您所谈论的概念称为collision detection。

很简单，您需要获取div的边界，然后遍历所有块以查看它们是否重叠。

Answer 4

getBoundingClientRect（）

John Resig在这里有一篇很棒的文章：getBoundingClientRect is Awesome

Answer 5

如果你不想使用jQuery，你可以从这里复制/粘贴（LGPL代码）; http://code.google.com/p/ra-ajax/source/browse/trunk/Ra/Js/Ra.js

要寻找的地方是第8行的“绝对”功能。 220，递归地计算while循环中“祖先节点”的大小。

粘贴在这里以供参考;

var valueT = this.offsetTop  || 0;
var valueL = this.offsetLeft  || 0;
var el = this.offsetParent;

while (el) {
  Ra.extend(el, Ra.Element.prototype);
  if( el.tagName == 'BODY' ) {
    break;
  }
  var pos = el.getStyle('position');
  if( pos == 'relative' || pos == 'absolute') {
    break;
  }
  valueT += el.offsetTop  || 0;
  valueL += el.offsetLeft || 0;
  el = el.offsetParent;
}

“this”这里是一个DOM元素......

但是我怀疑你所拥有的是绝对定位div在另一个div中的位置：relative在这种情况下你可以使用;

var y = parseInt(myElement.style.top, 10);
var x = parseInt(myElement.style.left, 10);

这将是比“偏移循环”更快的数量级...

检测div的位置

5 个答案: