JavaScript碰撞检测原理及其实现

最新推荐文章于 2025-04-27 14:07:40 发布

SuperluminalSnails

最新推荐文章于 2025-04-27 14:07:40 发布

阅读量1.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/SuperluminalSnails/article/details/51534828

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了JavaScript中模拟碰撞的方法，通过介绍碰撞检测原理，例如利用div元素的四个距离属性(L, T, R, B)进行碰撞判断，并通过九宫格策略简化碰撞检查。此外，还提供了具体的测试代码来实现碰撞检测功能。" 133381739,19687568,使用Python将Word转换为HTML,"['Python编程', '文件转换', '文档处理']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.模拟碰撞

简单模拟碰撞过程,用一个可以拖拽的div2去尝试碰撞一个固定的div1(均用绝对定位)

2.碰撞检测原理

这里写图片描述
如图所示:
使得div分别有4个距离属性( L(left),T(top),R(right),B(bottom) ).
对于div1来说,画出一个九宫格,div2在除中心以为的8个格子任意移动都不会发送碰撞.

这里写图片描述
也就是说,只要满足条件:oDiv2.div2R小于oDiv1.div1L|| oDiv2.div2L大于oDiv1.div1R || oDiv2.div2B小于oDiv1.div1T|| oDiv2.div2T大于oDiv1.div1B就不会发送碰撞

3.具体测试代码

<html>
<head>
    <title></title>
    <style type="text/css">
    body{margin: 0;padding: 0;}
    #div2{height: 100px;width: 200px;background-color: orange;position: absolute;left: 0px;top:0px;z-index: 1;}
    #div1{height: 100px;width: 100px;background-color: #a6e22e;position: absolute;left: 600px;top:400px;}
    </style>
    <script type="text/javascript">
    //获取对象样式属性值
    function getObjStyle(obj,attr)
    {
        return getComputedStyle(obj)?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
    }
    </script>
    <script type="text/javascript">
    window.onload=function (){
        var oDiv1=document.getElementById('div1');
        var oDiv2=document.getElementById('div2');



        oDiv2.onmousedown=function (onEvent,obj){//对div1实现拖拽,并对碰撞进行检测
            obj=this;
            var ev=onEvent||event;
            var distance={};
            distance.disX=ev.clientX-obj.offsetLeft;//到左边框的距离
            distance.disY=ev.clientY-obj.offsetTop;//到上边框的距离

            //获取div1的四个值
            oDiv1.div1L=getObjStyle(oDiv1,'left');
            oDiv1.div1R=parseInt(getObjStyle(oDiv1,'left'))+parseInt(getObjStyle(oDiv1,'width'))+'px';
            oDiv1.div1T=getObjStyle(oDiv1,'top');
            oDiv1.div1B=parseInt(getObjStyle(oDiv1,'top'))+parseInt(getObjStyle(oDiv1,'height'))+'px';




            if(obj.setCapture)
                obj.setCapture();

            document.onmousemove=function (onEvent){
                var ev=onEvent||event;
                obj.style.left=ev.clientX-distance.disX+'px';
                obj.style.top=ev.clientY-distance.disY+'px';

                //获取div2的四个值
                oDiv2.div2L=getObjStyle(oDiv2,'left');
                oDiv2.div2R=parseInt(getObjStyle(oDiv2,'left'))+parseInt(getObjStyle(oDiv2,'width'))+'px';
                oDiv2.div2T=getObjStyle(oDiv2,'top');
                oDiv2.div2B=parseInt(getObjStyle(oDiv2,'top'))+parseInt(getObjStyle(oDiv2,'height'))+'px';

                /*console.log('oDiv2.div2L:'+oDiv2.div2L+'  oDiv2.div2R:'+oDiv2.div2R+'  oDiv2.div2T:'+oDiv2.div2T+'  oDiv2.div2B:'+oDiv2.div2B);*/

                //碰撞检测
                if(oDiv2.div2R<oDiv1.div1L || oDiv2.div2L>oDiv1.div1R || oDiv2.div2B<oDiv1.div1T || oDiv2.div2T>oDiv1.div1B){
                    //未发送碰撞
                }else{
                    //发生碰撞
                    alert('发生碰撞');
                }

            }

            document.onmouseup=function (){
                document.onmouseup=document.onmousemove=null;
                if(obj.setCapture)
                    obj.releaseCapture();
            }
            return false;
        }
    }
    </script>
</head>
<body>
    <div id="div2">div2</div>
    <div id="div1">div1</div>
</body>
</html>