1. 程式人生 > >Phaser3入門教程:第一個Phaser3遊戲(中文版)(九)

Phaser3入門教程:第一個Phaser3遊戲(中文版)(九)

  • 記分牌

遊戲還有兩個要點需完成:會幹掉玩家的敵人,以及顯示玩家抓到星星的分數牌子。我們先來完成記分牌。

我們需要製作一個文字物件。為此,我們建立了兩個變數,一個用來計分,另一個是分數的文字內容:

var score = 0;

var scoreText;

scoreText在create函式中設定:

scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

16,16是文字顯示的座標。‘score:0’是初始顯示的內容,後面的物件定義了文字的大小和顏色。這裡不設定字型,我們使用Phaser預設的Courier字型。

下一步我們要修改collectStar函式,讓玩家在抓到星星後加分,並顯示實時的分數。程式碼更新如下:

function collectStar (player, star)

{

    star.disableBody(true, true);

    score += 10;

    scoreText.setText('Score: ' + score);

}

每拿到一個星星會加10分,並更新記分牌scoreText的內容。執行part9.html可看到計分效果:

在最後一節,我們還會加入敵人的部分。