全套源码｜基于Cocos Creator的三消游戏

感谢『简书 ID： pzhpengpeng』友情提供

http://www.jianshu.com/p/c1083f175712

昨天的文章由于标题、内容出现某款游戏的字眼，易引起版权独代纠纷。故今天修改后重新发出。文章所提及的源码、游戏分析等，均为作者独立整理，已获允许。

前言

这是一款消除类游戏，规则和大多数三消游戏差不多。在一个5x5的格子中，有25个方块，每个方块有一个数字，用户的操作就是点击方块，使方块的数字+1。当每3个数字相同时，这些数字相同的方块合成为一个，并且数字+1。

这款游戏看似很简单，但实际蕴含很多细节以及算法，我用了一周时间断断续续才做出来。这次练习中，我是第一次尝试使用Cocos Creator来做，使用中遇到了一些问题，它与Cocos2d-JS的原生API还是有一定的差别的。Cocos Creator想实现一整套的工作流，将游戏中的所有元素都组件化，游戏场景通过拖拖拽拽就能搭建，游戏逻辑的实现只需要对组件添加相应的脚本即可，让游戏开发更加方便、更加直观可视化。

Cocos Creator

Cocos Creator是Cocos家族又一个划时代意义的产物。我个人认为游戏开发的脚本化、组件化、以及高效工作流、高度可扩展，已经成为任何一款游戏引擎的发展方向。这样高效快速的开发工具，才是开发者的首选。

了解Cocos家族历史的人应该都知道，Cocos从各种语言版本，到2d-x跨平台版本，到Cocos Studio、Cocos IDE、Cocos Builder，再到Cocos Creator，这一切都在使开发者越来越方便，使得游戏开发的门槛越来越低。任何人，只要你有心，有游戏梦，你都可以通过自身的努力来造梦。而Cocos Creator，就是我们造梦的工具。

不过每个新产物都还存在难以避免的bug，希望Cocos Creator能有一套成熟的兼容适配方案。或许我还不够熟悉Cocos组件化开发，等到我真正熟悉这款工具，才能用好它。所谓工欲善其事必先利其器，工具用好了，你的造梦之路才会更加顺畅！

游戏分析

这款游戏是比较常见的三消类游戏。它的特色在于将数字类游戏玩法与消除类游戏玩法相结合，游戏过程具有挑战性，让人有继续玩下去的欲望。游戏的玩法在上文已有描述，没有玩过这款消除类游戏的朋友可以通过以下地址进行下载：

安卓版地址

http://app.mi.com/detail/231892?ref=search

iOS版地址

https://itunes.apple.com/cn/app/dian-wo+1/id1012314214?mt=8

H5

http://www.cocoscvp.com/usercode/946fc5fd5d2c77331cc344ea1e4bfdd04630cf85/

通过游戏玩法我们至少可以分析出以下几点：

1)、点击游戏方块，方块数字+1

2)、在至少3个相同数字的方块彼此相邻时，可以合成一个+1的数

3)、生成5x5的地图时，最多只能有两个相同数字方块相邻

4)、每完成一次方块合成之后，所有方块向下填补空缺的位置

5)、在填补完空缺位置之后，再生成新的方块

在Cocos Creator中，我们要熟悉组件化开发，因此我们需要开始场景、游戏场景、结束场景、以及方块预制资源、能量条预制资源，以及各种脚本和音效等。分别用scene、script和voice三个文件夹来存放场景组件，脚本组件和音效组件，另外将预制资源放在根目录下。

游戏实现

我们首先需要一个数组来存放所有的方块，并将方块单独提出来为一个对象。在这里，我们将方块做成预制资源，在需要的时候直接创建方块预制资源，同样，能量条也可以做成预制资源。另外我们需要开始场景、游戏场景和结束场景三个场景，并对这三个场景组件编写脚本。

在开撸代码之前，我们大致要实现的几个核心算法：

1)、扫描某一个位置的上下左右四个方向所有相邻的相同数字的点，并得到这些点的个数

2)、所有方块向下移动，填补所有的空缺核心的就这两个算法，其他的都是一些简单的逻辑。

下面先对这两个算法进行分析：

扫描算法

扫描算法实质上就是对指定的点四周进行扫描是否有相同点，如果数字相同，那么还需要进一步对这个点进行扫描，直到四周都没有数字相同的点，才能确认最终相邻点的个数。我的实现方式是这样的，写一个函数，传入两个数组，一个用来记录扫描到的点，一个用来记录扫描过的点，便于下次扫描不再重复。

