MDN will be in maintenance mode on Wednesday September 20th, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

翻译正在进行中。

这是Gamedev Phaser教程 16 第11步您可以在Gamedev-Phaser-Content-Kit / demos / lesson11.html完成本课程后找到源代码

得分也可以使游戏更有趣 - 你可以尝试击败自己的高分,或者你的朋友。在这篇文章中,我们将为我们的游戏添加一个评分系统。

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

新变量

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

// ...
var scoreText;
var score = 0;

将得分文字添加到游戏显示

现在在create()函数末尾添加这一行

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

text()方法可以采用四个参数:

  • x和y坐标来绘制文本。
  • 将呈现的实际文本。
  • 用于呈现文本的字体样式。

最后一个参数与CSS样式非常相似。在我们的例子中,乐谱文字将为蓝色,大小为18像素,并使用Arial字体。

当砖块被破坏时更新分数

每当球击中砖块时,我们将增加点数,更新scoreText显示当前得分。这可以使用setText()方法 - 添加以下两行新ballHitBrick()功能:

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

这是现在 - 重新加载你的,index.html并检查得分更新每个砖击。

比较你的代码

您可以在下面的现场演示中查看本课程的完成代码,并使用它来更好地了解它的工作原理:

下一步

我们现在有一个得分系统,但是如果你不能赢得,那么玩和保持分数是多少?让我们看看我们如何能够增加胜利的状态,让我们赢得比赛

文档标签和贡献者

 此页面的贡献者: j787701730
 最后编辑者: j787701730,