摘要：經(jīng)過這一節(jié)，萬事俱備只欠東風(fēng)，下一節(jié)我們就來完成這個游戲的剩余邏輯，比如接蘋果加分，接到炸彈或蘋果掉到地上游戲結(jié)束，還有加入更豐富的音效。

上一節(jié)我們介紹了加載場景，并利用加載好的資源，豐富了開始界面?，F(xiàn)在點擊屏幕后仍是一片黑暗，那么，這一節(jié)我們就來完成游戲最核心的場景——play。我們要做的是一個接蘋果的游戲，為此我們會加入物理引擎，會使用一些過渡動畫以及監(jiān)聽觸摸事件等等。

幾乎每一個游戲框架都必須具備一個甚至多個物理引擎供開發(fā)使用，使用物理引擎可以實現(xiàn)例如碰撞、加減速運動、摩擦力等效果。Phaser非常人性化，提供了3個物理引擎供開發(fā)者使用，每個引擎各有自己的特點。下面來簡單介紹一下：

Arcade

最簡單快速的物理引擎，因為只支持AABB式的碰撞，計算速度最快，實現(xiàn)簡單的物理碰撞、接觸、重力等效果最佳。

關(guān)于AABB下面有幾個鏈接可以讓你去理解，全稱是Axis-Aligned Bounding Box，直譯就是軸對稱盒。例如一張星星的圖片，盡管邊上很多透明的部分，但如果使用AABB來計算碰撞的話，則會用一個矩形將星星框住，這樣計算起來非常方便，但精度就比較低。如此一來我們也可以想到，用Arcade構(gòu)建的body是不可以發(fā)生形變的。

相關(guān)概念：

What is AABB - Collision detection?

AABB盒

包圍盒算法

P2

如果說Arcade是小而精，P2引擎則是大而全了。各種物理模型均可實現(xiàn)，諸如多邊形、彈簧、摩擦力、碰撞物體的材質(zhì)、反彈系數(shù)等等都可以實現(xiàn)。盡管在性能上有一定消耗，畢竟要做更多復(fù)雜的運算，但為了效果，我們也很常用P2，作者引進P2也是由于它的全面。

Ninja

至于Ninja，則是比較專注精確的多種模式的碰撞檢測。例如凹凸面的碰撞、平面和球的碰撞等等。平常比較少用，有興趣的可以查看官方示例，另外，作者給出引進Ninja的理由是：

It"s a really nice little physics system, supporting AABB and Circle vs. Tile collision, with lots of defs for sloping, convex and concave tile types. But that"s all it does, it"s not trying to be anything more really.

Stack Exchange - Game Development上關(guān)于Phaser三個引擎的介紹
Difference between Arcade, P2 and Ninja physics in Phaser
Phaser作者寫的，關(guān)于物理引擎的介紹：
Explaining Phaser 2"s multiple physics systems

Box2D

咦？為什么沒有上面沒有提到Box2D？很遺憾，這個引擎是收費的，40刀，如果沒有特別大的需求，估計也用不上。

附上：非常有趣的官方示例，車掉坑里就爬不起來了。

第一步：先布置好場景

添加背景

添加主角

添加分數(shù)

播放背景音樂

背景音樂的使用：

// 創(chuàng)建背景音樂實例
var bgMusic = game.add.audio("bgMusic");
// 循環(huán)播放
bgMusic.loopFull();

注意：

場景的布置和開始場景差不多，在開始場景中我們添加了背景音樂。會有人問，為什么不進入游戲就自動播放，是因為移動端的瀏覽器，必須要用戶操作才能播放音頻。

Safari HTML5 Audio and Video Guide
Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS—the user always initiates playback.

另外可參考：

segmentfault上的討論：HTML5的audio標簽設(shè)置了autoplay屬性在手機端出現(xiàn)的問題

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

第二步：讓你的主角動起來

監(jiān)聽滑動事件

移動主角位置

主要使用的就是input的addMoveCallback方法：

// 監(jiān)聽滑動事件
game.input.addMoveCallback(function(pointer, x, y, isTap) {
    if (!isTap) man.x = x;
});

第四個參數(shù)非常有用，可以判斷是否為點擊事件，如果是點擊就不移動主角。

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

就這么簡單？NO,NO,NO

很快你就會發(fā)覺在PC上主角一直跟著鼠標移動，根本無法停下來！

其實原因也很簡單，在PC端，Phaser的move事件對應(yīng)的是mousemove；在移動端，對應(yīng)的是touchmove。這兩個事件有什么區(qū)別？主要區(qū)別就是touchmove必須手指觸摸屏幕并滑動才會觸發(fā)，而mousemove則不需要點住鼠標，只需要移動鼠標就會觸發(fā)。

于是，我們來修改一下代碼：

// 是否正在觸摸
var touching = false;
// 監(jiān)聽按下事件
game.input.onDown.add(function() {
    touching = true;
});
// 監(jiān)聽離開事件
game.input.onUp.add(function() {
    touching = false;
});
// 監(jiān)聽滑動事件
game.input.addMoveCallback(function(pointer, x, y, isTap) {
    if (!isTap && touching) man.x = x;
});

Good！加入了觸摸標記以后，我們監(jiān)聽了按下和離開事件，在PC端和移動端的表現(xiàn)一致了！

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

