JS-碰撞检测

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u014205965/article/details/45971711

一个简单的碰撞检测例子，检测div1是否和div2发生碰撞，当div1碰到div2时，改变div2的颜色，看测试图

看一下分析图：

当div1在div2的上边线(t2)以上的区域活动时，始终碰不上

当div1在div2的右边线(r2)以右的区域活动时,始终碰不上

当div1在div2的下边线(b2)以下的区域活动时,始终碰不上

当div1在div2的左边线(r2)以左的区域活动时,始终碰不上

除了以上四种情况，其他情况表示div1和div2碰上了，下面试完整测试代码

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

<style>
        #div1{
            width:100px ;height: 100px;background: green;
            position: absolute;
        }
        #div2{
            width:100px ;height: 100px;background: yellow;
            position: absolute;left: 300px;top: 200px;z-index: -1;
        }

</style>

<script>
    window.onload = function () {
        var oDiv = document.getElementById('div1');
        var oDiv2 = document.getElementById('div2');
        var disX = 0;
        var disY = 0;
        oDiv.onmousedown = function (ev) {
            var ev = ev|| window.event;
            disX = ev.clientX - oDiv.offsetLeft;
            disY = ev.clientY - oDiv.offsetTop;
            document.onmousemove = function (ev) {
                var ev = ev|| window.event;

                var t1 = oDiv.offsetTop;
                var l1 = oDiv.offsetLeft;
                var r1 = oDiv.offsetLeft + oDiv.offsetWidth;
                var b1 = oDiv.offsetTop + oDiv.offsetHeight;

                var t2 = oDiv2.offsetTop;
                var l2 = oDiv2.offsetLeft;
                var r2 = oDiv2.offsetLeft + oDiv2.offsetWidth;
                var b2 = oDiv2.offsetTop + oDiv2.offsetHeight;
                if(b1<t2 || l1>r2 || t1>b2 || r1<l2){// 表示没碰上

                }else{
                    oDiv2.style.background = 'blue';
                }

                oDiv.style.left = ev.clientX - disX +'px';
                oDiv.style.top = ev.clientY - disY +'px';
            }
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;

            }
            return false;
        }
    }

</script>