js笔记：物体碰撞

最新推荐文章于 2024-07-09 11:56:29 发布

原创最新推荐文章于 2024-07-09 11:56:29 发布 · 569 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

这篇博客记录了使用JavaScript实现物体碰撞的笔记，主要介绍了两种方法：通过判断碰到的区域和通过判断未碰撞的区域来实现两个100px宽的方块碰撞时，方块二变色的效果。

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

js笔记：物体碰撞

实现：两个宽度为100px的方块，拖动方块一与方块二发生碰撞时，方块二变色
布局：

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

div{
            width: 100px;
            height:100px;
        }
        #div1{
            background-color: blueviolet;
            left: 0;
            top: 0;
            position: absolute;
        }
        #div2{
            background-color: cadetblue;
            left: 200px;
            top: 300px;
            position: absolute;
        }

方法一：从判断碰到的区域

 window.onload = function(){
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");

            div1.onmousedown = function(ev){
                var e = ev || window.event;
                var offsetX = e.clientX - div1.offsetLeft;
                var offsetY = e.clientY - div1.offsetTop;

                document.onmousemove = function(ev){
                    var e = ev || window.event;

                    var nodex1 = div1.offsetLeft;
                    var nodey1 = div1.offsetTop;
                    var nodex2 = div2.offsetLeft;
                    var nodey2 = div2.offsetTop;

                    if(isCollide(nodex1,nodey1,nodex2,nodey2,100)){
                        div2.style.backgroundColor = "black";
                    }else{
                        div2.style.backgroundColor = "cadetblue";
                    }

                    div1.style.left = e.clientX - offsetX + "px";
                    div1.style.top = e.clientY - offsetY + "px";
                }
            }
            document.onmouseup = function(){
                document.onmousemove = null;
            }
        }
		//x1,y1是方块一的坐标
		//x2,y2是方块二的坐标
        function isCollide(x1,y1,x2,y2,w){

                // 右上角坐标
                if(x1 >= x2 && x1 <= (x2 + w) 
                    && y1 >= y2 && y1 <= (y2 + w)) return true;

                // 右下角坐标
                if(x1 >= x2 && x1 <= (x2 + w) 
                    && (y1 + w) >= y2 && (y1 + w) <= (y2 + w)) return true;

                // 左上角坐标
                if((x1 + w) >= x2 && (x1 + w) <= (x2 + w) 
                    && y1 >= y2 && y1 <= (y2 + w)) return true;

                // 左下角坐标
                if((x1 + w) >= x2 && (x1 + w) <= (x2 + w) 
                    && (y1 + w) >= y2 && (y1 + w) <= (y2 + w)) return true;

                return false;
        }

方法二：（推荐）从判断未碰撞的区域

<script>
        window.onload = function(){
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");

            div1.onmousedown = function(ev){
                var e = ev || window.event;
                var offsetX = e.clientX - div1.offsetLeft;
                var offsetY = e.clientY - div1.offsetTop;

                document.onmousemove = function(ev){
                    var e = ev || window.event;

                    if(knock(div1,div2)){
                        div2.style.backgroundColor = "black";
                    }else{
                        div2.style.backgroundColor = "cadetblue";
                    }

                    div1.style.left = e.clientX - offsetX + "px";
                    div1.style.top = e.clientY - offsetY + "px";

                   
                }
            }
            document.onmouseup = function(){
                document.onmousemove = null;
            }
        }
        function knock(node2,node1){ //node2,node1也可以，总是就是先判断无碰撞区域
            var l1 = node1.offsetLeft;
            var r1 = node1.offsetLeft + node1.offsetWidth;
            var t1 = node1.offsetTop;
            var b1 = node1.offsetTop + node1.offsetHeight;

            var l2 = node2.offsetLeft;
            var r2 = node2.offsetLeft + node2.offsetWidth;
            var t2 = node2.offsetTop;
            var b2 = node2.offsetTop + node2.offsetHeight;
            if( l1>r2 || r1<l2 || t1>b2 || b1<t2){ 
                return false;
            }else{  
                return true;
            }
        }
    </script>