javascript中两个正方形之间的碰撞检测

Question

我的代码中有一个问题，我可以通过点击来移动红色的（square1），我想做的是当红色的触摸蓝色的时检测碰撞。我希望它在发生碰撞时变色。。。

以下是我的代码，以便更清楚：http://jsbin.com/iFAlIyIv/4/edit

Answer 1

您的基本方法是正确的，问题如下：

• 您需要的不是square1.left，而是square1.offsetLeft。元素没有left属性。top、width和height也是如此。

• 您需要按类名选择元素，而不是document.getElementById("square2")，因为没有具有该ID的元素（只有具有该类的元素）。

• 您正在呼叫changecouleur，但可能是想呼叫colorswap。看起来有点未完成的重构。

在此之后，您也不需要任何额外的检查：

if (bl > ar || br < al) {
    return false;
} //overlap not possible
if (bt > ab || bb < at) {
    return false;
} //overlap not possible

如果这两个条件都不成立，它们必须重叠。

http://jsbin.com/iFAlIyIv/13/edit