Phaser-游戲之旅
雖然這個(gè)小游戲邏輯不是很復(fù)雜,但為了熟悉Phaser這個(gè)游戲框架的使用方法所以就選擇了它。
另外第一次在項(xiàng)目中嘗試使用ES6,之后利用babel進(jìn)行轉(zhuǎn)換。
自動(dòng)化構(gòu)建:gulp(其他文件復(fù)制和解析) + webpack(負(fù)責(zé)js的模塊打包) + browser-sync(實(shí)時(shí)預(yù)覽);
剛開始拿到項(xiàng)目的交互后,對游戲功能進(jìn)行了分析,然后將整個(gè)游戲大致分”游戲啟動(dòng)前、加載、游戲、結(jié)束“4個(gè)場景。確定場景后,考慮實(shí)現(xiàn)的方式。我選擇webpack + gulp來打包我的代碼,
我的工程目錄大致如下所示:
文件目錄如下:
.
├── src
│ ├── img //存放圖片資源 │ ├── js
│ │ ├── app //一些自己寫的庫 │ │ ├── lib //第三方庫 │ │ ├── prefabs //存放游戲元件 │ │ ├── states //存放游戲場景 │ │ │ ├── boot.js
│ │ │ ├── preload.js
│ │ │ ├── play.js
│ │ │ └── over.js
│ │ └── index.js //程序入口 │ ├── css
│ │ └── style.less
│ └── media //存放媒體文件 ├── index.html
├── gulpfile.js
└── webpack.config.js
程序入口
主要是利用es6的class創(chuàng)建一個(gè)游戲?qū)ο蟛⒗^承于Phaser.Game,然后將所有的場景添加到Phaser.state中。
class Game extends Phaser.Game { // 子類繼承父類Ph