Javascript 如何在从一个位置过渡到另一个位置时检查一个div是否与另一个div重叠

$（文档）.ready（函数（）{
$（函数（）{
$（'#executeButton'）。单击（函数（）{
test（）；
});  
函数坐标（dx，dy）{
var cx=document.getElementById（'block'）.style.marginLeft；
var cy=document.getElementById（'block'）.style.marginTop；
cx=parseInt（cx）+40*dx；
cy=parseInt（cy）+40*dy；
如果（cx<0）cx=0；
如果（cy<0）cy=0；
如果（cx>360）cx=360；
如果（cy>360）cy=360；
document.getElementById（'block'）.style.marginLeft=cx+'px'；
document.getElementById（'block'）.style.marginTop=cy+'px'；
}
功能测试（）{
移动（4）；
setTimeout（move，2000，4）；
placeposition（）；
设置超时（移动，4000，4）；
placeposition（）；
设置超时（移动，6000，2）；
placeposition（）；
设置超时（移动，8000，2）；
placeposition（）；
}
功能移动（id）{
如果（id='1'）{
坐标（'0'，'-1'）；
}如果（id='2'，则为else）{
坐标（'0'，'1'）；
}else if（id='3'）{
坐标（'-1'，0'）；
}else if（id='4'）{
坐标（'1'，'0'）；
}
}
函数placeposition（）{
var block=$（'#block'）.position（）；
var dest=$（'#dest'）.position（）；
if（block.top==dest.top&&block.left==dest.left）{
警报（“到达”）；
}
} 
});
});
#面板{
宽度：100%；
身高：100%；
边框样式：实心；
填充顶部：10px；
右边填充：10px；
垫底：10px；
左侧填充：10px；
}
#游戏{
宽度：400px；
高度：400px；
背景图像：线性梯度（透明39px，#888 39px，透明40px），线性梯度（90度，透明39px，#888 39px，透明40px）；
背景尺寸：40px40px，40px40px；
边框样式：实心；
浮动：左；
右边距：10px；
}
#挡块{
宽度：40px；
高度：40px；
浮动：左；
过渡：1s；
背景色：红色；
外形：1px实心；
}
#目的地{
宽度：40px；
高度：40px；
背景颜色：蓝色；
外形：1px实心；
}
#性格{
宽度：50px；
高度：50px；
外形：1px实心；
浮动：左；
背景色：红色；
过渡：1s；
}

执行

您还需要将
placeposition
放在
setTimeout
内，否则它将直接执行，无法获得正确的位置
您需要使用
offset
而不是
position
因为
块
是浮动的，所以也需要将高度添加到偏移量
顶部

$（函数（）{
$（函数（）{
$（'#executeButton'）。单击（函数（）{
test（）；
});
函数坐标（dx，dy）{
var cx=document.getElementById（'block'）.style.marginLeft；
var cy=document.getElementById（'block'）.style.marginTop；
cx=parseInt（cx）+40*dx；
cy=parseInt（cy）+40*dy；
如果（cx<0）cx=0；
如果（cy<0）cy=0；
如果（cx>360）cx=360；
如果（cy>360）cy=360；
document.getElementById（'block'）.style.marginLeft=cx+'px'；
document.getElementById（'block'）.style.marginTop=cy+'px'；
}
功能测试（）{
移动（4）；
placeposition（）；
setTimeout（函数（）{
移动（4）；
placeposition（）；
}, 2000);
setTimeout（函数（）{
移动（4）；
placeposition（）；
}, 4000);
setTimeout（函数（）{
移动（2）；
placeposition（）；
}, 6000);
setTimeout（函数（）{
移动（2）；
placeposition（）；
}, 8000);
}
功能移动（id）{
如果（id='1'）{
坐标（'0'，'-1'）；
}如果（id='2'，则为else）{
坐标（'0'，'1'）；
}else if（id='3'）{
坐标（'-1'，0'）；
}else if（id='4'）{
坐标（'1'，'0'）；
}
}
函数placeposition（）{
var block=$（'#block'）.offset（）；
var dest=$（'#dest'）.offset（）；
if（block.top+$（'#block'）.height（）==dest.top&&block.left==dest.left）{
警报（“到达”）；
}
}
});
});
#面板{
宽度：100%；
身高：100%；
边框样式：实心；
填充顶部：10px；
右边填充：10px；
垫底：10px；
左侧填充：10px；
}
#游戏{
宽度：400px；
高度：400px；
背景图像：线性梯度（透明39px，#888 39px，透明40px），线性梯度（90度，透明39px，#888 39px，透明40px）；
背景尺寸：40px40px，40px40px；
边框样式：实心；
浮动：左；
右边距：10px；
}
#挡块{
宽度：40px；
高度：40px；
浮动：左；
过渡：1s；
背景色：红色；
外形：1px实心；
}
#目的地{
宽度：40px；
高度：40px；
背景颜色：蓝色；
外形：1px实心；
}
#性格{
宽度：50px；
高度：50px；
外形：1px实心；
浮动：左；
背景色：红色；
过渡：1s；
}

执行
谢谢，我会尝试。当我尝试这段代码时，红色框到达蓝色框block.top+$（“#block'）。height（）值与dest.top不同，但对于运算符==这是真的，请解释一下。同样在函数测试（）中，如果我将顺序设置为move（2）、move（2）、move（4）、move（4），它到达了目的地，但没有发出警报。我知道这可能发生。问题似乎在于游戏场地的设计。您可以使用诸如
float
和
margin
之类的方法来创建电路板。这并不是你想在职位上工作的最佳想法。这可能发生在你身上。我建议重新设计你的游戏，使用绝对位置。这在我看来会帮你省去很多麻烦。@suchitAs你说过，我去掉了浮标和边距，把它放在最上面，然后沿着绝对线向左。并在javascri中做了相应的更改