摘要：回顧上一節(jié)我們完成了游戲核心場景的大部分工作，能操控主角，能隨機掉落蘋果了。于是我們修改之前的方法，也就是接到蘋果后的方法。接到炸彈后結(jié)束和蘋果掉地上的調(diào)用方式是一樣的。

上一節(jié)我們完成了游戲核心場景play的大部分工作，能操控主角，能隨機掉落蘋果了。那么這一節(jié)我們來完成游戲剩余的部分，主要是計算分數(shù)、如何結(jié)束游戲等等。

第一步：接住蘋果得分

主角加入物理運動

檢測接觸事件

接到蘋果后，讓蘋果消失，并加分

對主角的修改：

game.physics.enable(man); // 加入物理運動
man.body.allowGravity = false; // 清除重力影響

檢測接觸事件要寫在play場景的update生命周期內(nèi)，意思為每次更新視圖都會去檢測主角和蘋果是否有接觸，有的話，則執(zhí)行pickApple方法。

this.update = function() {
    // 監(jiān)聽接觸事件
    game.physics.arcade.overlap(man, apples, pickApple, null, this);
}

接觸事件則非常簡單，調(diào)用apple的kill方法，則可以讓蘋果從場景中清除。同時，我們更新一下分數(shù)。

// 接觸事件
function pickApple(man, apple) {
    apple.kill();
    title.text = ++score;
}

示例代碼：https://jsfiddle.net/Vincent_...

第二步：蘋果掉地上，游戲結(jié)束

檢測蘋果與場景邊緣的接觸

一旦接觸，則游戲結(jié)束，跳轉(zhuǎn)到結(jié)束場景

布置結(jié)束場景，并顯示分數(shù)

為結(jié)束場景添加點擊事件，點擊后再玩一次

onWorldBounds屬性可設(shè)置為一個Phaser.Signal對象，當(dāng)開啟了collideWorldBounds并且接觸到場景邊緣時，將觸發(fā)Signal的事件。另外，這個特殊的Signal提供了上下左右四個值來讓我們判斷物體到底接觸的是哪條邊，考慮到有些蘋果會接觸到左右兩邊，我們只在和下邊界接觸的時候才結(jié)束游戲。

// 設(shè)置蘋果與游戲邊緣碰撞，
apple.body.collideWorldBounds = true;
apple.body.onWorldBounds = new Phaser.Signal();
apple.body.onWorldBounds.add(function(apple, up, down, left, right) {
    if (down) {
        apple.kill();
        game.state.start("over", true, false, score);
    }
});

布置結(jié)束場景，和之前布置其他場景一樣，添加背景、文本等等。不同的是這次多了init這個生命周期，主要是由于在play場景中跳轉(zhuǎn)到這個場景時會帶上score，這個score會傳入init這個生命周期的方法中。

// 結(jié)束場景
over: function() {
    var score = 0;
    this.init = function() {
        score = arguments[0];
    }
    this.create = function() {
        // 添加背景
        var bg = game.add.image(0, 0, "bg");
        bg.width = game.world.width;
        bg.height = game.world.height;
        // 添加文本
        var title = game.add.text(game.world.centerX, game.world.height * 0.25, "游戲結(jié)束", {
            fontSize: "40px",
            fontWeight: "bold",
            fill: "#f2bb15"
        });
        title.anchor.setTo(0.5, 0.5);
        var scoreStr = "你的得分是："+score+"分";
        var scoreText = game.add.text(game.world.centerX, game.world.height * 0.4, scoreStr, {
            fontSize: "30px",
            fontWeight: "bold",
            fill: "#f2bb15"
        });
        scoreText.anchor.setTo(0.5, 0.5);
    }
}

最后我們在結(jié)束場景添加一個點擊事件，點擊后跳轉(zhuǎn)到play場景，再玩一次。

var remind = game.add.text(game.world.centerX, game.world.height * 0.6, "點擊任意位置再玩一次", {
    fontSize: "20px",
    fontWeight: "bold",
    fill: "#f2bb15"
});
remind.anchor.setTo(0.5, 0.5);
// 添加點擊事件
game.input.onTap.add(function() {
    game.state.start("play");
});

示例代碼：https://jsfiddle.net/Vincent_...

第三步：添加得分效果

為不同蘋果設(shè)置不同的得分

接到蘋果時添加對應(yīng)的得分圖片到場景中

為得分圖片添加過渡效果

先來介紹一下Phaser的過渡：

要使用過渡，首先要創(chuàng)建過渡對象，傳入的是要應(yīng)用過渡效果的對象，例如apple。

// 創(chuàng)建過渡對象
game.add.tween(obj);

然后使用得最多的是Tween的to方法，也就是過渡到指定狀態(tài)的方法。可以指定過渡時間曲線，延遲、是否重復(fù)、過渡時間等等參數(shù)，使用Tween已經(jīng)可以實現(xiàn)大部分的動畫效果。

于是我們修改之前的pickApple方法，也就是接到蘋果后的方法。

