前言
phaser是一個非常好用的html5游戲開發(fā)框架，官網(wǎng)上是這樣介紹的：“一個快速、免費并且完全開源的框架织盼，提供Canvas和WebGL兩種渲染方式，致力于增強桌面端與移動端瀏覽器游戲的體驗”酱塔。使用的過程中，個人確實感覺它的方便與易用性危虱，能夠快速實現(xiàn)自己的游戲想法羊娃。
目標
為了學習phaser框架，開發(fā)了一款簡單的平臺跳躍游戲埃跷。學習了如何在phaser中使用場景（State）,精靈（Sprite）,游戲輸入（Input）以及碰撞檢測蕊玷，算是簡單的入門而已。這個框架還有更多精彩出眾的地方弥雹，等著我去發(fā)掘垃帅。主要的學習手段是參閱框架API文檔，不得不說phaser的API文檔寫得很贊剪勿，結(jié)構(gòu)清晰贸诚，內(nèi)容完整準確，讓初學者能夠快速上手。
開始
一切的一切酱固，從一個platformer目錄開始械念。platformer目錄包含一個index.html入口文件以及img和js文件夾。html文件很簡單运悲，只是標準的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>標簽上面崖媚。首先來構(gòu)建當前的游戲世界亦歉，并直接進入主要場景（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>標簽的id屬性呵恢，本游戲渲染模式使用Phaser.AUTO，也就是自動檢測媚创，在瀏覽器支持WebGL的時候使用WebGL渲染渗钉，不支持的時候回退到Canvas渲染。id參數(shù)傳入""是讓框架在<body>中生成<canvas>標簽钞钙。如果需要在特定的<div>標簽內(nèi)生成鳄橘，首先應(yīng)該在html文件中添加帶id屬性的<div>標簽，然后傳入id屬性即可芒炼。Phaser.Game返回一個游戲?qū)ο筇绷@是整個游戲的核心，通過這個游戲?qū)ο螅ㄓ萌肿兞?code>game引用）本刽，就可以快速使用phaser提供的各種方法來開發(fā)html5游戲了鲸湃。
Phaser.State用來創(chuàng)建游戲場景赠涮。從名稱上來說state應(yīng)該譯為狀態(tài)，但我覺得稱為場景更加妥當唤锉。因為Phaser.State中提供的各個方法搭起了一個腳手架世囊，用來展現(xiàn)當前游戲畫面。本游戲用到了init方法窿祥，preload方法株憾，create方法和update方法，分別管理當前場景的初始化晒衩、預(yù)加載嗤瞎、生成游戲?qū)ο笠约案掠螒蜓h(huán)。通過擴展這些方法听系，就可以實現(xiàn)精彩紛呈的各種游戲了贝奇。
擴展游戲場景
- 初始化方法：啟動物理引擎（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)方法：通過方向鍵控制主角左右移動和跳躍，當主角撞到障礙時滚朵，游戲重新開始冤灾，撞到獎勵時，銷毀獎勵物品始绍。
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;
}
- 其余方法：重新開始以及銷毀獎勵物品瞳购。獎勵物品同地面類似，是用組來管理的亏推，因此默認擁有
kill方法來銷毀自身学赛。
main.restart = function(){ game.state.start('Main'); }
main.getCoin = function(player, coin){ coin.kill(); }
鏈接
后記
這個游戲雖然簡單，但是涉及到了開發(fā)一個html5小游戲的各個方面吞杭。游戲開發(fā)是一條很長遠的路盏浇，其中每一點都可以進行深入地研究和擴展。就此游戲而言芽狗，可以加入記分系統(tǒng)绢掰，更改地面及墻壁障礙的位置來生成關(guān)卡，還可以給主角添加動畫效果童擎，加入音效提升游戲體驗等等滴劲。這些都是要慢慢擴展出來的。想法是要實現(xiàn)出來的顾复。在實現(xiàn)的過程中班挖，有時會觸發(fā)更多靈感，但更多的是向現(xiàn)實妥協(xié)芯砸，舍棄掉一些東西萧芙，然而這樣才是真正的成長给梅。
