如何用HTML5开发一款手机游戏
话提前先简单介绍一下phaser，这是一款HTML5的游戏开发框架，下面的介绍也是基于这个框架进行写的
下面这个是游戏的演示，控制白色的方块移动，并躲避黑色的方块，靠吃掉黄色的方块得分
代码1：先搭出来游戏框架
说明：暂时先构建了两个状态函数：Load和Play
Load：用于加载资源，很多游戏中的加载进度条也是写在这里面的
Play：游戏的主运行模块
代码2：加载游戏资源，Load模块
下面这个图是验证屏幕尺寸等比例缩放的
下面是引入的图片素材
代码3：创建游戏世界，Play模块的create函数，先定义一些基本信息
代码4：创建sprite并显示，sprite是用于操作或者显示动画的游戏元件
this.loadLevel(); //创建sprite（操作的方块、移动的方块、用于吃掉的方块、和被吃掉或撞击后散开的小方块），这个函数在create里被调用
下面是结果画面的演示图
发现没有黑色来回移动的方块，这是因为虽然把它添加到group中，但没有给他设定一个显示位置，后面的几步会通过移动来显示它
代码5：键盘按键操作白块移动
上/下/左/右 我先贴出一个上的例子图，下/左/右 和 上 一样，感兴趣的同学可以读一读源码
this.movePlayer()要加在周期函数的update函数中才可被循环调用
下面是效果图
代码6：手机触摸滑屏操作
有很多的原理和代码5的相似，就不添加注释了，注释里记录的是手机操作思想
手机操作暂时演示不了。。。。。
代码7：碰撞检测，我也只举一个例子白块碰黄块的例子，白碰黑的同理，感兴趣的可以翻看代码
update函数内部添加下面这个调用
game.physics.arcade.overlap(this.square, this.coin, this.takeCoin, null, this);
这个是覆盖检测，当参数1(square：白块)覆盖了参数2(coin：黄块)，会自动调用参数3(回调函数)，而参数4是重叠后二次检查的回调函数(如果重叠不是最终目的，还需要其他的判断时)，参数4对象应用的上下文(一般都是this)，结果返回true/false
下面是takeCoin检测覆盖后触发的函数
代码8：粒子发射器，就是撞击后产生的散列效果
this.loadParticles()因为是属于创建函数，创建一次就可以了，所以要放在create里调用
代码9：被撞击后的黄块重新生成
这段是代码7中，time.events触发的回调函数，game.time.events.add(500, this.addCoin, this);
意思是当执行到这段代码时，间隔500毫秒后，触发this.addCoin
下面的目前的效果图
代码10：spawnEnemies和addEnemy本来想把代码段贴出来，但考虑到和程序的关联性比较强，我就不贴了，感兴趣的同学可以对照着源码来看。
有几行逻辑我单独列出来解释一下：
enemy.body.velocity.x = -100*i*speed; //这个是设定速度，速度是只能设定在物理体上的，有了这个速度就可以自行运动
enemy.body.velocity.y = -100*j*speed; //物理系统的速度有两种，一种是 速度+角度（可以看看api文档），一种就着这个x轴和y轴各自包含一个速度
enemy.reset(game.width/2 +i*8*8, game.height/2 +j*8*8 +j*190); //重置显示的坐标位置，功能和enemy.setTo一样，下面讲区别
enemy.anchor.setTo(0.5); //重设锚点
enemy.checkWorldBounds = true; //检查世界边界
enemy.outOfBoundsKill = true; //超出边界的时候执行kill()
再说一下kill()函数，kill不会真正的删除对象，对象还是原来的对象，
只是把下面这3个设置成了false
this.alive = false; //是否是活着的
this.exists = false; //是否存在
this.visible = false; //是否可见
物理系统的众多运动和动画、补间动画等，都会先判断这几个；
所以当重置reset坐标位置的时候，这几项会重新赋成true，而set则不会
注：源码我放到了附件里
再分享几个网站：
http://www.phaserengine.com/ （这是phaser框架的中文网，吐槽：网站目测是机器翻译的，略有些糟糕）
http://phaser.io/ （这是官方网站，文档例子非常全）
http://phasereditor.boniatillo.com/blog/downloads （官方出的开发工具，收费的，不知道网上有没有破解的）
