Question

我正在使用画布开发一个非常简单的JS游戏，但是我很难实现得分检测的碰撞检测。

该游戏为接球游戏，因此，每当屏幕底部的玩家控制的方块碰到一个落球之一时，得分计数应更新一个。我一直在网上寻找许多不同的方法来做到这一点，但到目前为止还没有运气。

游戏具有三个不同的对象，球，玩家和得分，每个对象都有其自己的绘制和更新功能。我一直在尝试通过将碰撞检测放到Score的更新功能中来实现碰撞检测，但无济于事。

您将如何去做？

代码如下：

(df1.merge(df2, on='id', how='left', indicator=True)
    .query('_merge == "left_only"'))

Answer 1

您可能希望在可以访问所有可碰撞对象的主循环中的某个位置进行碰撞检测。假设只有球和球员发生碰撞，那么在有球的循环中是个不错的选择。根据所需的碰撞类型，创建一个将球对象拿来与球员进行比较的函数。最简单的命中检测是基于每个对象的大小/半径的简单距离，但是还存在其他更高级的方法。

// Animate
function animate() {
  requestAnimationFrame(animate);
  c.clearRect(0, 0, canvas.width, canvas.height);

  for (i = 0; i < balls.length; i++) {
    balls[i].update();
    if (detectHit(ball[i], player)) {
      // hit was detected, do stuff
    }
  }

  player.update();
  score.update();
}

function detectHit(ball, player) {
  const ballRadius = ball.radius;
  const ballCenter = {x: ball.x, y: ball.y};
  
  const playerRadius = Math.min(player.pWidth, player.pHeight);
  const playerCenter = {
    x: player.x + player.pWidth / 2,
    y: player.y + player.pHeight / 2
  };
  
  // distance = sqr((x1 - x2)^2 + (y1 - y2)^2)
  const distanceSqrd = (ballCenter.x - playerCenter.x) ** 2 + (ballCenter.y - playerCenter.y) ** 2;
  const radiusDistanceSqrd = (ballRadius + playerRadius) ** 2;
  
  /*
    Instead of getting the square root, save a complex 
    calculation by comparing the squared distances directly
  */
  return distanceSqrd <= radiusDistanceSqrd;
}

const balls = [
  {
    x: 10,
    y: 10,
    radius: 5
  },
  {
    x: 50,
    y: 10,
    radius: 5
  },
];

const player = {
  x: 20,
  y: 10,
  pWidth: 15,
  pHeight: 15,
};

balls.forEach(ball => console.log('Hit detected: ', detectHit(ball, player)));

实现碰撞检测以在javascript“ catch”游戏中得分

1 个答案: