碰撞 Javascript 中的两个 div

Question

我试图在由箭头控制的两个 div（第一个是圆形，第二个是矩形）之间发生碰撞。 当 div1 接触到 div2 时，应将 div1 放回起点 position。

碰撞后 div1 无法启动 position。 按下箭头移动 div 时，我收到一个 else 警报（“test1”）。

代码：

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

你有两个错误：

1. 这里 div1 应该是 div2：

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

2. 这里 div1 应该是 dom 元素 object，在您的代码中，div1 是一个 rect object。 所以错误。

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

下面我做了一个测试，如果你可以试试：

 <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>