简单介绍一下phaser

Phaser是一个开源HTML5游戏框架。Phaser内部不使用任何人造的OO风格编程。没有大量的继承链和组件系统，你也不必强迫对象设计为任何固定的类结构。只有简单直接的原型链，JavaScript最自然的使用方式。如下图是一个非常简单的html结构:

图1

接下来我们来看它的js部分。首先通过一句话来创建一个游戏世界：var game = new Phaser.Game(288, 505, Phaser.CANVAS, 'game');在html结构中会自动创建一个canvas标签如下图:

图2

phaser通过状态来管理游戏场景，一般一个游戏页面场景对应一个状态。声明一个状态。这个状态必须要包含至少一个preload,create，update等函数。通常我们在preload函数中处理资源的加载。我们可以在这个函数里面将游戏用到的图片，音频，视频等文件加载进来。下图时一个常见的加载资源的preload函数。

图 3

然后我在常在create函数中完成添加游戏元素，或者游戏页面跳转功能。图下图

图4

由图4可以看出，在第一个state里面的create函数里面做了一个事情，就是跳转到了menu这个游戏场景里面了(也是menu状态)。在menu这个状态里面只有一个create这一个函数。在这个函数里面它添加了游戏的背景，游戏的人物，声明了游戏按钮等，同时给这部分内容添加了动画效果。最终menu这个状态呈现出来的页面如下图所示:

图5

还有一个重要的函数就是update函数了。顾名思义，这个函数主要是处理游戏更新的函数。它是一个会多次循环的函数。

图6

在这个游戏场景中会不停的执行对应的update函数。以此来更新游戏的进度。

想要真正开始这个游戏，首先要将你写好的游戏场景通过game.add.state()函数添加进来。如下图

图7

一个简单小游戏的实现过程就是这样。剩下的就是为游戏去添加多个场景，每个场景添加丰富的游戏元素。