元素之间的碰撞

最近公司突然就给我派发了一个项目，是一个H5小游戏，其中就包含有元素碰撞的知识点，吓得我立马去找了资料看了一波，以下是对于元素的碰撞的初步体验，具体实践效果可能要到项目中慢慢开展。
效果图：

碰撞原理：

据图可知，只有box1满足条件：
box1L>box2R||box1R<box2L||box1T>box2B||box1B<box2T
的时候元素才不会发生碰撞，而不满足此条件的话就肯定会发生元素的碰撞。

自己也进行了实践的操作，并且验证了该条件的正确性。

• HTML

<div id="div1">div1</div>
<div id="div2">div2</div>

• CSS

    #div1,#div2{
        width: 150px;
        height: 150px;
        border: 1px solid #000;
        position: absolute;
        text-align: center;
        color: #fff;
    }
    #div1{ background: red;}
    #div2{background: blue;left: 300px;top: 200px;z-index: -1;}

• JS

 <!--碰撞条件-->
    // 只有在div2的正上，正下，左侧以及右侧方不会发生碰撞，其他位置都会碰撞

    window.onload=function () {
        //  获取元素
        var Box1=document.getElementById('div1');
        var Box2=document.getElementById('div2');
        var disX=0;
        var disY=0;
        //  鼠标按下
        Box1.addEventListener('mousedown',function (e) {
            var e=e||window.event;
            //  获取当前元素的位置
            disX=e.clientX-Box1.offsetLeft;
            disY=e.clientY-Box1.offsetTop;
            console.log(disX,disY)
            //  鼠标移动元素
            document.onmousemove=function (ev) {
                var ev=ev||window.event;
                //做碰撞判断
                var Obx1L=Box1.offsetLeft;
                var Obx1R=Box1.offsetLeft+Box1.offsetWidth;
                var Obx1T=Box1.offsetTop;
                var Obx1B=Box1.offsetTop+Box1.offsetHeight;

                var Obx2L=Box2.offsetLeft;
                var Obx2R=Box2.offsetLeft+Box2.offsetWidth;
                var Obx2T=Box2.offsetTop;
                var Obx2B=Box2.offsetTop+Box2.offsetHeight;

                if(Obx1R<Obx2L||Obx1L>Obx2R||Obx1T>Obx2B||Obx1B<Obx2T){
                    console.log('未碰撞')
                    Box2.style.background='blue'
                }else{
                    Box2.style.background='pink'
                }

                Box1.style.left=ev.clientX-disX+'px';
                Box1.style.top=ev.clientY-disY+'px';

            }
            document.onmouseup= function () {
                document.onmousemove=null;
                document.onmouseup=null;
            }
        })

    }

以上就是简单的元素碰撞相关代码，对于移动元素的碰撞，还需要以后慢慢了解，代码没有进行封装，只是简单的实现了效果。
文章写的有不妥之处，希望各位多多指征，多多交流！