Phaser小游戏——子弹打细菌

在前面的一篇文章中，我基本介绍了一下PhaserJs这个HTML 2D游戏开发框架，说基本介绍，其实真的很简单，因为项目需要，当时就在网上搜集了一下适用于移动端Html游戏的框架，就找到了PhaserJs，现学现用，整个游戏做的很粗糙，而且还存在遗留的问题。这次根据游戏内容详细介绍一下用PhaserJs框架做游戏的整个流程。

（一）游戏概括：

针对手机微信端的网页游戏，两种颜色的细菌（红色和绿色）从顶端下落，左右两个大炮分别发射绿色子弹和红色子弹，分屏处理，点击屏幕左侧，发射绿色子弹攻击绿色细菌，点击屏幕右侧，发射红色子弹攻击红色细菌，根据击中的个数和积累的分值来判断是否胜利。

设计图

（二）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

实时显示游戏分数和击中细菌的个数

（三）游戏截图

PS：本次游戏中包含了图片、文本、音频、sprite的加载和创建显示，sprite的补间动画和逐帧动画、粒子发射器的创建，Arcade物理引擎的使用等。因版权问题，无法提供源码，如果感兴趣的，可以私信交流。想了解更多关于Phaser的知识，也可以去Phaser小站、Phaser官网。