圆形和矩形的碰撞检测

Question

我正在编写一个游戏，该游戏涉及用户控制的移动圆圈与计算机控制的移动矩形的碰撞。

可在此处找到完整代码：Game

我在检测圆形和矩形之间的碰撞时遇到问题。当矩形静止时，碰撞检测工作完美。当圆形和矩形的边缘接触任何一侧时，程序将按照预期的方式运行。

但是，每当我给矩形运动时，碰撞在矩形的右侧工作正常，但在左侧却不行。

我可以玩数字让它在左边工作但不能在右边工作，但是，我无法让它在两边都正确工作。有没有我遗漏的简单修复方法？

我附上了几张照片来说明我的意思。

这是碰撞检测功能。

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

您不应使用超过 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;

Answer 2

你的碰撞函数有一些小问题。

下面是检测矩形与圆形碰撞的工作代码：

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));
}

圆形和矩形的碰撞检测

Collision Detection of Circle and Rectangle

javascript

collision-detection

html5-canvas