碰撞检测
这是 Gamedev Phaser 教程 16 个步骤中的第 10 步。接下来要处理的是球和砖块之间的碰撞检测。幸运的是,我们可以使用物理引擎来检查单个对象之间(例如球和球板)的碰撞,也可以检查一个对象与一组对象之间的碰撞。
砖块与球的碰撞检测
物理引擎让一切简单得多,我们只需添加两小段代码。首先,在 update() 方法中添加一行,用于检测球和砖块之间的碰撞,如下所示:
js
class ExampleScene extends Phaser.Scene {
// ...
update() {
this.physics.collide(this.ball, this.paddle);
this.physics.collide(this.ball, this.bricks, (ball, brick) =>
this.hitBrick(ball, brick),
);
this.paddle.x = this.input.x || this.scale.width * 0.5;
// ...
}
// ...
}
球的位置会与组中所有砖块的位置进行计算。第三个可选参数是在发生碰撞时执行的函数。Phaser 调用该函数时会传入两个参数:第一个是我们明确传给 collide 方法的球,第二个是 bricks 组中与球发生碰撞的那一块砖。这里我们在名为 hitBrick() 的方法中实现相应行为。在 ExampleScene 类的末尾、结束花括号 } 之前创建这个新方法,如下所示:
js
class ExampleScene extends Phaser.Scene {
// ...
hitBrick(ball, brick) {
brick.destroy();
}
}
就这样!重新加载代码,你应该会看到新的碰撞检测如预期般运行。
如果使用纯 JavaScript,你可能会以为需要自行编写更多计算代码来实现碰撞检测。这正是使用框架的好处:你可以把许多枯燥的代码交给 Phaser,专注于制作游戏中更有趣的部分。
比较你的代码
以下是你目前应该得到的结果,可以实时运行。若要查看其源代码,请点击“运行”按钮。
下一步
现在我们已经可以击中砖块并将其移除,这为游戏玩法增加了不错的内容。如果能统计被摧毁的砖块,并据此增加得分,就更好了。