js to implement collision detection

This article example shares the specific code of js to implement collision detection for your reference. The specific content is as follows

Code:

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  div {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    width: 300px;
    height: 300px;
    background-color: green;
  }
  
  span {
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: rgb(10, 151, 233);
  }
</style>
 
<body>
  <div></div>
  <span></span>
  <script>
    var div = document.getElementsByTagName('div')[0];
    var span = document.getElementsByTagName('span')[0];
    span.onmousedown = function(e) {
      // Event object compatible e = window.event || e;
      // Add global capture if (span.setCapture) {
        span.setCapture();
      }
      // Press the mouse to get the distance between the mouse and the left and top of the page var x = e.clientX;
      var y = e.clientY;
      // The distance between the element and the left and top of the page var elex = span.offsetLeft;
      var eley = span.offsetTop;
      // Distance between mouse and element = distance between mouse and page - distance between element and page var X = x - elex;
      var Y = y - eley;
      document.onmousemove = function(e) {
        //Mouse movement gets the distance between the mouse and the page //Event object compatible e = window.event || e;
        var movex = e.clientX;
        var movey = e.clientY;
        // The left and top values of the element = the distance between the mouse and the page - the distance between the mouse and the element var leftx = movex - X;
        var lefty = movey - Y;
        /*----------------------------------------------------------*/
        // Collision detection // 1. Left safety distance = distance between big box and left side of page - width of small box var safeleft = div.offsetLeft - span.offsetWidth;
        // 2. The right safety distance is the distance between the big box and the left side of the page + the width of the big box var saferight = div.offsetLeft + div.offsetWidth;
        // 3. Upper safety distance = distance between big box and top of page - height of small box var safetop = div.offsetTop - span.offsetHeight;
        // 4. Bottom safety distance = distance between big box and top of page + height of big box var safebottom = div.offsetTop + div.offsetHeight;
 
        if (leftx < safeleft || leftx > saferight || lefty < safetop || lefty > safebottom) {
          div.style.background = 'green';
        } else {
          div.style.background = 'red';
        }
 
        /*----------------------------------------------------------*/
 
        // Boundary value // Leftif (leftx <= 0) {
          leftx = 0;
        }
        // if (lefty <= 0) {
          lefty = 0;
        }
        //Right var rightx = document.documentElement.clientWidth - span.offsetWidth;
        if (leftx >= rightx)
          leftx = rightx;
        // Next var righty = document.documentElement.clientHeight - span.offsetHeight;
        if (lefty >= righty) {
          lefty = righty;
        }
 
 
        span.style.left = leftx + 'px';
        span.style.top = lefty + 'px';
      }
      document.onmouseup = function() {
 
          document.onmousemove = null;
          if (span.releaseCapture) {
            span.releaseCapture();
          }
 
 
        }
        // Prevent default event return false;
    }
  </script>
</body>
 
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: