更新球在每一帧中的位置
还记得 update() 方法及其定义吗?其中的代码会在每一帧执行,因此非常适合放置用于更新球在屏幕上位置的代码。请在 update() 中添加以下新行:
js
class ExampleScene extends Phaser.Scene {
// ...
update() {
this.ball.x += 1;
this.ball.y += 1;
}
}
上面的代码会在每一帧中,将表示球在画布上坐标的 x 和 y 属性各加 1。重新加载 index.html,你应该会看到球在屏幕上滚动。
比较你的代码
以下是到目前为止你应该得到的可运行实时代码。要查看它的源代码,请点击“运行”按钮。
下一步
下一步是添加一些基本的碰撞检测,让我们的球可以从墙壁反弹。这会需要几行代码——比我们目前看到的步骤复杂得多,尤其是在还想加入挡板和砖块碰撞的情况下。不过幸运的是,相比使用纯 JavaScript,Phaser 可以让我们更轻松地完成这些工作。
无论如何,在做这些事情之前,我们会先介绍 Phaser 的物理引擎,并完成一些设置工作。