JS剖析正方形物体碰撞原理

最新推荐文章于 2022-09-14 08:52:20 发布

原创最新推荐文章于 2022-09-14 08:52:20 发布 · 3.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#碰撞原理

JS 专栏收录该内容

4 篇文章

订阅专栏

本文详细解析了如何利用JavaScript实现两个拖拽层的碰撞检测。通过四个关键结论，阐述了当拖拽层分别在目标层上部、左边、右边、下边活动时不会发生碰撞的原理，并给出了具体的边界判断条件。文章最后提供了基于这些原理的碰撞检测代码实现。

最近在做一个拖拽图片排序的项目，其中就有个检测两个对象之间是否发生碰撞，网上有好多写好的代码，但讲原理的没有找到几个，下面就剖析一下是如何实现碰撞的！

一、4个结论
①拖拽层在目标层上部活动时不会碰撞
②拖拽层在目标层左边活动时不会碰撞
③拖拽层在目标层右边活动时不会碰撞
④拖拽层在目标层下边活动时不会碰撞

二、先来理解层的4个边界

三、结论①拖拽层在目标层上部活动时不会碰撞

假设div1是拖拽层，div2是目标层。
注：div1的下边界始终在div2上边界上面活动，则不会发生碰撞。

四、结论②拖拽层在目标层左边活动时不会碰撞

注：div1的右边界始终在div2左边界左面活动，则不会发生碰撞。

五、结论③拖拽层在目标层右边活动时不会碰撞

注：div1的左边界始终在div2右边界右面活动，则不会发生碰撞。

六、结论④拖拽层在目标层下边活动时不会碰撞

注：div1的上边界始终在div2下边界下面活动，则不会发生碰撞。

七、只需要判断四个边界，上面4种是不会发生碰撞的情况，排除这四种就说明发生碰撞了。

八、原理讲完了，直接上代码。

function(obj1, obj2) {
    var t1 = obj1.offsetTop;
    var r1 = obj1.offsetWidth+obj1.offsetLeft;
    var b1 = obj1.offsetHeight+obj1.offsetTop;
    var l1 = obj1.offsetLeft;

    var t2 = obj2.offsetTop;
    var r2 = obj2.offsetWidth+obj2.offsetLeft;
    var b2 = obj2.offsetHeight+obj2.offsetTop;
    var l2 = obj2.offsetLeft;

    if(t1>b2||r1<l2||b1<t2||l1>r2){
        return false;
    }else{
        return true;
    }
}

碰撞原理叙述完了，如有不足之处欢迎大家指正！