javascript - 如何在元素(div、图像)相互接触时触发事件？

Question

我想知道是否有可能当一个元素(图像)接触、进入、越过另一个元素(一个包含另一个图像的 div)。

我正在玩一个只使用 Javascript、CSS 和 HTML 的愚蠢的小游戏，我正在尝试弄清楚如何部署一个事件，就像 .click() 或任何其他当 Angular 色(图像)接触或进入另一个元素(其中包含图像的 div)。我使用 w、a、s、d 让 Angular 色(图像元素)四处移动，我希望它在接触某物时触发事件。

Answer 1

我必须在这里做一些假设。你有对象 A，它用 wasd 键移动，你有对象 B 和 C。你已经有一个监听 wasd 键按下并移动对象 A 的事件。移动对象 A 后，你需要计算 A 的边界(左、右、上、下)并与对象 B 和对象 C 的边界进行比较。

可以用$element.offset()得到left和top，那么right就是left+width，bottom就是top+height。

所以一旦你拥有了所有对象，对象相交:

aTopOverlap = a.top > b.top && a.top < b.bottom;
aBottomOverlap = a.bottom > b.top && a.bottom < b.bottom;
aLeftOverlap = a.left > b.left && a.left < b.right;
aRightOverlap = a.right > b.left && a.right < b.left;
aVerticalOverlay = b.top > a.top && b.bottom < a.bottom;
aHorizontalOverlay = b.left > a.left && b.right < a.right;

if ((aTopOverlap || aBottomOverlap || aVerticalOverlay) && (aLeftOverlap || aRightOverlap || aHorizontalOverlay)) {
    //collision logic here
}