不同大小的圓的碰撞

我正面臨兩種不同大小的圓圈碰撞問題，但我不明白我到底做錯了什么。

現在作為參考，我發布了相同圓圈大小的代碼，您可以運行并測驗它的作業正常。

但是當您從 css (440px) 更改 circle2 的大小時，碰撞將不再起作用。

如果有人可以幫助我解決這個問題，期待幫助。

const circle1 = document.getElementById('circle1');
const circle2 = document.getElementById('circle2');
const square1 = document.getElementById('square1');

const circle1_w = circle1.offsetWidth / 2;
const circle1_h = circle1.offsetHeight / 2;

const circle2_w = circle2.offsetWidth / 2;
const circle2_h = circle2.offsetHeight / 2;

const square_w = square1.offsetWidth / 2;
const square_h = square1.offsetHeight / 2;

document.addEventListener('mousemove', (e) => {
  circle2.style.left = e.clientX - circle2_w   'px';
  circle2.style.top = e.clientY - circle2_h   'px';
  square1.style.left = e.clientX - square_w   'px';
  square1.style.top = e.clientY - square_h   'px';
  collideCircle();
});

console.log(circle2);

function collideCircle() {
  var circle1Bounding = circle1.getBoundingClientRect();
  var circle2Bounding = circle2.getBoundingClientRect();

  const circle1_x = circle1Bounding.x;
  const circle1_y = circle1Bounding.y;

  const circle2_x = circle2Bounding.x;
  const circle2_y = circle2Bounding.y;

  /* first we get the x and y distance between the two circles. */
  let distance_x = circle1_x - circle2_x;
  let distance_y = circle1_y - circle2_y;

  /* Then we get the sum of their radii. */
  let radii_sum = circle1_w   circle2_w;

  let sideA = Math.abs(circle1_y - circle2_y);
  let sideB = Math.abs(circle1_x - circle2_x);
  let distance = Math.sqrt(Math.pow(sideA, 2)   Math.pow(sideB, 2));
  if (distance <= (circle1Bounding.width   circle2Bounding.width) / 2) {
    circle1.innerHTML = 'Collision occured';
    circle1.style.backgroundColor = 'pink';
  } else {
    circle1.innerHTML = '';
    circle1.style.backgroundColor = 'yellow';
  }
}

body {
  margin: 0;
  padding: 0;
}

#circle1 {
  width: 110px;
  height: 110px;
  position: absolute;
  left: 50vw;
  top: 50vh;
  background-color: rgb(255, 233, 36);
  border-radius: 50%;
}

#circle2 {
  position: absolute;
  width: 110px;
  height: 110px;
  background-color: rgb(255, 80, 80);
  font-size: 1.5em;
  z-index: 1;
  border-radius: 50%;
}

#square1 {
  position: absolute;
  width: 110px;
  height: 110px;
  background-color: transparent;
  border: 1px solid blue;
  font-size: 1.5em;
  z-index: 1;
}

<div id="circle1"></div>
<div id="circle2"></div>
<div id="square1"></div>

知道我到底做錯了什么嗎？

uj5u.com熱心網友回復：

對于圓形碰撞檢測，您需要測量它們的中心點之間的距離，并查看該距離是否小于圓形半徑的總和。

getBoundingClientRect回傳一個矩形，其X, Y值表示左上角。您的錯誤是使用該值繼續計算。

我更新了您的代碼，因此circle1_x（以及 y，對于圓 1 和 2）說明圓的中心位置相對于邊界矩形的角。

此外，假設它們是圓形而不是橢圓形，您可以獲取寬度并忽略高度來確定半徑。我更新了您的代碼以分別為每個圓圈派生circle1_r而circle2_r不是 h/w。

const circle1 = document.getElementById('circle1');
const circle2 = document.getElementById('circle2');
const square1 = document.getElementById('square1');

// assume circle H=W and just get its radius
const circle1_r = circle1.offsetWidth / 2;
const circle2_r = circle2.offsetWidth / 2;

const square_w = square1.offsetWidth / 2;
const square_h = square1.offsetHeight / 2;

document.addEventListener('mousemove', (e) => {
  circle2.style.left = e.clientX - circle2_r   'px';
  circle2.style.top = e.clientY - circle2_r   'px';
  square1.style.left = e.clientX - square_w   'px';
  square1.style.top = e.clientY - square_h   'px';
  collideCircle();
});

console.log(circle2);

function collideCircle() {
  var circle1Bounding = circle1.getBoundingClientRect();
  var circle2Bounding = circle2.getBoundingClientRect();

  // get *center* position for circles
  const circle1_x = circle1Bounding.x   circle1_r;
  const circle1_y = circle1Bounding.y   circle1_r;

  const circle2_x = circle2Bounding.x   circle2_r;
  const circle2_y = circle2Bounding.y   circle2_r;

  /* first we get the x and y distance between the two circles. */
  let distance_x = circle1_x - circle2_x;
  let distance_y = circle1_y - circle2_y;

  /* Then we get the sum of their radii. */
  let radii_sum = circle1_r   circle2_r;

  let sideA = Math.abs(circle1_y - circle2_y);
  let sideB = Math.abs(circle1_x - circle2_x);
  let distance = Math.sqrt(Math.pow(sideA, 2)   Math.pow(sideB, 2));
  if (distance <= (circle1Bounding.width   circle2Bounding.width) / 2) {
    circle1.innerHTML = 'Collision occured';
    circle1.style.backgroundColor = 'pink';
  } else {
    circle1.innerHTML = '';
    circle1.style.backgroundColor = 'yellow';
  }
}

body {
  margin: 0;
  padding: 0;
}

#circle1 {
  width: 210px;
  height: 210px;
  position: absolute;
  left: 50vw;
  top: 50vh;
  background-color: rgb(255, 233, 36);
  border-radius: 50%;
}

#circle2 {
  position: absolute;
  width: 110px;
  height: 110px;
  background-color: rgb(255, 80, 80);
  font-size: 1.5em;
  z-index: 1;
  border-radius: 50%;
}

#square1 {
  position: absolute;
  width: 110px;
  height: 110px;
  background-color: transparent;
  border: 1px solid blue;
  font-size: 1.5em;
  z-index: 1;
}

<div id="circle1"></div>
<div id="circle2"></div>
<div id="square1"></div>

標籤：javascript html5-画布 游戏物理 画布

上一篇：檢查物件是否包含React測驗庫中的鏈接

下一篇：將文本從表單選擇選項傳遞到文本輸入欄位