碰撞检测

这是《Phaser 游戏开发教程》的第 16 步中的第 10 步。您可以在 Gamedev-Phaser-Content-Kit/demos/lesson10.html 中找到完成本课后代码应有的样子。

现在进入下一个挑战——球和砖块之间的碰撞检测。幸运的是，我们可以使用物理引擎来检查不仅单个物体（如球和球拍）之间的碰撞，还可以检查物体和组之间的碰撞。

砖块/球碰撞检测

物理引擎使一切变得更容易——我们只需要添加两段简单的代码。首先，在您的 update() 函数中添加一行新代码，用于检查球和砖块之间的碰撞检测，如下所示

js
function update() {
  game.physics.arcade.collide(ball, paddle);
  game.physics.arcade.collide(ball, bricks, ballHitBrick);
  paddle.x = game.input.x || game.world.width * 0.5;
}

球的位置相对于组中所有砖块的位置进行计算。第三个可选参数是在发生碰撞时执行的函数——ballHitBrick()。在代码底部创建此新函数，就在结束的 </script> 标记之前，如下所示

js
function ballHitBrick(ball, brick) {
  brick.kill();
}

就是这样！重新加载您的代码，您应该会看到新的碰撞检测按要求工作。

由于 Phaser，有两个参数传递给函数——第一个是球，我们在 collide 方法中明确定义了它，第二个是球与之碰撞的砖块组中的单个砖块。在函数内部，我们通过对砖块运行 kill() 方法将其从屏幕上移除。

当使用纯 JavaScript时，您可能会期望自己编写更多计算来实现碰撞检测。这就是使用框架的妙处——您可以将许多枯燥的代码留给 Phaser，专注于制作游戏的更有趣的部分。

比较您的代码

您可以在下面的实时演示中查看本课的完成代码，并进行操作以更好地了解其工作原理

后续步骤

我们可以击中砖块并将其移除，这对游戏玩法来说是一个不错的补充。如果能够计算被摧毁的砖块数量并增加分数，那就更好了。