Javascript 圆与矩形的碰撞检测

我正在编写一个游戏，其中包括一个由用户控制的移动圆圈和一个由计算机控制的移动矩形的碰撞

完整代码可在此处找到：

我在圆和矩形之间的碰撞检测方面遇到问题。当矩形是静态的时，碰撞检测可以完美地工作。当圆形和矩形的边接触到任意一侧时，程序将按预期方式运行

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

我可以使用数字使其在左侧工作，但不能在右侧工作，然而，我无法使其在两侧都正确工作。有没有一个简单的修复我错过了

我附上了一些照片来说明我的意思

这是碰撞检测功能

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

函数冲突检测（播放器、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）；
如果（distX>=（rect.w/2+player.r-player.dx））{
返回false；
}
if（distY>（矩形h/2+player.r））{
返回false；
}
如果（distX您不应该使用宽度大于2和高度大于2

你应该检查播放器的大小。x和播放器。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;

if（player.x>（rect.x-player.r）和player.x<（rect.x+rect.w+player.r）和player.y>（rect.y-player.r）和player.y
您的碰撞功能有一些小故障

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

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

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

函数冲突检测（播放器、rect）{
var distX=Math.abs（circle.x-rect.x-rect.w/2）；
var distY=Math.abs（circle.y-rect.y-rect.h/2）；
如果（distX>（rect.w/2+circle.r））{return false；}
如果（distY>（rect.h/2+circle.r））{return false；}
if（distX）我实际上在这个游戏中使用了上一篇博文中的代码。我真的很感激。尽管有了上面的代码，我仍然在右侧有一个小间隙，圆圈与左侧的矩形有点重叠。这是由rect.dx值引起的吗？很高兴你发现（两篇！）博文都很有用。：-）是的，间距是由drawRect:（
rect.x+=rect.dx；
）中的rect递增引起的。您可能希望将绘图代码与定位代码完全分离，以避免这些意外故障。-）好的，是的。我刚刚在绘图（）中添加了矩形的移动代码功能和碰撞非常完美。再次感谢您真的帮助了我！：）的可能副本