javaScript：碰撞检测

目录

前言

实现思路 

碰撞检测函数 

完整代码

---

前言

        碰撞检测在计算机图形、模拟、交互设计以及各种应用中都具有广泛的应用，它可以确保物体之间的正确交互，提供更真实和高效的体验，并有助于避免潜在的问题和冲突。

实现思路 

通过比较两个矩形（用 aDiv 和 bDiv 表示）的位置信息来判断它们是否发生碰撞。以下是该碰撞函数的实现思路：

1. 首先，通过获取 aDiv 和 bDiv 的位置信息，分别计算它们的上边界(t1 和 t2)、右边界(r1 和 r2)、下边界(b1 和 b2)以及左边界(l1 和 l2)。

2. 接下来，通过比较这些边界信息，判断两个矩形是否发生碰撞。碰撞的情况可以通过以下四个条件中的任意一个来判断：

   • 如果矩形 aDiv 的上边界大于矩形 bDiv 的下边界，说明 aDiv 在 bDiv 的上方，没有碰撞。
   • 如果矩形 aDiv 的右边界小于矩形 bDiv 的左边界，说明 aDiv 在 bDiv 的左侧，没有碰撞。
   • 如果矩形 aDiv 的下边界小于矩形 bDiv 的上边界，说明 aDiv 在 bDiv 的下方，没有碰撞。
   • 如果矩形 aDiv 的左边界大于矩形 bDiv 的右边界，说明 aDiv 在 bDiv 的右侧，没有碰撞。

3. 如果上述条件中的任意一个不满足，那么矩形 aDiv 和 bDiv 就发生了碰撞，函数返回 true，否则返回 false 表示没有碰撞。

碰撞检测函数 

// 碰撞检测函数，用于判断两个元素（矩形）是否发生碰撞
// 参数 aDiv: 第一个元素的 DOM 对象
// 参数 bDiv: 第二个元素的 DOM 对象
// 返回值：如果发生碰撞返回 true，否则返回 false
function isCrash(aDiv, bDiv) {
    // 获取第一个元素的上、右、下、左边界位置
    let t1 = aDiv.offsetTop;
    let r1 = aDiv.offsetLeft + aDiv.offsetWidth;
    let b1 = aDiv.offsetTop + aDiv.offsetHeight;
    let l1 = aDiv.offsetLeft;

    // 获取第二个元素的上、右、下、左边界位置
    let t2 = bDiv.offsetTop;
    let r2 = bDiv.offsetLeft + bDiv.offsetWidth;
    let b2 = bDiv.offsetTop + bDiv.offsetHeight;
    let l2 = bDiv.offsetLeft;

    // 判断碰撞
    if (t1 > b2 || r1 < l2 || b1 < t2 || l1 > r2) {  
        // 不碰撞的情况
        return false;
    } else {
        // 碰撞的情况
        return true;
    }
}

// 示例用法：
const elementA = document.getElementById("elementA"); // 获取元素A的DOM对象
const elementB = document.getElementById("elementB"); // 获取元素B的DOM对象

const collision = isCrash(elementA, elementB); // 判断元素A和元素B是否发生碰撞
console.log("是否发生碰撞:", collision); // 打印碰撞结果

完整代码