function pickApple(man, apple) {
    var point = 1;
    var img = "one";
    if (apple.type === "red") {
        point = 3;
        img = "three";
    } else if (apple.type === "yellow") {
        point = 5;
        img = "five";
    }
    // 添加得分圖片
    var goal = game.add.image(apple.x, apple.y, img);
    var goalImg = game.cache.getImage(img);
    goal.width = apple.width;
    goal.height = goal.width / (goalImg.width / goalImg.height);
    goal.alpha = 0;
    // 添加過渡效果
    var showTween = game.add.tween(goal).to({
        alpha: 1,
        y: goal.y - 20
    }, 100, Phaser.Easing.Linear.None, true, 0, 0, false);
    showTween.onComplete.add(function() {
        var hideTween = game.add.tween(goal).to({
            alpha: 0,
            y: goal.y - 20
        }, 100, Phaser.Easing.Linear.None, true, 200, 0, false);
        hideTween.onComplete.add(function() {
            goal.kill();
        });
    });
    // 更新分數(shù)
    score += point;
    title.text = score;
    // 清除蘋果
    apple.kill();
}

示例代碼：https://jsfiddle.net/Vincent_...

第四步：加入炸彈，豐富音效

隨機掉落炸彈

加入接到蘋果或炸彈的音效

接到炸彈后游戲結(jié)束

要想隨機掉落炸彈非常簡單，只需要在之前的appleTypes里面加入bomb即可，同時如果有其他東西（例如梨子）要加入的話也可以這樣。

var appleTypes = ["green", "red", "yellow", "bomb"];

同時，由于我們不接炸彈，因此炸彈掉到地上也不會導(dǎo)致游戲結(jié)束，因此修改一下代碼：

apple.body.onWorldBounds.add(function(apple, up, down, left, right) {
    if (down) {
        apple.kill();
        if (apple.type !== "bomb") game.state.start("over", true, false, score);
    }
});

接到蘋果和炸彈時播放音效，這個很簡單，直接調(diào)用音頻對象的play方法即可。接到炸彈后結(jié)束和蘋果掉地上的調(diào)用方式是一樣的。我們繼續(xù)來修改pickApple方法：

function pickApple(man, apple) {
    if (apple.type === "bomb") {
        // 播放音效
        bombMusic.play();
        game.state.start("over", true, false, score);
    } else {
        var point = 1;
        var img = "one";
        if (apple.type === "red") {
            point = 3;
            img = "three";
        } else if (apple.type === "yellow") {
            point = 5;
            img = "five";
        }
        // 添加得分圖片
        var goal = game.add.image(apple.x, apple.y, img);
        var goalImg = game.cache.getImage(img);
        goal.width = apple.width;
        goal.height = goal.width / (goalImg.width / goalImg.height);
        goal.alpha = 0;
        // 添加過渡效果
        var showTween = game.add.tween(goal).to({
            alpha: 1,
            y: goal.y - 20
        }, 100, Phaser.Easing.Linear.None, true, 0, 0, false);
        showTween.onComplete.add(function() {
            var hideTween = game.add.tween(goal).to({
                alpha: 0,
                y: goal.y - 20
            }, 100, Phaser.Easing.Linear.None, true, 200, 0, false);
            hideTween.onComplete.add(function() {
                goal.kill();
            });
        });
        // 更新分數(shù)
        score += point;
        title.text = score;
        // 清除蘋果
        apple.kill();
        // 播放音效
        scoreMusic.play();
    }
}

示例代碼：https://jsfiddle.net/Vincent_...

游戲終于完成了它的邏輯，算是一個完整的游戲了。當(dāng)然了，效果遠未達到理想，要說的話，游戲水非常深，這個系列的教程只是從零到一，引導(dǎo)大家接觸并上手Phaser.js。

這里可以拋出一些優(yōu)化的方向，大家也可以當(dāng)做Phaser的練習(xí)題目去做：

游戲中字體的更換

地面應(yīng)該和小恐龍底部持平，而非屏幕底部，如何實現(xiàn)？

現(xiàn)在三種蘋果和炸彈的出現(xiàn)概率是隨機的，如何調(diào)整它們各自的出現(xiàn)概率？

現(xiàn)在蘋果和炸彈出現(xiàn)的時間間隔是固定的，如何隨著游戲進行加快節(jié)奏？

如何調(diào)整游戲難度梯度？

現(xiàn)在炸彈和蘋果有可能會相鄰出現(xiàn)，導(dǎo)致很難接到蘋果而不碰到炸彈，如何避免？

……

本來沒想寫這么多點的，一不小心。可見游戲優(yōu)化的空間還是很大的，希望大家能繼續(xù)發(fā)掘Phaser.js的潛力，做出更多的優(yōu)秀的小游戲~

Github地址：https://github.com/VincentPat...

掃描下面二維碼的話也可以用手機查看效果了：

回顧：

Chapter 1 - 認識Phaser.js

Chapter 2 - 搭建游戲的骨架

Chapter 3 - 加載游戲資源

Chapter 4 - 游戲即將開始

如果接下來有時間整理的話，會補充一篇Phaser.js的實戰(zhàn)技巧和注意事項。本系列文章寫作純粹個人喜好，如有寫得不嚴謹或不正確的地方，還請多多包涵。第一次花這么長時間寫技術(shù)分享，還是用那句話勉勵自己：

希望我是真的喜歡編程，由始至終。

如果你喜歡這幾篇文章，或者說從零到一這個系列，給我點個贊，我就心滿意足了。