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

是否有任何方法可以检查名为“character”的DIV是否与名为“ground”的DIV重叠

我想用干净的Javascript实现这一点，我知道jQuery更好，但这正是我不想要的。 我看到这个帖子：，但它没有返回任何内容

---

感谢您的帮助。

首先，我建议您查看HTML5

画布

元素，因为从它的声音来看，您想要制作一个游戏，

画布

非常适合这一点；）

但是，为了回答您的问题，您可以分别使用

document.createElement（）

或

getElementById（）

创建或获取div元素，并通过获取它们的JS设置值（

element.style

）获取它们的样式属性，或者如果希望在CSS中设置初始值，可以使用

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

parseInt（）

接下来，你做数学题。在本例中，您需要查看角色div的顶部及其高度是否大于地面的顶部位置。如果是的话，它已经发生了碰撞

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

下面是一个例子：

还有一件事：当元素使用不同的定位属性（例如：玩家使用
top
/
left
坐标，而地面使用
bottom
）时，有很多复杂的方法来获取元素位置，但管理起来要困难得多。
首先，我建议你查看HTML5
画布
元素，听上去，你想做一个游戏，
canvas
非常适合这样做；）

但是，为了回答您的问题，您可以分别使用
document.createElement（）
或
getElementById（）
创建或获取div元素，并通过获取它们的JS设置值（
element.style
）获取它们的样式属性，或者如果希望在CSS中设置初始值，可以使用

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

接下来，你做数学题。在本例中，您需要查看角色div的顶部及其高度是否大于地面的顶部位置。如果是的话，它已经发生了碰撞

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

下面是一个例子：

还有一件事：当元素使用不同的定位属性（例如：玩家使用
顶部
/
左侧
坐标，而地面使用
底部
）时，有很多复杂的方法来获取元素位置，管理起来要困难得多。
在链接答案中使用的唯一jQuery是获取div的
宽度
，
高度
，和
位置
，使用纯JS检索这些内容有些琐碎：




它没有返回任何内容，因为
return
语句中的
.top
left
和
height
变量依赖于检索上述信息的jQuery函数。
在链接答案中使用的唯一jQuery是使用
宽度
，
高度
，和div的
位置
，使用纯JS检索这些div有些琐碎：




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