如何失败
为了提供失败机制,我们将禁用球与屏幕底部边缘的碰撞。在 create() 方法最顶部添加以下代码:
js
this.physics.world.checkCollision.down = false;
这会让三面墙(顶部、左侧和右侧)将球弹回,但第四面墙(底部)会消失,如果板子没有接住球,球就会掉出屏幕。我们需要一种方法来检测这种情况并采取相应的操作。在 update() 方法的底部添加以下几行:
js
const ballIsOutOfBounds = !Phaser.Geom.Rectangle.Overlaps(
this.physics.world.bounds,
this.ball.getBounds(),
);
if (ballIsOutOfBounds) {
// 游戏结束逻辑
alert("游戏结束!");
location.reload();
}
添加这些代码行后,将检查球是否越过了世界(在我们的示例中是画布)的边界,然后显示警告。当你点击出现的警告框时,页面会重新加载,让你可以再次游玩。
比较你的代码
这是到目前为止你应该得到的实时运行效果。要查看其源代码,请点击“运行”按钮。
下一步
现在基本玩法已经就位,让我们通过引入可击碎的砖块来让游戏更有趣——是时候构建砖块区域了。