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
        
		

網(wǎng)友評論