除此之外，还需要传入行，列，上次扫描的行，上次扫描的列（在下次扫描时，不用再对上次的那个方向进行扫描），以及扫描要比对的数字。通过指定的点，我向上、下、左、右四个方向进行扫描，如果数字相同，我就将这个点加入到记录数字相同的点得数组中，并对这个点再递归调用，在四个方向全都递归扫描完毕后，我得到的这个扫描过的点的数组，就是所有与指定点的数字相同且彼此相邻的点的集合。可能我描述不是太清楚，我直接将代码贴出来，我的算法基础不是太好，这不是最优算法，希望有朋友能为我提供更好更快的算法。

移动算法

移动算法相对就比较简单了。我只需对每一列从下往上遍历，当遍历中发现方块不为null时（即这个点有方块），我们就以这个方块为起点，对这一列往下遍历，在子循环中，如果下方为null时（即下方没有方块），这个方块就向下移动一个单位，一直循环到下方见底，或者下方遇到方块，才会停止。这个算法相对简单，代码如下：

方块类

方块类我们通过Creator的预制资源来制作，如下所示：

在Tile预制资源中，我们只需要一个背景层和一个显示数字的Label即可。其背景层的颜色和数字显示都通过脚本来控制，方块需要包含以下几个方法：
1)、产生新方块的初始化及特效
2)、移动到指定点的逻辑及特效
3)、方块销毁的逻辑及特效
4)、设置方块数字以及动态改变其背景色
5)、在方块的初始化onLoad函数中，需要对方块添加TOUCH_START事件，事件中绑定上面提到的4方法。

方块初始化函数
添加触摸点击事件，绑定设置数字函数，清空combo次数（combo次数记录放在全局组件Global中）

产生新方块
执行从小变大的动画，设置数组中的行列到属性中

移动到指定点
执行移动动画，设置数组中行列到属性中

方块销毁
执行从大变小的动画，执行完动画之后调用destory方法销毁方块

设置方块数字
设置方块的显示数字，并动态改变相应数字的颜色，颜色存在全局组件变量Colors中，通过参数exeLogic判断是否需要执行游戏的消除逻辑，通过playEffect判断是否需要播放音效

同方块类，我们将游戏场景中的能量条也做成预制资源，其中只需要添加一个背景层就可以，背景层也是通过代码动态控制颜色，能量条不需要任何脚本文件。

开始场景

做好了预制资源之后，我们就可以做开始场景了，效果图如下：

开始场景中有三个元素，游戏文字，开始按钮，和背景层。其中游戏文字呈现一个变大变小循环播放的动画，点击开始按钮即可转入游戏场景。

onLoad加载
动态设置元素的位置及宽高，以适配各种型号手机屏幕

开始游戏按钮回调
点击进入游戏场景

结束场景

结束场景与开始场景差不多。相比之下，结束场景主要提供游戏分数特效呈现的功能。

结束场景也是几个Label，一个背景层和一个Button按钮组成，其中最重要的是分数特效，通过从0一直往上加，加到实际分数的特效，来使玩家获得成就感，具体代码如下：

加载函数

动态设置场景中元素的宽高及位置，播放分数计算特效，绑定TOUCH_START事件，使特效立即播放完成

更新分数回调
每一次更新分数回调，将特效分数增加20，直到加满到游戏得分，并将这一过程显示在场景的Label中

返回按钮回调
游戏分数的全局变量归零，切换加载开始游戏的场景

游戏场景

在游戏场景中，我们进行所有的游戏逻辑运算，包括前面提到的两个核心算法，在主场景中，我们需要在onLoad加载时，初始化25个方块，并放在地图中，使他们之间相邻个数小于3个，然后我们需要提供一个主要逻辑判断函数，这个函数中判断游戏中方块的消除逻辑，再前面的Tile的setNum函数中进行调用，代码如下：

场景加载
在场景加载中，我们需要初始化25个互相相邻小于3个的方块，与5个能量条，并且动态设置所有元素的宽高与位置。

扫描逻辑
不再赘述

主要操作逻辑
在这个函数中，我们需要对指定的点进行扫描，如果相邻数超过三个，则进行合成动作，然后更新分数，将所有的方块向下移动填补，并补充一条能量条，增加连击次数

所有方块向下移动
除了上文提到所有方块的移动算法之外，在移动完成之后，还需要进行新产生一批方块，并再次判断消除逻辑的操作

运行效果

通过CVP平台的项目托管可看到实际运行效果。
由于个人对Cocos Creator的适配还不大了解，在pc上运行时，需要使用chrome的手机调试预览（或者将chrome窗口调至手机屏幕大小），但是如果直接用手机打开，loadScene似乎又有不兼容的问题，至今无法理解，还请大神指点。而我无论是开发时的预览，还是通过xcode打包到我的iPhone6s Plus手机运行，都是完全没有问题。

全套源码均已上传到github，欢迎想学习三消游戏的小伙伴戳「阅读原文」下载共同交流。有任何问题和反馈，都可以在文末留言！

戳原文，全套源码，拿走不谢！