javaScript：碰撞检测

小姚学前端

于 2023-10-10 17:29:47 发布

阅读量1.3k

点赞数 1

分类专栏： javascript 文章标签： javascript 前端开发语言 html

本文链接：https://blog.csdn.net/qq_52799985/article/details/133752114

版权

javascript 专栏收录该内容

31 篇文章

订阅专栏

前言

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

实现思路

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

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

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

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

如果上述条件中的任意一个不满足，那么矩形 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); // 打印碰撞结果

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wp{
            width: 200px;
            height: 200px;
            background: #04be02;
            position: absolute;
            left: 100px;
            top: 100px;
        }
        .wt{
            width: 200px;
            height: 200px;
            background:pink;
            margin: 200px auto;
        }
    </style>
</head>
<body>
    <div class="wp"></div>
    <div class="wt"></div>
</body>
</html>
<script>
let wt = document.querySelector('.wt')
let wp = document.querySelector('.wp')
wp.onmousedown = function(){
    //求出坐标点距离元素左边和上边的距离
    let diX = event.clientX - wp.offsetLeft;
    let diY = event.clientY - wp.offsetTop;
    console.log(diX,diY);

    document.onmousemove = function(){
        let oLeft = event.clientX - diX;
        let oTop = event.clientY - diY;
         if (oLeft<=0) {
            oLeft=0
        }
        if (oTop<=0) {
            oTop=0
        }
        let maxLeft = window.innerWidth-wp.offsetWidth;
        let maxTop= window.innerHeight-wp.offsetHeight;
        if (oLeft>=maxLeft) {
            oLeft=maxLeft
        }
        if (oTop>=maxTop) {
            oTop=maxTop
        }
        //设置元素定位位置
        wp.style.left = oLeft + 'px';
        wp.style.top = oTop + 'px';
        
        //碰撞检测
        if (isCrash(wp,wt)) {
            wt.style.background = '#6cc2dc';
        }else{
            wt.style.background = 'pink'
        }
       
    }
}
document.onmouseup = function(){
    document.onmousemove = null;
}

//封装碰撞检测函数
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; //碰撞的情况
     }
}
</script>