圆和矩形的碰撞检测

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

你的碰撞功能有一些小问题。

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

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;