圓和矩形的碰撞檢測

Question

我正在編寫一個游戲，該游戲涉及由用戶控制的運動圓和由計算機控制的運動矩形的碰撞。

完整的代碼可以在這里找到： 游戲

我在圓和矩形之間的碰撞檢測方面遇到麻煩。 當矩形是靜態的時，碰撞檢測可以完美地工作。 圓和矩形的邊緣在任意一側接觸時，程序將按照預期的方式運行。

但是，每當我進行矩形運動時，碰撞在矩形的右側都能很好地起作用，而在左側卻不能。

我可以使用數字來使其在左側但不能在右側工作，但是，我無法使其在兩側都能正常工作。 我缺少一個簡單的解決方法嗎？

我附了幾張照片來說明我的意思。

這是碰撞檢測功能。

function collisionDetection(player,rect) {
  var distX = Math.abs(player.x - player.dx - rect.x - rect.w/2);
  var distY = Math.abs(player.y - rect.y - rect.h/2);

  if (distX >= (rect.w / 2 + player.r - player.dx)) {
    return false;
  }
  if (distY > (rect.h / 2 + player.r)) {
    return false;
  }

  if (distX <= rect.w/2) {
    return true;
  }
  if (distY <= rect.h/2) {
    return true;
  }
}

if(collisionDetection(player,rect)) {
  alert("You Lose");
  document.location.reload();
}

謝謝

Answer 1

您的碰撞功能有一些小故障。

這是檢測矩形與圓形碰撞的工作代碼：

function collisionDetection(player,rect){
    var distX = Math.abs(circle.x - rect.x - rect.w/2);
    var distY = Math.abs(circle.y - rect.y - rect.h/2);

    if (distX > (rect.w/2 + circle.r)) { return false; }
    if (distY > (rect.h/2 + circle.r)) { return false; }

    if (distX <= (rect.w/2)) { return true; } 
    if (distY <= (rect.h/2)) { return true; }

    // also test for corner collisions
    var dx=distX-rect.w/2;
    var dy=distY-rect.h/2;
    return (dx*dx+dy*dy<=(circle.r*circle.r));
}

Answer 2

您不應使用寬度超過2的高度和高度超過2的高度。

您應該檢查player.x和player.y是否在矩形+半徑內。 本質上是將矩形的所有邊擴大半徑。

rect.y + rect.h + player.r
rect.x + rect.w + player.r
rect.x - player.r
rect.y - player.r

如果玩家的位置在新的放大區域內，則發生碰撞。

if(player.x > (rect.x - player.r) and player.x < (rect.x + rect.w + player.r) and player.y >  (rect.y - player.r) and player.y < rect.y + rect.h + player.r)
return true;