javascript - 弹跳球在碰撞时错过了一些平台

Question

我正在尝试创建一个类似于 Doodle Jump 的演示游戏，但我陷入了最愚蠢的情况。在检查碰撞时，我的弹跳球只是错过了一些平台（掉落）。

有什么想法吗？Codepen 跟随寻求帮助。

我已经尝试对数组中的平台进行排序（认为这是错误），当然无济于事。

这是我展示案例的 codepen 示例。 https://codepen.io/v4vaios/pen/ZEzpozg

    checkPlatformCollision(platforms) {
    if (goingDown) {

      for(let j=0; j<platforms.length; j++) {
        let distX = Math.abs(this.x - platforms[j].x-platformWidth/2);
        let distY = Math.abs(this.y - platforms[j].y-platformHeight/2);
        let dx=distX-platformWidth/2;
        let dy=distY-platformHeight;

        if (dx*dx + dy*dy <= (this.r*this.r)) {
          return true
        }


      }
    }

    return false
  }

标签： javascripthtml5-canvas

Answer 1

你在那里犯了几个缺陷：

1. 当球向上时，您的碰撞检测器不起作用（无需检查if (goingDown)），因为在球向任何方向移动时都可能发生碰撞。

2. 第二个缺陷是您正在测量从球中心到矩形中心的距离。当球与矩形的远端发生碰撞时，您将不会检测到碰撞。像这样：

dist <= r为 FALSE，因此未检测到碰撞

您需要计算圆心到矩形上最近点的距离，如下所示：

当球到达矩形时，dist <= r 将为 TRUE。

在修复这些缺陷的同时，我们得到了这样的碰撞检测功能：

checkPlatformCollision(platforms) {

      for(let j=0; j<platforms.length; j++) {
      let NearestX = Math.max(platforms[j].x, Math.min(this.x, platforms[j].x + platformWidth));
      let NearestY = Math.max(platforms[j].y, Math.min(this.y, platforms[j].y + platformHeight));

        let dx = Math.abs(this.x - NearestX);
        let dy = Math.abs(this.y - NearestY);

        if (dx*dx + dy*dy <= (this.r*this.r)) {
          return true;
        }

       }

      return false;

  }