Javascript：检查两个div之间的冲突

Question

有没有办法检查，如果名称为“character”的DIV与名称为“ground”的DIV重叠？

我想用干净的Javascript做到这一点，我知道jQuery更好，但这就是我不想要的。 我看到这篇文章：check collision between certain divs?，但它没有返回任何内容。

感谢您的帮助。

Answer 1

首先，我建议您查看HTML5 canvas元素，就像它的声音一样，您想制作游戏，而canvas对此非常有用;）

但是，要回答您的问题，您可以分别使用document.createElement()或getElementById()创建或获取div元素，并通过获取其JS设置值（element.style来获取其样式属性）或者如果您更喜欢在CSS中设置初始值，请使用getComputedStyle。

确保无论如何获得这些CSS属性，都需要将它们解析为JS可以消化的内容。对于基于整数的位置，parseInt()通常可以解决问题。

接下来，你做数学。在这种情况下，您需要查看字符div的顶部加上其高度是否大于地面的顶部位置。如果是，它已经发生了碰撞。

要将样式设置回div，您只需设置样式属性即可。

这是一个例子： http://jsfiddle.net/JSWUQ/1/

还有一件事：当元素使用不同的定位属性时，有一些复杂的方法来获取元素位置（例如：玩家使用top / left坐标，地面使用bottom ），管理起来要困难得多。

Answer 2

在该链接答案中使用的唯一jQuery是使用div的width，height和position，这对于使用纯JS检索来说有点微不足道：

CSS / JavaScript - How do you get the rendered height of an element?

jquery position() in plain javascript

How do I retrieve an HTML element's actual width and height?

它没有返回任何内容，因为.top语句中的.left height和return变量依赖于检索上述信息的jQuery函数。