js碰撞检测

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      width: 150px;
      height: 150px;
      position: absolute;
      left: 0px;
      top: 0px;
      background-color: red;
    }
    div:last-of-type{
        background-color: yellowgreen;
        left:300px;
        top:300px;
    }
  </style>
</head>

<body>
  <!-- <img src="./imgs/f1.jpg" alt=""> -->
  <div></div>
  <div></div>
  <script>

    var img = document.getElementsByTagName('img')[0];
    var div = document.getElementsByTagName('div');
    
    // 浏览器可视区域宽高
    var clientW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var clientH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    // div的宽高
    var divW = div[0].offsetWidth;
    var divH = div[0].offsetHeight;

     // 范围
     var areaX = clientW - divW;
     var areaY = clientH - divH;


    div[0].onmousedown = function (e) {
      // 鼠标按下的时候，求出鼠标的位置到div左边以及上边的距离
      var ev = e ||window.event;

      var x = ev.clientX - div[0].offsetLeft;
      var y = ev.clientY - div[0].offsetTop;

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

         var moveX = ev.clientX - x;
         var moveY = ev.clientY - y;

         // 边界判断
         if(moveX <=0){
           moveX = 0;
         }else if(moveX>=areaX){
           moveX = areaX;
         }

         if(moveY <=0){
           moveY = 0;
         }else if(moveY>=areaY){
           moveY = areaY;
         }

         div[0].style.left  = moveX +'px';
         div[0].style.top = moveY + 'px';

         
         var leftA = div[0].offsetLeft;
         var topA = div[0].offsetTop;
         var rightA = div[0].offsetLeft+div[0].offsetWidth;
         var bottomA = div[0].offsetTop+div[0].offsetHeight;

         var leftB = div[1].offsetLeft;
         var topB = div[1].offsetTop;
         var rightB = div[1].offsetLeft+div[1].offsetWidth;
         var bottomB = div[1].offsetTop+div[1].offsetHeight;

         // 碰撞检测
         
         if(!(rightA < leftB || bottomA < topB || leftA > rightB || topA > bottomB )){
             div[1].style.backgroundColor = 'blue'
         }else{
            div[1].style.backgroundColor = ''
         }
        
      }

      document.onmouseup = function(){
        document.onmousemove = null;
      }

    }

  </script>
</body>

</html>
猜你喜欢
