在Javascript中碰撞两个div答案

【问题标题】：Collision two divs in Javascript在Javascript中碰撞两个div
【发布时间】：2021-02-10 19:30:12
【问题描述】：

我试图在由箭头控制的两个 div（第一个是圆形，第二个是矩形）之间发生碰撞。当 div1 碰到 div2 时，div1 应该被放回起始位置。

碰撞后 div1 没有到达起始位置。按下箭头移动 div 时，我收到 else alert("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");
}

【问题讨论】：

标签： javascript collision

【解决方案1】：

你有两个错误：

这里 div1 应该是 div2：

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

这里的 div1 应该是 dom 元素对象，在你的代码中， div1 是一个 rect 对象。所以错误。

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>

【讨论】：