在 JavaScript 中的吃豆人游戏中实现碰撞检测

Question

我正在使用 JavaScript 构建一个简单的吃豆人游戏。该游戏的特色是吃豆人在迷宫中导航、收集点（点）并躲避幽灵。吃豆人使用箭头键移动，游戏会在收集点时更新分数。

我在实施碰撞检测时遇到困难：

1. 检测吃豆人何时接触幽灵（游戏结束）。
2. 检测吃豆人何时收集点（分数更新且点消失）。

我尝试过的事情

1. 对于点碰撞检测： 我尝试使用 getBoundingClientRect() 检查吃豆人的位置是否与点的位置匹配：

const pacmanRect = pacman.getBoundingClientRect();
const dotRect = document.getElementById('dot1').getBoundingClientRect();

if (
  pacmanRect.left < dotRect.right &&
  pacmanRect.right > dotRect.left &&
  pacmanRect.top < dotRect.bottom &&
  pacmanRect.bottom > dotRect.top
) {
  console.log('Dot collected!');
}

但是，这仅有时有效，并且当吃豆人快速移动时并不一致。

2. 对于幽灵碰撞检测： 我尝试了类似的方法，但游戏无法可靠地检测碰撞。

其他尝试：

使用

setInterval

定期检查是否有碰撞。 减小边界框的大小以获得更好的准确性。

预期行为

1. 当吃豆人与一个点碰撞时，该点应该消失，并且分数应该更新。
2. 当吃豆人与幽灵碰撞时，游戏应显示“游戏结束”消息。

Answer 1

如果所有吃豆人都在点的右侧，则不能重叠。

这可以通过以下方式测试：pacmanRect.left > dotRect.right

同样，如果所有吃豆人都位于点的左侧、点的上方或点的下方，则不能有重叠。

因此，您想要测试它是在右侧还是在左侧或在上方还是在下方。

如果是，则不存在重叠。

const pacmanRect = pacman.getBoundingClientRect();
const dotRect = document.getElementById('dot1').getBoundingClientRect();

if !(
  pacmanRect.left > dotRect.right ||
  pacmanRect.right < dotRect.left ||
  pacmanRect.top > dotRect.bottom ||
  pacmanRect.bottom < dotRect.top
) {
  console.log('Dot collected!');
 }

Answer 2

为了让你的代码正常工作，pacman 必须小于点 然后准确地排列在它上面。

如果更改测试逻辑以确保 pacman 位于点的矩形之外， 然后否定比较，然后两个对象之间有任意数量的重叠 将被视为碰撞。

if (
  !(pacmanRect.left > dotRect.right &&
  pacmanRect.right  < dotRect.left &&
  pacmanRect.top    > dotRect.bottom &&
  pacmanRect.bottom < dotRect.top)
) {
  console.log('Dot collected!');
}