js碰撞事件

两个盒子碰撞发生颜色改变:

<html>:

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

<css>:

    body {
      margin: 0;
    }
    #div1 {
      width: 200px;
      height: 200px;
      background-color: rgb(51, 255, 0);
      position: absolute;
      left: 0;
      top: 0;
    }
    #div2 {
      width: 200px;
      height: 200px;
      background-color: rgb(71, 0, 163);
      position: absolute;
      left: 500px;
      top: 200px;
    }
<js>:
     //获得按钮元素
      var div1 = document.getElementById("div1");
      var div2 = document.getElementById("div2");
      //给按钮增加点击事件。
      function crash(obj1, obj2) {
        let a = obj1.offsetLeft + obj1.offsetWidth;
        let b = obj2.offsetLeft + obj2.offsetWidth;
        let c = obj1.offsetLeft;
        obj1.offsetTop + obj1.offsetHeight >= obj2.offsetTop &&
        obj1.offsetTop <= obj2.offsetTop + obj2.offsetHeight &&
        a >= obj2.offsetLeft &&
        c <= b
          ? (obj2.style.background = "red")
          : (obj2.style.background = "rgb(71, 0, 163)");
      }



      function move(obj) {
        obj.onmousedown = function () {
          var chaX = event.clientX - obj.offsetLeft;
          var chaY = event.clientY - obj.offsetTop;

          document.onmousemove = function (event) {
            obj.style.left = event.clientX - chaX + "px";
            obj.style.top = event.clientY - chaY + "px";
            crash(div1,div2)
          };

          document.onmouseup = function () {
            document.onmousemove = null;
          };
        };
      }
//封装完成后输出
move(div1)
move(div2)

 

posted @ 2021-12-08 19:59  roastpork丸子龙  阅读(123)  评论(0)    收藏  举报