【整理】JS函数实现碰撞检测_js判断两个物体是否碰到-CSDN博客

本文链接：https://blog.csdn.net/m0_50947589/article/details/124981691

关于两个物体的碰撞检测的实现，首先可以把两个物体置于坐标系中，用坐标关系来直观体现

在html的坐标系中，横轴向右为正，纵轴向下为正，将红色方块命名为a，蓝色方块命名为b。四个蓝色方块代表了四个不同方向。t1（2）、b1（2）、l1（2）、r1（2）分别表示红色（蓝色）方块的上偏移量、高度、左偏移量和宽度，当r2 < l1 、 r1 < l2 、 b2 < t1、 b1 < t2时，两方块不会碰撞。

代码实现：

function isCrash(a,b){
        var l1 = a.offsetLeft;
        var t1 = a.offsetTop;
        var r1 = l1 + a.offsetWidth;
        var b1 = t1 + a.offsetHeight;

        var l2 = b.offsetLeft;
        var t2 = b.offsetTop;
        var r2 = l2 + b.offsetWidth;
        var b2 = t2 + b.offsetHeight;
        if(r2 < l1 || r1 < l2 || b2 < t1 || b1 < t2){
            return false;
        }else{
            return true;
        }
    }

使用时，将需要检测碰撞的两个量分别替换a、b，再使用if函数进行条件判断进而执行不同的操作。

例如：

    if(isCrash(dBall,dBoard)){
            dBall.style.top = dBoard.offsetTop - dBall.offsetHeight + 'px';
            dBall.sy *= -1;
        }