元素碰撞

我们利用元素获取矩形对象来实现

dom.getBoundingClientReact();

left 元素左边距离页面左边的距离

right 元素右边距离页面左边的距离

top 元素顶边距离页面顶端的距离

bottom 元素下边距离页面顶端的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:50px;
            height:50px;
            background-color: red;
            position: absolute;
        }
        #div0{
            background-color: blue;
        }

    </style>
</head>
<body>
    <div id="div0"></div>
    <div id="div1"></div>

    <script>
        var obj={
            divRandom:function(elem){
                //文档减去元素的宽高
                var w=document.documentElement.clientWidth-elem.clientWidth;
                var h=document.documentElement.clientHeight-elem.clientHeight;
                //随机位置
                elem.style.left=Math.random()*w+"px";
                elem.style.top=Math.random()*h+"px";
            },
            tuozhuai:function (elem){
                elem.addEventListener("mousedown",mouseHandler);
                function mouseHandler(e){
                    switch(e.type){
                        case "mousedown":
                            e.preventDefault();
                            document.addEventListener("mousemove",mouseHandler);
                            this.addEventListener("mouseup",mouseHandler);
                            this.x=e.offsetX;
                            this.y=e.offsetY;
                            document.elem=this;
                        break;
                        case "mousemove":
                            document.elem.style.left=e.clientX-document.elem.x+"px";
                            document.elem.style.top=e.clientY-document.elem.y+"px";
                            //移动碰撞事件，这里需要自定义事件抛发，要不不触发
                            var evn=new Event("hit");
                            this.elem.dispatchEvent(evn);
                        break;
                        case "mouseup":
                            document.removeEventListener("mousemove",mouseHandler);
                            break;
                    }
                }

            },
            hit:function(elem1,elem2){
                var rand0=elem1.getBoundingClientRect();
                var rand1=elem2.getBoundingClientRect();
                //如果元素1的左上角 碰到元素2
                if(rand0.left>=rand1.left && rand0.left<=rand1.right && rand0.top>=rand1.top && rand0.top <=rand1.bottom){
                    return true;
                }
                //右上
                if(rand0.right>=rand1.left && rand0.left<=rand1.left && rand0.top>=rand1.top && rand0.top <=rand1.bottom){
                    return true;
                }

                return false;
            }
            
        }
        var div0=document.querySelector("#div1");
        var div=document.querySelector("#div0");
        obj.divRandom(div);
        obj.tuozhuai(div0);
        //添加div0的自定义事件，碰撞后触发
        div0.addEventListener("hit",hitHandler);

        function hitHandler(e){
            if(obj.hit(div0,div)){
                obj.divRandom(div);
            }

            
        }
        

    </script>
</body>
</html>

 

posted @ 2020-09-27 16:19  WhiteSpace  阅读(287)  评论(0)    收藏  举报