Phaser制作h5小游戏（一）

如果你是一名游戏新手，并且刚接触游戏引擎的话，个人推荐使用Phaser游戏引擎框架，因为它较简单，易上手，容易懂。先献上开发参考文档：

1. api文档（强烈推荐）
2. 官网

虽然有中文版的文档，但是翻译的真心不好，开发中，只要看好api文档，结合官网的例子，就很好开发了。

准备工作

1. 运行phaser小游戏需要web服务器环境，官网中有提到安装web服务器环境，如果你是一名前端攻城狮，你也可以自己用gulp或者webpack开发工具搭一个web服务器环境。我已写好一套小游戏开发框架放在github上，github地址。
2. 把代码拉下来运行后，就可以开始正式开发了。

开发过程

1. 设置画布

//在html中定义画布将加载在那个dom元素上
<div id='main'></div>
//创建一个游戏对象
let game = new Phaser.Game(config.DesignSize.width, config.DesignSize.height, Phaser.CANVAS, 'main')

代码中设置画布的大小是987 * 1280，本来是按照720 * 1280尺寸设置的，但是为了适应不用的屏幕，需要将宽设置大一些，满足在每个移动设备中高撑满，宽自适应的效果，所以设计稿中的背景图的宽也需要长些。再根据每个设置月画布大小的比例，算出游戏需要向左偏移的距离left。

2. 添加场景：

//添加场景
game.state.add('boot', Boot)
game.state.add('preload', Preload)
game.state.add('play', Play)

3. 开始运行场景

//开始“boot”场景
Game.state.start('boot')

一共有3个场景

states  //游戏场景
├── boot.js //启动场景 
├── play.js //游戏逻辑处理场景
└── preload.js //预加载场景

每个场景都有自己的生命周期，常用的生命周期是init（初始化），preload（加载）、create（准备就绪）、update（更新周期）、render（渲染完成）

init - 初始化数据定义，最开始执行。
preload - 尽管我们有预加载的场景，但如果你希望能缩短进入页面时加载的时间，可以分摊一些到其他场景，只需要在其他场景加入preload方法即可。
create - 如果存在preload方法，则会在加载完毕后执行此方法；否则将在进入该场景时直接执行此方法。
update - 更新周期自动执行的方法，例如在play场景的update方法中可以去检测两个物体是否有接触。
render - 渲染完毕后执行的方法，例如可以在此方法中勾勒出物体的边缘，来方便观察物体的碰撞区域。

每个场景执行都有先后顺序，如果前一个场景执行完后，就可以启动下一个场景。
定义好每个场景后，就可以开始写游戏逻辑了。此处就不展开具体的游戏写法，下一篇将具体讲一下游戏开发中总结的精华（Phaser制作h5小游戏（二））。