分数

这是 Gamedev Phaser 教程 的 16 个步骤中的第 11 步。您可以在 Gamedev-Phaser-Content-Kit/demos/lesson11.html 找到完成本节后代码应有的样子。

拥有分数也可以使游戏更有趣——您可以尝试打破自己的最高分，或者打破朋友的最高分。在本节中，我们将为游戏添加一个计分系统。

我们将使用一个单独的变量来存储分数，并使用 Phaser 的 text() 方法将其打印到屏幕上。

新变量

在之前定义的变量之后添加两个新变量

js
// …
let scoreText;
let score = 0;

将分数文本添加到游戏显示

现在在 create() 函数的末尾添加这行代码

js
scoreText = game.add.text(5, 5, "Points: 0", {
  font: "18px Arial",
  fill: "#0095DD",
});

text() 方法可以接受四个参数

  • 绘制文本的 x 和 y 坐标。
  • 将要渲染的实际文本。
  • 用于渲染文本的字体样式。

最后一个参数看起来非常像 CSS 样式。在本例中，分数文本将为蓝色，大小为 18 像素，并使用 Arial 字体。

销毁砖块时更新分数

每次球击中砖块时，我们将增加点数，并更新 scoreText 以显示当前分数。这可以通过使用 setText() 方法来完成——将下面的两行新代码添加到 ballHitBrick() 函数中

js
function ballHitBrick(ball, brick) {
  brick.kill();
  score += 10;
  scoreText.setText(`Points: ${score}`);
}

暂时就这些——重新加载您的 index.html，并检查分数是否在每次击中砖块时更新。

比较您的代码

您可以在下面的实时演示中查看本节的完成代码，并使用它来更好地了解它的工作原理

后续步骤

我们现在有一个计分系统，但是如果你不能赢，玩游戏和保持分数有什么意义呢？让我们看看如何添加胜利状态，允许我们赢得游戏。