Extra lives

page(Doc) not found /zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Win_the_game

这是Gamedev Phaser 教程 16 的第 13 步。你可以在Gamedev-Phaser-Content-Kit / demos / lesson13.html完成本课程后找到源代码。

我们可以通过增加生活使游戏更愉快。在这篇文章中，我们将实施一个生活系统，以便玩家可以继续玩，直到他们失去了三个生命，而不仅仅是一个人。

新变量

在代码中的现有添加下面添加以下新变量：

var lives = 3;
var livesText;
var lifeLostText;

这些分别将存储生命数，显示剩余生命数的文本标签，以及当玩家失去生命之后将在屏幕上显示的文本标签。

定义新的文本标签

定义文本看起来像我们已经在分数课上已经做的。scoreText在create()函数内的现有定义下方添加以下行：

livesText = game.add.text(game.world.width - 5, 5, "Lives: " + lives, {
  font: "18px Arial",
  fill: "#0095DD",
});
livesText.anchor.set(1, 0);
lifeLostText = game.add.text(
  game.world.width * 0.5,
  game.world.height * 0.5,
  "Life lost, click to continue",
  { font: "18px Arial", fill: "#0095DD" },
);
lifeLostText.anchor.set(0.5);
lifeLostText.visible = false;

在livesText与lifeLostText物体看起来非常相似的scoreText一个 - 它们定义在屏幕上的位置，显示实际文本和字体样式。前者被锚定在其右上边缘上，与屏幕正确对齐，后者位于中心位置，两者均使用anchor.set()。

该lifeLostText会表示，只有当生命消失，因此其知名度初始设置为false。

使我们的文字造型干燥

正如你可能已经注意到，我们使用相同的造型为三种文本：scoreText，livesText和lifeLostText。如果我们想要更改字体大小或颜色，我们必须在多个地方进行。为了使我们更容易维护，将来我们可以创建一个单独的变量来保存我们的样式，让我们textStyle将其调用并放在文本定义之前：

textStyle = { font: "18px Arial", fill: "#0095DD" };

现在我们可以在使用文本标签的时候使用这个变量 - 更新你的代码，使文本样式的多个实例被替换为变量：

scoreText = game.add.text(5, 5, "Points: 0", textStyle);
livesText = game.add.text(
  game.world.width - 5,
  5,
  "Lives: " + lives,
  textStyle,
);
livesText.anchor.set(1, 0);
lifeLostText = game.add.text(
  game.world.width * 0.5,
  game.world.height * 0.5,
  "Life lost, click to continue",
  textStyle,
);
lifeLostText.anchor.set(0.5);
lifeLostText.visible = false;

这样一来，改变一个变量中的字体将会将更改应用于每个使用的地方。

生活处理代码

为了在我们的游戏中实现生活，让我们先改变球对onOutOfBounds事件的影响。而不是执行匿名函数并立即显示警报：

ball.events.onOutOfBounds.add(function () {
  alert("Game over!");
  location.reload();
}, this);

我们将分配一个所谓的新功能ballLeaveScreen; 删除以前的事件处理程序（如上所示），并将其替换为以下行：

ball.events.onOutOfBounds.add(ballLeaveScreen, this);

我们想减少每次球离开帆布的人数。ballLeaveScreen()在代码末尾添加函数定义：

function ballLeaveScreen() {
  lives--;
  if (lives) {
    livesText.setText("Lives: " + lives);
    lifeLostText.visible = true;
    ball.reset(game.world.width * 0.5, game.world.height - 25);
    paddle.reset(game.world.width * 0.5, game.world.height - 5);
    game.input.onDown.addOnce(function () {
      lifeLostText.visible = false;
      ball.body.velocity.set(150, -150);
    }, this);
  } else {
    alert("You lost, game over!");
    location.reload();
  }
}

而不是立即打印警报，当你失去了一生，我们首先从当前的数字减去一个生命，并检查它是否是一个非零值。如果是，那么玩家还是有一些生命剩下，可以继续玩 - 他们会看到生命中的消息，球和桨的位置将被重置在屏幕上和下一个输入（点击或触摸），消息将被隐藏球将再次开始移动。

当可用生活数量达到零时，游戏结束，并显示游戏过期警报消息。

Extra lives

新变量

定义新的文本标签

使我们的文字造型干燥

生活处理代码

事件

比较你的代码

下一步