Search code examples
javascripthtmlcssmouseeventcollision

Mouse draggable collision between 2 rectangles using javascript

I'm trying to add collision detection in my draggable code which works pretty well I guess ,but when I'm trying to drag the orange rectangle above the green one nothing happens. Is my collision logic right ? Here is what I tried to do.

//HTML code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href = "stl.css" rel = "stylesheet" type = "text/css">
  
</head>
<body>
  <div class="item1"></div>
  <div class="item2"></div>
  <script src = "js.js" type = "text/javascript"></script>
</body>
</html>

I used getBoundingClientRect() to get the position of the rectangles.

//JAVASCRIPT code
const el1 = document.querySelector(".item1");
const el2 = document.querySelector(".item2");
var rect1,rect2;
rect2 = el2.getBoundingClientRect();
el1.addEventListener("mousedown", mousedown);

function mousedown(e) {
  window.addEventListener("mousemove", mousemove);
  window.addEventListener("mouseup", mouseup);

  let prevX = e.clientX; // x cursor position

  let prevY = e.clientY;//y cursor position

  function mousemove(e) {
    
      let newX = prevX - e.clientX;
      let newY = prevY - e.clientY;

       rect1 = el1.getBoundingClientRect();

      el1.style.left = rect1.left - newX + "px";
      el1.style.top = rect1.top - newY + "px";

      prevX = e.clientX;
      prevY = e.clientY;
//a simple rectangle collision logic funcion
      if (rect1.left < rect2.left + rect2.weight &&
        rect1.left + rect1.weight > rect2.left &&
        rect1.top < rect2.top + rect2.height &&
        rect1.height + rect1.top > rect2.top)
        {
          item2.style.color="#FF0006";
        }
    
  }
//function which stops the mousedown event
  function mouseup() {
    window.removeEventListener("mousemove", mousemove);
    window.removeEventListener("mouseup", mouseup);
  }
}

I know that item1 require absolute position for draggable action

//CSS code
.item1{
    height:50px;
    width:50px;
    position:absolute;
    background:orange;
}

.item2{
    height:220px;
    width:220px;
    position:absolute;
    background:green;
    top:300px;
    left:500px;
    z-index:-2;
}
Solution 

  • //JAVASCRIPT code
const el1 = document.querySelector(".item1");
const el2 = document.querySelector(".item2");
var rect1,rect2;
rect2 = el2.getBoundingClientRect();
el1.addEventListener("mousedown", mousedown);

function mousedown(e) {
  window.addEventListener("mousemove", mousemove);
  window.addEventListener("mouseup", mouseup);

  let startX = e.clientX; // x cursor position
  let startY = e.clientY; //y cursor position
  const { left: rectX, top: rectY } = el1.getBoundingClientRect();

  function mousemove(e) {
      rect1 = el1.getBoundingClientRect();
      const diffX = e.clientX - startX;
      const diffY = e.clientY - startY;

       


      el1.style.left = (rectX + diffX) + "px";
      el1.style.top = (rectY + diffY) + "px";

// https://gamedev.stackexchange.com/questions/586/what-is-the-fastest-way-to-work-out-2d-bounding-box-intersection
// function IntersectRect(r1:Rectangle, r2:Rectangle):Boolean {
// return !(r2.left > r1.right
//    || r2.right < r1.left
//    || r2.top > r1.bottom
//    || r2.bottom < r1.top);
//   }
//a simple rectangle collision logic funcion
      if (rect1.left < rect2.left + rect2.width  &&
          rect1.left + rect1.width > rect2.left &&
          rect1.top < rect2.top + rect2.height &&
          rect1.top + rect1.height > rect2.top)
        {
          el2.style.background ="#FF0006";
        } else {
          el2.style.background ="black"; // put original color
        }
    
  }
//function which stops the mousedown event
  function mouseup() {
    window.removeEventListener("mousemove", mousemove);
    window.removeEventListener("mouseup", mouseup);
  }
}
    //CSS code
.body {
  position: relative;
}
.item1{
    height:50px;
    width:50px;
    position:absolute;
    background:orange;
}

.item2{
    height:120px;
    width:120px;
    position:absolute;
    background:green;
    top:300px;
    left:500px;
    z-index:-2;
}
    //HTML code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href = "stl.css" rel = "stylesheet" type = "text/css">
  
</head>
<body>
  <div class="item1"></div>
  <div class="item2"></div>
  <script src = "js.js" type = "text/javascript"></script>
</body>
</html>