摘要：结束展示游戏最终得分排名等。对象池游戏中生成非常多的元素，我们会需要一个对象池来维护他们，对象池可以理解成是一个。那么关于对象池有以下相关的操作尽可能的复用对象，可以减少内存的开销。
写在前面
上一节我们认识了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来写，阅读起来应该不费劲。这一节包括后面的章节的内容都不会太多，方便大家消化。同时也尽可能的介绍每一步是怎么做的。
搭建好游戏的骨架后，我们总算是迈出了第一步。
未完待续文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/56194.html
摘要：结束展示游戏最终得分排名等。对象池游戏中生成非常多的元素，我们会需要一个对象池来维护他们，对象池可以理解成是一个。那么关于对象池有以下相关的操作尽可能的复用对象，可以减少内存的开销。 showImg(https://segmentfault.com/img/bVMR3L?w=900&h=500); 写在前面 上一节我们认识了Phaser.js，也说到了Phaser比较适合开发2D的小游...
摘要：由于公司项目转型，需要创造一个小游戏平台，需要使用一个比较成熟的前端游戏框架来快速开发小游戏。仅支持开发游戏，因为专注，所以高效。早在年的光棍节前一天晚上，这个游戏就诞生了。原型是一个之前很火的非常魔性的小游戏，叫寻找程序员。 showImg(https://segmentfault.com/img/bVMGY5?w=900&h=500); 写在前面 实际上我从未想过我会接触到H5小游...
摘要：由于公司项目转型，需要创造一个小游戏平台，需要使用一个比较成熟的前端游戏框架来快速开发小游戏。仅支持开发游戏，因为专注，所以高效。早在年的光棍节前一天晚上，这个游戏就诞生了。原型是一个之前很火的非常魔性的小游戏，叫寻找程序员。 showImg(https://segmentfault.com/img/bVMGY5?w=900&h=500); 写在前面 实际上我从未想过我会接触到H5小游...
摘要：顺带一说，这次的示例是做一个接苹果的游戏，一句话说完就是控制主角接住每一个从天上掉下来的苹果，否则就算输。那么如何利用这些资源构建出游戏的玩法，苹果怎么掉，怎么控制主角等等，将是下一节的内容。 showImg(https://segmentfault.com/img/bVMWgO?w=900&h=500); 回顾 上一节我们搭建了游戏的骨架，添加了四个游戏场景，分别是加载、开始、游戏、...
摘要：顺带一说，这次的示例是做一个接苹果的游戏，一句话说完就是控制主角接住每一个从天上掉下来的苹果，否则就算输。那么如何利用这些资源构建出游戏的玩法，苹果怎么掉，怎么控制主角等等，将是下一节的内容。 showImg(https://segmentfault.com/img/bVMWgO?w=900&h=500); 回顾 上一节我们搭建了游戏的骨架，添加了四个游戏场景，分别是加载、开始、游戏、...
阅读 2609·2021-11-18 13:21
阅读 3513·2021-11-18 10:02
阅读 3978·2021-09-26 10:11
阅读 833·2021-09-06 15:01
阅读 2475·2021-07-28 00:37
阅读 3005·2019-08-29 15:29
阅读 969·2019-08-29 15:23
阅读 1879·2019-08-27 11:05
