原文网址：https://www.youyong.top/article/11599ea0e3594

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

安卓版地址

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，欢迎想学习三消游戏的小伙伴下载共同交流。

有任何问题和反馈，都可以在文末留言！

原文网址：https://www.youyong.top/article/11599ea0e3594