昨天我們完成了我們的主角～今天來幫遊戲增加得分機制跟障礙吧：）

得分星星

在場景內增加星星來讓主角獲取分數，有一整排星星送給他 XD

// 創建星星物件的 group
stars = this.physics.add.group({
    key: "star",
    repeat: 11,    // 創建 group 時會先幫你新增一個物件，所以總共會有 1+11 個星星
    setXY: { x: 12, y: 0, stepX: 70 }    // 以 (12,0) 座標放置第一顆星，每 70px 增加 x 放下一顆星
});

stars.children.iterate(function (child) {
    // 設定反彈值，給予 0.4 ~ 0.8 之間的反彈值，完全反彈的值為 1，完全不反彈的值為 01
    child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
});

再為我們的星星加上碰撞的監聽，不然星星會離開螢幕唷！

this.physics.add.collider(stars, platforms);

再來製作我們主角吃到星星的得分機制，首先要確認主角跟星星是否重疊了，我們就讓星星消失，像是主角吃到了星星的感覺。

// 偵聽主角跟星星是否疊在一起了，如果疊在一起了，就執行 collectStar
this.physics.add.overlap(player, stars, collectStar, null, this);

function collectStar (player, star)
{
    // 讓星星消失在場景內
    star.disableBody(true, true);
}

再來加上分數的計算，也把分數家當場景內供使用者觀看。

// 在場景上增加score的文字
scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

讓吃到星星後增加分數，並更改畫面設數字。

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

現在我們就可以來獲得星星得到分數囉～！

石頭障礙

是不是覺得有點輕鬆呀！讓我們來增加一些障礙來增加遊戲難度吧！
先把識透物件加入我們的場景，並且幫他加上與地形跟主角的物理碰撞，以及碰撞到石頭後的事件。

// 創建 bombs 物件
bombs = this.physics.add.group();
// 加上與地形的物理碰撞
this.physics.add.collider(bombs, platforms);
// 加上與主角的物理碰撞
this.physics.add.collider(player, bombs, hitBomb, null, this);

function hitBomb (player, bomb)
{
    this.physics.pause();     // 停止所有的物理特性

    player.setTint(0xff0000);    // 將主角反紅

    player.anims.play('turn');       // 並且轉向正面
}

再加上產生石頭障礙的機制，在一排星星都被吃完之後會產生一顆石頭，並且從新產生新的一排星星，這樣一直循環下去，直到主角被石頭砸到為止。

if (stars.countActive(true) === 0) // 星星被吃完的時候
    {   // 把星星從新增加回來
        stars.children.iterate(function (child) {

            child.enableBody(true, child.x, 0, true, true);

        });
        // 主角在左半邊，則將石頭產生在右半邊，主角在右半邊則反之，以免造成被秒殺的情況
        var x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400);
        // 增加石頭到場景內
        var bomb = bombs.create(x, 16, 'bomb');
        bomb.setBounce(1); // 設定反彈係數
        bomb.setCollideWorldBounds(true); // 是否撞到邊界
        bomb.setVelocity(Phaser.Math.Between(-200, 200), 20); // x速度介於 -200 ~ 200 之間，y 速度為 20
    }

總結

我們的第一個小遊戲就這樣結束囉～暖身正式結束～明天開始實作我們的童年小遊戲囉！let's go.

tags: Phaser Game 2020鐵人賽