从零到一：用Phaser.js写意地开发小游戏（Chapter 2 - 搭建游戏的骨架）

写在前面

上一节咱们认识了Phaser.js，也说到了Phaser比较适合开发2D的小游戏，那么接下来的几篇文章会以开发一个移动端的小游戏为例，来介绍如何上手Phaser.js。这一节的主要内容是用Phaser.js搭建游戏的骨架。

游戏相关的一些概念

画布

通常来讲，作游戏的话基于Canvas会比基于DOM性能要好不少，尤为是涉及大量动画的状况下。Phaser会将一切渲染在canvas元素上，因而，绝不夸张地说，你的body标签里可能只包含一个canvas元素。

因为本节开发的目标是一个移动端的小游戏，所以画布通常来讲都是充满全屏的。

场景

一个完整的游戏都是有分场景的，不是指“迷宫”、“沙漠”这些游戏场景，而是“加载”、“开始”、“游戏”、“结束”等场景。通常来讲咱们实际作项目的时候也大概是以下四种场景：

• 加载——展现进度条和loading动画，主要操做为加载游戏资源，如图片、音频等。

• 开始——展现开始按钮、活动规则等，主要是让玩家能有主动开始的操做（很关键，后面会说到）。

• 游戏——整个游戏的主要逻辑都在这个场景中，最核心的部分。

• 结束——展现游戏最终得分、排名等。

这样的场景的划分也算是描述出了整个游戏的生命周期，我认为上述四个场景是最基本的，缺了哪一个场景游戏都不算完整，或者是体验不够完善。

另外，关于再玩一次，有两种方式，一种是回到开始场景，也就是说要再点一次开始游戏，这时候你能够再看看游戏规则等；另外一种是直接开始游戏。选用哪种方式视具体项目而定，比较常见的是直接开始游戏。

对象池

游戏中生成很是多的元素，咱们会须要一个对象池来维护他们，对象池能够理解成是一个Group。那么关于对象池有如下相关的操做：

• 尽量的复用对象，能够减小内存的开销。例如已经移出可视范围的对象（例如跑酷游戏的障碍），从新设置它们的位置，而不是从新建立。

• 若有肯定要销毁的对象，记得显式调用distroy方法（通常游戏框架并不会被销毁killed的对象，它们还能被“复活”）。

正式开始

每一步我都会给出示例代码，你们点击示例代码连接旁的“点击预览”便可看到效果。

第一步：建立实例

• 引入Phaser.js

• 建立游戏实例

说明：这里宽高设置成320*568是为了方便你们查看示例，实际应用场景应该是

var width = window.innerWidth;
var height = window.innerHeight;

示例代码：https://jsfiddle.net/Vincent_...

---

第二步：定义场景

• 定义每一个场景的内容

• 将场景添加到游戏实例中

说明：

• 每一个场景都是一个function。

• 经过game.state.add能够将场景添加到游戏

示例代码：https://jsfiddle.net/Vincent_...

---

第三步：将场景串通

• 具体定义每一个场景的生命周期

• 从一个场景切换到另外一个场景

• 启动游戏

说明：

每一个场景都有本身的生命周期，经常使用的生命周期是preload（加载）、create（准备就绪）、update（更新周期）、render（渲染完成）。顺带介绍一下这四个生命周期吧（详细介绍能够查看官方离线文档）：

• preload - 尽管咱们有预加载的场景，但若是你但愿能缩短进入页面时加载的时间，能够分摊一些到其余场景，只须要在其余场景加入preload方法便可。

• create - 若是存在preload方法，则会在加载完毕后执行此方法；不然将在进入该场景时直接执行此方法。

• update - 更新周期自动执行的方法，例如在play场景的update方法中能够去检测两个物体是否有接触。

• render - 渲染完毕后执行的方法，例如能够在此方法中勾勒出物体的边缘，来方便观察物体的碰撞区域。

示例代码：https://jsfiddle.net/Vincent_...

迈出了第一步

至此咱们已经将游戏的场景设置好，并成功启动了游戏，经过游戏背景颜色的变化能够体验到场景的切换，咱们也能了解到整个游戏分为了四部分，每部分有本身的生命周期。

不少教程会从建立主角作起，但我认为先把游戏骨架搭建好了，再丰富每一个场景里面的细节，会更容易理解整个游戏的运行过程。

代码没有不少行，我也都用ES5来写，阅读起来应该不费劲。这一节包括后面的章节的内容都不会太多，方便你们消化。同时也尽量的介绍每一步是怎么作的。

搭建好游戏的骨架后，咱们总算是迈出了第一步。

未完待续

回顾：Chapter 1 - 认识Phaser.js

下一节：Chapter 3 - 加载游戏资源