在前面的一篇文章中，我基本介紹了一下PhaserJs這個HTML 2D游戲開發(fā)框架，說基本介紹，其實(shí)真的很簡單，因?yàn)轫?xiàng)目需要，當(dāng)時就在網(wǎng)上搜集了一下適用于移動端Html游戲的框架，就找到了PhaserJs，現(xiàn)學(xué)現(xiàn)用，整個游戲做的很粗糙，而且還存在遺留的問題。這次根據(jù)游戲內(nèi)容詳細(xì)介紹一下用PhaserJs框架做游戲的整個流程。

（一）游戲概括：

針對手機(jī)微信端的網(wǎng)頁游戲，兩種顏色的細(xì)菌（紅色和綠色）從頂端下落，左右兩個大炮分別發(fā)射綠色子彈和紅色子彈，分屏處理，點(diǎn)擊屏幕左側(cè)，發(fā)射綠色子彈攻擊綠色細(xì)菌，點(diǎn)擊屏幕右側(cè)，發(fā)射紅色子彈攻擊紅色細(xì)菌，根據(jù)擊中的個數(shù)和積累的分值來判斷是否勝利。

設(shè)計(jì)圖

（二）PhaserJs運(yùn)行機(jī)制

? 創(chuàng)建游戲，即游戲的實(shí)例化（new Phaser.Game(w,h,renderer,parent,sate)）

? 創(chuàng)建游戲的場景，即實(shí)例化游戲中的state（場景：指游戲中的不同界面和內(nèi)容，場景能把復(fù)雜的游戲分為很多小塊，從而簡化游戲的開發(fā)）

? 創(chuàng)建場景對象Phaser.State的兩種形式：函數(shù)形式和對象形式

（三）游戲開發(fā)

1：游戲的實(shí)例化

實(shí)例化 game

游戲頁面是跑在手機(jī)瀏覽器上面的，要針對手機(jī)做適配，game的width和height即是游戲背景圖片的大小。

2：場景中的init

一些場景的初始化代碼可以寫在init function里面，如游戲的縮放控制，這也是上一次我的遺留問題。

手機(jī)適配

Phaser.ScaleManager，縮放管理對象，通過它我們能對游戲進(jìn)行縮放，從而達(dá)到適配屏幕的目的。主要的縮放模式有三種：

（1）EXACT_FIT：縮放到游戲的父元素大小，即存放游戲容器的大小，會把game進(jìn)行拉伸，寬高比會發(fā)生變化。

（2）SHOW_ALL：保持游戲?qū)捀弑鹊幕A(chǔ)上把游戲縮放到它的父元素所能容納的最大空間。

（3）USER_SCALE：自定義縮放，可以手動指定游戲的縮放比例。

TIP：以下代碼可以使game在父元素中居中顯示

3，場景中的preload

加載資源的代碼和資源加載事件的處理可以放在preload中，如圖片、精靈、圖形、文本、瓦片精靈、按鈕、粒子......

PhaserJs中的游戲資源的加載使用的是Phaser.Loader對象。

資源加載

資源加載事件處理

TIP：雪碧圖（sprite）可以通過TexturePacker來制作。

4：場景中的create

create方法在preload方法里面的資源都已經(jīng)加載完成后才會執(zhí)行。創(chuàng)建顯示對象的代碼寫在create里面。

顯示對象列表

示例

game.add是對當(dāng)前游戲的GameObjectFactory（游戲工廠對象）示例的快捷使用，GameObjectFactory可以幫助我們快速的創(chuàng)建顯示對象以及一些重要的非顯示對象。

5：場景中的update

在update 中更新顯示對象的屬性。如：使用Arcade物理引擎進(jìn)行碰撞檢測。在本次游戲中，update里面處理了子彈的生成、子彈的發(fā)射、子彈與細(xì)菌間以及細(xì)菌與山的碰撞檢測。

Arcade物理引擎只支持矩形與矩形之間的碰撞。

示例

6：場景中的render

實(shí)時顯示游戲分?jǐn)?shù)和擊中細(xì)菌的個數(shù)

（三）游戲截圖

PS：本次游戲中包含了圖片、文本、音頻、sprite的加載和創(chuàng)建顯示，sprite的補(bǔ)間動畫和逐幀動畫、粒子發(fā)射器的創(chuàng)建，Arcade物理引擎的使用等。因版權(quán)問題，無法提供源碼，如果感興趣的，可以私信交流。想了解更多關(guān)于Phaser的知識，也可以去Phaser小站、Phaser官網(wǎng)。