前言
phaser是一個非常好用的html5游戲開發(fā)框架，官網(wǎng)上是這樣介紹的：“一個快速、免費(fèi)并且完全開源的框架，提供Canvas和WebGL兩種渲染方式，致力于增強(qiáng)桌面端與移動端瀏覽器游戲的體驗”。使用的過程中，個人確實感覺它的方便與易用性，能夠快速實現(xiàn)自己的游戲想法。
目標(biāo)
為了學(xué)習(xí)phaser框架，開發(fā)了一款簡單的平臺跳躍游戲。學(xué)習(xí)了如何在phaser中使用場景（State）,精靈（Sprite）,游戲輸入（Input）以及碰撞檢測，算是簡單的入門而已。這個框架還有更多精彩出眾的地方，等著我去發(fā)掘。主要的學(xué)習(xí)手段是參閱框架API文檔，不得不說phaser的API文檔寫得很贊，結(jié)構(gòu)清晰，內(nèi)容完整準(zhǔn)確，讓初學(xué)者能夠快速上手。
開始
一切的一切，從一個platformer目錄開始。platformer目錄包含一個index.html入口文件以及img和js文件夾。html文件很簡單，只是標(biāo)準(zhǔn)的html5文件結(jié)構(gòu)，里面引用了js文件夾中phaser.min.js游戲框架文件和main.js游戲邏輯文件。需要注意的是在html文件中要注意js的引用的順序，main.js會使用phaser.min.js提供的Phaser全局變量，所以要先引用phaser.min.js文件，接著引用main.js文件，否則會報錯。img文件中是游戲的資源文件，一張白色的方塊圖片，在游戲中會被渲染成不同的顏色，表示不同的游戲?qū)ο蟆?/p>
構(gòu)建游戲世界
html5游戲，世界都構(gòu)建在<canvas>標(biāo)簽上面。首先來構(gòu)建當(dāng)前的游戲世界，并直接進(jìn)入主要場景（Main State）。游戲很簡單，所以只有一個主場景，如果開發(fā)復(fù)雜一些的游戲，就要考慮到場景的管理與切換了（從開始場景到游戲場景再到結(jié)束場景等等）。
var game = new Phaser.Game(600, 250 , Phaser.AUTO,"");
var main = new Phaser.State();
game.state.add('Main', main);
game.state.start('Main');
Phaser.Game用來構(gòu)建游戲世界，接受的參數(shù)依次是游戲世界的寬、高、渲染模式和<canvas>標(biāo)簽的id屬性，本游戲渲染模式使用Phaser.AUTO，也就是自動檢測，在瀏覽器支持WebGL的時候使用WebGL渲染，不支持的時候回退到Canvas渲染。id參數(shù)傳入""是讓框架在<body>中生成<canvas>標(biāo)簽。如果需要在特定的<div>標(biāo)簽內(nèi)生成，首先應(yīng)該在html文件中添加帶id屬性的<div>標(biāo)簽，然后傳入id屬性即可。Phaser.Game返回一個游戲?qū)ο螅@是整個游戲的核心，通過這個游戲?qū)ο螅ㄓ萌肿兞?code>game引用），就可以快速使用phaser提供的各種方法來開發(fā)html5游戲了。
Phaser.State用來創(chuàng)建游戲場景。從名稱上來說state應(yīng)該譯為狀態(tài)，但我覺得稱為場景更加妥當(dāng)。因為Phaser.State中提供的各個方法搭起了一個腳手架，用來展現(xiàn)當(dāng)前游戲畫面。本游戲用到了init方法，preload方法，create方法和update方法，分別管理當(dāng)前場景的初始化、預(yù)加載、生成游戲?qū)ο笠约案掠螒蜓h(huán)。通過擴(kuò)展這些方法，就可以實現(xiàn)精彩紛呈的各種游戲了。
擴(kuò)展游戲場景
- 初始化方法：啟動物理引擎（ARCADE），這是Phaser框架自帶的最簡單的物理引擎，用于矩形盒的碰撞檢測，適于本游戲，設(shè)定游戲的背景顏色。
main.init = function(){
game.physics.startSystem(Phaser.Physics.ARCADE);
game.world.enableBody = true;
game.stage.backgroundColor = "#489ad8";
}
- 預(yù)加載方法：加載本游戲唯一的一張圖片資源，關(guān)鍵在于設(shè)定每張圖片的唯一id，便于在整個游戲中引用。主要用到
game.load加載器，用來加載游戲中需要的各種資源，用音樂，圖片，精靈圖，JSON配置文件等等。
game.load.image('box', 'img/box.png');
- 生成游戲?qū)ο蠓椒ǎ禾砑幼笥覊Ρ冢孛嬉约爸鹘恰ⅹ剟钜约罢系K物。代碼展示如何生成地面，里面用到了phaser中組（Group）的概念。用于管理相同的、游戲中大量出現(xiàn)的游戲?qū)ο螅ū热缱訌棥⒌谰叩龋绕鹩醚h(huán)來增刪對象，使用組更加有效率，性能更高，實現(xiàn)了緩沖池的功能）。向游戲中添加游戲?qū)ο笾饕玫?code>game.add方法，用來快速將對象加入到游戲舞臺上，如精靈，文字，聲音等。然后開啟地面圖片的碰撞屬性，設(shè)置
body.immovable=true，防止主角從上方掉下時，將地面也砸下去。主角、獎勵和障礙物生成代碼類似，不再贅述。最后生成游戲控制按鍵（鍵盤中的上、下、左、右方向鍵）。
main.create = function(){
this.walls = game.add.group();
...
//ground
for(var i=1; i<13; i++){
var wall = game.add.sprite(30*i, 90, 'box','', this.walls);
wall.scale.setTo(0.6, 0.6);
}
...
this.walls.x = 90;
this.walls.y = game.world.centerY-60;
this.walls.setAll('tint', 0x1a5882);
this.walls.forEach(game.physics.enable, game.physics);
this.walls.setAll('body.immovable', true);
...
this.cursor = game.input.keyboard.createCursorKeys();
}
- 更新循環(huán)方法：通過方向鍵控制主角左右移動和跳躍，當(dāng)主角撞到障礙時，游戲重新開始，撞到獎勵時，銷毀獎勵物品。
main.update = function(){
...
game.physics.arcade.overlap(this.player, this.lava, this.restart, null, this);
...
if (this.cursor.left.isDown)
this.player.body.velocity.x = -200;
...
if (this.cursor.up.isDown && this.player.body.touching.down)
this.player.body.velocity.y = -250;
}
- 其余方法：重新開始以及銷毀獎勵物品。獎勵物品同地面類似，是用組來管理的，因此默認(rèn)擁有
kill方法來銷毀自身。
main.restart = function(){ game.state.start('Main'); }
main.getCoin = function(player, coin){ coin.kill(); }
鏈接
后記
這個游戲雖然簡單，但是涉及到了開發(fā)一個html5小游戲的各個方面。游戲開發(fā)是一條很長遠(yuǎn)的路，其中每一點(diǎn)都可以進(jìn)行深入地研究和擴(kuò)展。就此游戲而言，可以加入記分系統(tǒng)，更改地面及墻壁障礙的位置來生成關(guān)卡，還可以給主角添加動畫效果，加入音效提升游戲體驗等等。這些都是要慢慢擴(kuò)展出來的。想法是要實現(xiàn)出來的。在實現(xiàn)的過程中，有時會觸發(fā)更多靈感，但更多的是向現(xiàn)實妥協(xié)，舍棄掉一些東西，然而這樣才是真正的成長。
