Phaser是一款专门用于桌面及移动HTML5 2D游戏开发的开源免费框架，提供JavaScript和TypeScript双重支持，内置游戏对象的物理属性，采用Pixi.js引擎以加快Canvas和WebGL渲染，基于浏览器支持可自由切换。
快速、免费、易于维护，使用Phaser来开发2D小游戏的优势显而易见。一方面，开发者可以直接通过Koding平台上的VM开发系统进行代码编写及预览。另一方面，也可以在支持Canvas的浏览器中直接安装Phaser来进行游戏开发。接下来就介绍一款使用phaser开发的一款小游戏
（一）游戏概括：
针对手机微信端的网页游戏，两种颜色的细菌（红色和绿色）从顶端下落，左右两个大炮分别发射绿色子弹和红色子弹，分屏处理，点击屏幕左侧，发射绿色子弹攻击绿色细菌，点击屏幕右侧，发射红色子弹攻击红色细菌，根据击中的个数和积累的分值来判断是否胜利。
（二）PhaserJs运行机制
• 创建游戏，即游戏的实例化（new Phaser.Game(w,h,renderer,parent,sate)）
• 创建游戏的场景，即实例化游戏中的state（场景：指游戏中的不同界面和内容，场景能把复杂的游戏分为很多小块，从而简化游戏的开发）
• 创建场景对象Phaser.State的两种形式：函数形式和对象形式
（三）游戏开发
1：游戏的实例化
实例化 game
游戏页面是跑在手机浏览器上面的，要针对手机做适配，game的width和height即是游戏背景图片的大小。
2：场景中的init
一些场景的初始化代码可以写在init function里面，如游戏的缩放控制，这也是上一次我的遗留问题。
手机适配
Phaser.ScaleManager，缩放管理对象，通过它我们能对游戏进行缩放，从而达到适配屏幕的目的。主要的缩放模式有三种：
（1）EXACT_FIT：缩放到游戏的父元素大小，即存放游戏容器的大小，会把game进行拉伸，宽高比会发生变化。
（2）SHOW_ALL：保持游戏宽高比的基础上把游戏缩放到它的父元素所能容纳的最大空间。
（3）USER_SCALE：自定义缩放，可以手动指定游戏的缩放比例。
TIP：以下代码可以使game在父元素中居中显示
3，场景中的preload
加载资源的代码和资源加载事件的处理可以放在preload中，如图片、精灵、图形、文本、瓦片精灵、按钮、粒子......
PhaserJs中的游戏资源的加载使用的是Phaser.Loader对象。
资源加载
资源加载事件处理
TIP：雪碧图（sprite）可以通过TexturePacker来制作。
4：场景中的create
create方法在preload方法里面的资源都已经加载完成后才会执行。创建显示对象的代码写在create里面。
显示对象列表
示例
game.add是对当前游戏的GameObjectFactory（游戏工厂对象）示例的快捷使用，GameObjectFactory可以帮助我们快速的创建显示对象以及一些重要的非显示对象。
5：场景中的update
在update 中更新显示对象的属性。如：使用Arcade物理引擎进行碰撞检测。在本次游戏中，update里面处理了子弹的生成、子弹的发射、子弹与细菌间以及细菌与山的碰撞检测。
Arcade物理引擎只支持矩形与矩形之间的碰撞。
示例
6：场景中的render
实时显示游戏分数和击中细菌的个数
（三）游戏截图
