JavaScript中碰撞检测的理解及说明

碰撞检测

碰撞检测，顾名思义是当任意两个物体靠近距离<=0时，使程序能够检测到。

碰撞检测可用一张图来理解，如下图

中间盒子看作参照物 四条边分别为 l1 t1 r1 b1。 碰撞检测就是当某一个盒子四条边的任意一边与其他盒子的距离<=0时，即视为产生了碰撞。

碰撞检测代码展示为

//a,b为两个任意盒子，检测其是否碰撞
function isCrash(a,b){
    var l1 = a.offsetLeft;//l1为a盒子左侧偏移量
    var t1 = a.offsetTop;//t1为a盒子顶部偏移量
    var r1 = l1 + a.offsetWidth;//r1为a盒子右侧距页面左侧的距离
    var b1 = t1 + a.offsetHeight;//b1为a盒子底部距页面最顶端的距离
    var l2 = b.offsetLeft;//l2等为b盒子 同上解释
    var t2 = b.offsetTop;
    var r2 = l2 + b.offsetWidth;
    var b2 = t2 + b.offsetHeight;

    if(r2<l1 || b2<t1 || r1<l2 || b1<t2){
    //当满足此条件时，为上图所示情况，没有发生碰撞，此时返回值为false没有检测到碰撞
        return false;
    }else {
    //否则为true,即发生碰撞
        return true;
    }
    
}