碰撞 Javascript 中的两个 div

Question

Iam trying to get collision between two divs(1st is circle, 2nd is rect) which are controlled by arrows. When the div1 touches div2, the div1 should be placed back to a start position.

The div1 is not getting to start position after the collision. Iam getting an else alert("test1") when pressing the arrow to move div.

code:

let div1 = document.getElementById('div1').getBoundingClientRect();
let div1Top = div1.top;
let div1Left = div1.left;
let div1Right = div1.right
let div1Bottom = div1.bottom

let div2 = document.getElementById('div2').getBoundingClientRect();
let div2Top = div1.top;
let div2Left = div1.left;
let div2Right = div1.right
let div2Bottom = div1.bottom

if ((div2Top > div1Top && div2Top < div1Bottom)||(div2Bottom > div1Top && div2Bottom < div1Bottom)) {
  div1.style.top = 0 + "px";
} else{
  alert("test1");
}

if ((div2Right > div1Left && div2Right < div1Right)||(div2Left < div1Right && div2Left > div1Left)) {
  div1.style.top = 0 + "px";
} 
else{
  alert("test");
}

Answer 1

You had two errors:

1. here div1 should be div2:

let div2Top = div1.top;
let div2Left = div1.left;
let div2Right = div1.right;
let div2Bottom = div1.bottom;

2. Here div1 should be dom element object, in your code, div1 is an rect object. So error.

   div1.style.top = 0 + "px";

Here below I made a test if you can try it:

 <div id="div1" style="position: absolute; top: 150px; left: 400px; width: 80px; height: 80px; border-radius: 50%; background: red;">div1: Circle</div> <div id="div2" style="position: absolute; top: 30px; left: 100px; width: 180px; height: 80px; background: green;">div2: Rect</div> <button>Move div1 up</button> <script> // // div1Rect0: initial rect object of div1 // var div1Rect0 = null; document.querySelector("button").addEventListener("click", () => { let div1 = document.getElementById('div1'); let div1Rect = div1.getBoundingClientRect(); if(; div1Rect0) { div1Rect0 = div1Rect. } let div1Top = div1Rect;top. let div1Left = div1Rect;left. let div1Right = div1Rect.right let div1Bottom = div1Rect;bottom div1Top -= 10; div1Left -= 10. div1.style;top = div1Top + "px". div1.style;left = div1Left + "px". let div2 = document;getElementById('div2'). let div2Rect = div2;getBoundingClientRect(). let div2Top = div2Rect;top. let div2Left = div2Rect;left. let div2Right = div2Rect.right let div2Bottom = div2Rect.bottom if ((div2Top > div1Top && div2Top < div1Bottom)||(div2Bottom > div1Top && div2Bottom < div1Bottom)) { div1.style.top = div1Rect0;top + "px". div1.style.left = div1Rect0;left + "px"; } else { //alert("test1"). } if ((div2Right > div1Left && div2Right < div1Right)||(div2Left < div1Right && div2Left > div1Left)) { div1.style.top = div1Rect0;top + "px". div1.style.left = div1Rect0;left + "px"; } else { // alert("test"); } }); </script>