這樣算完事了？NO,NO,NO

細心的你多測試了幾下，這時候發(fā)現(xiàn)了一個非常詭異的情況，當開始點擊的時候，不是點在主角身上，主角就會瞬移過去！不難理解，因為我們是直接設(shè)置主角的x坐標，等于觸摸位置的x坐標的。如果開始時x坐標不在主角身上，就會在一瞬間移動到手指的位置。

于是，我們又來修改一下代碼，非常簡單的一個方法：

// 監(jiān)聽按下事件
game.input.onDown.add(function(pointer) {
    // 要判斷是否點住主角，避免瞬移
    if (Math.abs(pointer.x - man.x) < man.width / 2) touching = true;
});

上述代碼的意思就是，開始觸摸的位置必須在主角的最左邊到最右邊的x坐標范圍內(nèi)，才算作開始觸摸，否則不算。

Excellent！現(xiàn)在可以隨心所欲地操控你的主角了！

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

第三步：讓蘋果掉下來吧

先來創(chuàng)造幾個蘋果看看

這里用到了Phaser的group，實際上可以理解成是一個數(shù)組，只不過更形象，組的常用方法：

add/addChild/addChildAt - 創(chuàng)建成員

countDead/countLiving - 統(tǒng)計成員

forEach/forEachAlive/forEachDead - 遍歷成員

remove/removeAll/removeChildAt - 刪除成員

create - 創(chuàng)建成員

bringToTop - 整個組的元素的圖層提到最上層

另外組本身也有x,y等屬性，也就是說，整個組的成員都可以根據(jù)組的偏移值而一起偏移！另外組還提供了很多豐富的方法，活用組可以達到事半功倍的效果。

// 添加蘋果組
var apples = game.add.group();
var green = apples.create(50, 0, "green");
var red = apples.create(150, 0, "red");
var yellow = apples.create(250, 0, "yellow");

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

定時隨機創(chuàng)造蘋果

上面我們看到有三種蘋果，那么下面我們來實現(xiàn)：每隔一段時間，隨機創(chuàng)建三種蘋果中的一種，并且擺放到不同的位置。

為此我們用到Phaser的timer，用于創(chuàng)建定時任務(wù)。會有人問為什么不用setInterval，setTimeout這些，是因為Phaser只要焦點離開了頁面，就會自動暫停游戲，包括定時任務(wù)也會暫停，而setInterval和setTimeout則不會。

一般會用到add和loop兩個方法，分別對應(yīng)setTimeout和setInterval：

我們修改一下代碼：

// 添加蘋果組
var apples = game.add.group();
// 蘋果類型
var appleTypes = ["green", "red", "yellow"];
var appleTimer = game.time.create(true);
appleTimer.loop(1000, function() {
    var x = Math.random() * game.world.width;
    var y = Math.random() * game.world.height;
    var type = appleTypes[Math.floor(Math.random() * appleTypes.length)];
    apples.create(x, y, type);
});
appleTimer.start();

現(xiàn)在每隔1秒就會在屏幕隨機位置出現(xiàn)一個蘋果了，而且種類是隨機的。

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

最后，我們讓蘋果掉下來

這里就要使用到物理引擎了，考慮到接蘋果的游戲?qū)ε鲎簿纫蟛皇呛芨?，我們選擇使用Arcade，也就是Phaser默認的物理引擎。

關(guān)鍵代碼：

// 開啟物理引擎
game.physics.startSystem(Phaser.Physics.Arcade);
game.physics.arcade.gravity.y = 300;

// 設(shè)置蘋果加入物理運動
game.physics.enable(apple);

于是，我們繼續(xù)修改上面的代碼：

// 添加蘋果組
var apples = game.add.group();
// 蘋果類型
var appleTypes = ["green", "red", "yellow"];
var appleTimer = game.time.create(true);
appleTimer.loop(1000, function() {
    var x = Math.random() * game.world.width;
    var type = appleTypes[Math.floor(Math.random() * appleTypes.length)];
    var apple = apples.create(x, 0, type);
    // 設(shè)置蘋果大小
    var appleImg = game.cache.getImage(type);
    apple.width = game.world.width / 8;
    apple.height = apple.width / appleImg.width * appleImg.height;
    // 設(shè)置蘋果加入物理運動
    game.physics.enable(apple);
});
appleTimer.start();
// 開啟物理引擎
game.physics.startSystem(Phaser.Physics.Arcade);
game.physics.arcade.gravity.y = 300;

Perfect！現(xiàn)在滿天蘋果都會有了重力，加速掉向地上了。

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

這一節(jié)內(nèi)容比較多，我們首先布置了游戲場景，加入了背景音樂。然后實現(xiàn)了對主角的操作，最后實現(xiàn)了蘋果的隨機掉落。經(jīng)過這一節(jié)，萬事俱備只欠東風(fēng)，下一節(jié)我們就來完成這個游戲的剩余邏輯，比如接蘋果加分，接到炸彈或蘋果掉到地上游戲結(jié)束，還有加入更豐富的音效。

游戲截圖：

回顧：

Chapter 1 - 認識Phaser.js

Chapter 2 - 搭建游戲的骨架

Chapter 3 - 加載游戲資源

下一節(jié)：Chapter 5 - 游戲大功告成