本文乃Siliphen原创，转载请注明出处
目录
游戏介绍
概述
游戏整体流程
游戏框架设计
单一职责的类
主要流程控制类
核心玩法模块
UI：
游戏世界：
本文项目的代码组织结构
作者项目实践总结
场景只有一个入口脚本
尽量少在节点上挂载脚本
构建游戏世界
ECS 设计
消除物
棋盘地图
逻辑计算和显示分离
消除的实现
查找联通分量
逐步由内向外扩张的消除动画
掉落的实现
合并的实现
道具的实现
本文的完整实现源码工程
【 Cocos Creator 项目实战】系列文章链接：
游戏介绍
《消灭星星》是一个爆款休闲游戏，累计用户5亿+。
目前（2023.08.06）在 App Store 上39.6万个评分，评分4.6，益智解谜类第7名。
参考链接：App Store 上的“消灭星星全新版®”
概述
本文讲解用 Cocos Creator 实现一款加强效果版的《消灭星星》的核心流程和算法。
Cocos Creator 版本：Cocos Creator 3.8.0
本文实现的游戏效果如下：
运行体验本文的实现：
* Web 体验地址：Cocos Creator | 消灭星星
* 微信小游戏体验（使用微信扫码下图）：
文本末尾给出完整实现的源码工程。
游戏整体流程
游戏执行一轮玩家操作的流程：等待玩家点击操作 -> 用户点击 -> 消除-> 掉落 -> 合并 -> 等待玩家点击操作
以上流程是游戏玩家操作一次，游戏执行一轮的分解动作循环。
整个游戏的组成：游戏由N关组成，一关由N轮玩家操作组成。
游戏框架设计
单一职责的类
可以把一轮中的每个动作都独立成一个控制类，每个控制类只负责一种动作，比如A类只负责消除控制，B类只负责掉落控制。
这是敏捷开发中的重要原则：单一职责。一个类的功能越是单一，它就越内聚、越和其他系统解耦合。
每种控制类在它负责的单一动作执行完成后，用回调通知其他系统，它已经完成，可以进行下一步操作。
比如：消除控制系统处理消除完成后，用一个 onComplete 回调通知外界，已经完成了消除这个动作。
掉落控制系统监听消除控制系统的 onComplete ，处理消除后下一步的掉落控制。
主要流程控制类
从调用先后顺序开始依次如下：
| 类名 |
作用 |
| UiTouch |
处理用户触摸输入 |
| Eliminate |
处理消除。消除上下左右连色的实体。 |
| Fall |
消除后会留下空位，控制消除实体掉落下来。 |
| Merge |
掉落后，如果有空的列，那么向左边靠拢合并起来。 |
核心玩法模块
核心玩法分成2大部分：UI、游戏世界
UI：
包括：按钮、弹窗、分数显示、玩家输入 等部分。是所有用户界面的集合。
这个部分的开发有点类似于做 APP。可以用 MVC 等 APP 常用开发模式。
游戏世界：
这是游戏开发独有的部分。处理游戏世界中游戏实体的行为、游戏实体之间的关系和交互、游戏世界的规则等。
游戏核心玩法的开发主要关注这部分。
因为游戏世界不可能简单分为几个层，比如，什么显示层，逻辑层，数据层等。
有可能实体之间的关系和交互很复杂，MVC 等传统 APP 开发模式并不适用。一般大型游戏会采用 ECS 等设计。
本文项目的代码组织结构
如下图：
作者项目实践总结
场景只有一个入口脚本
一个场景只挂一个入口脚本，各种节点的引用使用 find、node.getChildByPath 等去查找。
就像 C/C++ 语言有一个唯一入口函数 main 。
这样做的好处是：在代码中初始化各个系统，有明确的初始化顺序。
在多个节点上挂多个脚本，默认情况下有个问题，哪个脚本先执行哪个脚本后执行。有时候执行顺序是非常重要的。
编辑器可以指定节点上挂的脚本的执行顺序，但这是额外的维护负担。不如在代码中指定的维护性好。
尽量少在节点上挂载脚本
少挂载脚本的好处是：
- 降低脚本Missing情况的维护成本。
- 节约性能。
- 提高项目移植性。比如移植到其他引擎上。
想象一个情况，一个场景中有很多节点，很多节点都挂有脚本。出于某些原因，脚本和节点的挂载关系丢失了。
编辑器节点上要么不显示脚本，要么脚本显示为丢失（Missing）。
场景简单还好，重新手动拖脚本到节点上。场景复杂，那就很麻烦。绝大部分情况，只是知道节点Missing了脚本，但不知道Missing的是哪个脚本。
为什么有时候会Missing脚本？原因很多，可能有如下几种：
* 用户误操作。比如 破坏了 *.meta 文件。
* 多人协作 *.meta 文件冲突，导致脚本丢失。
* 引擎版本多次低级高级来回切换。
* 一些说不清楚的，莫名其妙的情况。
构建游戏世界
《消灭星星》的游戏世界只有2个实体：消除物、棋盘地图。
棋盘没有画面表现。棋盘是消除物的容器，棋盘限定了消除物计算规则和运动规则。
后面的查找消除算法和掉落控制，都是作用在棋盘上计算的。
ECS 设计
本项目使用类似 ESC 的设计，非严格意义上的 ECS ，是如下定义：
Entity 是 Componet 的容器。Component 只有数据，没有逻辑。System 没有数据，只有逻辑。
实体和游戏世界的交互实现，实体和实体之间的交互实现，都放在 System 中。
这种设计的好处是：高扩展性。高维护性。易于移植到其他引擎。易于引擎升级。
消除物
定义如下：
// 消除物实体
export class Elimination
{
// 类型ID
public kindId = "" ;
public presentaion = new EliminationPresentaion() ;
}
// 消除物表现组件
export class EliminationPresentaion
{
// 根节点
public node : Node = null ;
// 动画
public amin : Animation = null ;
}Elimination 是消除物实体类。EliminationPresentaion 是消除物实体的表现组件类。
实体类只是组件类的容器。实体类和组件类都只有定义，没有逻辑。
棋盘地图
棋盘数据本质是个二维数组。定义如下：
// 地图数据
export class MapData
{
// 单件/* */
public static ins = new MapData() ;
// 数据网格
public grid = new Array< Array< Cell > >() ;
// 地图大小
public size = new Size();
// 是否是有效地坐标
public isValid(coord : Vec2) : boolean
{
if( coord.x < 0 || coord.y < 0 || coord.x >= this.size.x || coord.y >= this.size.y ) return false ;
return true ;
}
}
// 地图单元格
export class Cell
{
// 消除物
public elimination : Elimination = null ;
// 坐标
public coord = new Vec2();
// 在世界空间中单元格的位置。
public pt = new Vec3();
}二位数组对应的位置如下图：
左下角的索引是（0,0），右上角是（9,9）。
逻辑计算和显示分离
先计算好结果后再播放达到这个结果的过渡动画。逻辑计算和播放显示动画的分离可以让代码结构更清晰，维护性更高。
后面的处理都是先在内存中计算好地图状态：消除后地图哪些单元格为空，掉落后消除物实体都落在哪个单元格上 等。
计算好地图状态后再处理画面显示：播放消除动画，播放掉落动画等。
消除的实现
先看下文本实现的消除效果：
大部分《消灭星星》的实现都是点击后瞬间一起消除。
本文做了不一样的效果，从点击的消除物开始逐步由内向外扩张的消除。
不管是瞬间消除，还是某种控制动画消除，第一步都是“查找相邻的同类消除物”。
查找联通分量
术语“查找联通分量”很多《数据结构》的书都会有介绍。此处，我们用来查找相邻的同类消除物。
使用深度优先搜索（DFS）实现，输出一颗树。树的根结点是玩家点击的那个消除物。
为什么要输出一棵树？因为要按照树的层次进行消除才能实现逐步由内向外扩张的动画。
具体实现可查看工程源码的 ConnectionFind.find 函数。
这里为了讲解算法原理，用伪代码说明算法的核心思想。
// start 是点击的消除物
dfs( start )
{
// 结果数据结构，用 Map 表示一棵树。key 是一个被发现的消除物，value 是这个消除物的父节点。
let ret = new Map< Elimination , Elimination >() ;
// 创建一个栈 stack q ;
let q = new Stack() ;
// 访问记录。该数据结构是为了防止重复访问那些已经访问过的消除物
let visit = Set< Elimination >() ;
q.push( start ) ; // 起始点入栈
ret.set( start , null ) ; // 点击的消除物是根结点，根结点没有父节点。
for( ; q.count > 0 ; ) // 栈不为空就一直循环
{
let t = q.pop() ; // 出栈一个节点
let list = expand( t ) ; // 查找出栈节点上下左右4个方向相邻的同样的节点
foreach( let t2 in list ) // 所有查找出来的节点入栈
{
if( visit.has( t2 ) ) continue ; // 跳过访问过的消除物
q.push( t2 ) ;
ret.add( t2 , t ) ; // 发现一个行节点t2，它的父节点是t。
visit.add( t2 ) ;
} // end for
} // end for
return ret ;
}《消灭星星》最难的算法就是这个“查找联通分量”了。
如果一下子不理解也没关系，可以反复琢磨下本文作者的伪代码和具体实现。
或者是查阅数据结构或算法的书籍，深入、详细的学习下。加油！：）
逐步由内向外扩张的消除动画
在上一步中，我们获得了一颗消除物节点树。是一个键值对数据结构，key 表示发现的节点，value 表示发现的节点的父节点。
这里，我们处理这棵树结构为按照树的层次划分的数据结构：let levels = new Array< Array< Elimination > >()
levels[ 0 ] 表示树第 1 层的节点集合。树根只有一个起始节点。
levels[ 1 ] 表示树第 2 层的节点集合。
... 以此类推
间隔一层层的整体消除即可。
如何把 Map< Elimination , Elimination > 处理成 Array< Array< Elimination > > 的层次结构呢?
遍历这个 Map，对每个 key 向上查找，直到查到 null 遇到根结点为止。就可以得知当前 key 所在的层次。
按照层次放入对应的 Array 数组容器中即可。
具体实现查看源码工程的类 SeqCtrl。
掉落的实现
消除后，棋盘地图的一些被消除的消除物所在的单元格会被设为空。上面的消除物会掉落下来。
从棋盘底部向上一行行遍历，遇到一个消除物后，向下查找一个空位，如果能找到一个空位，就把这个消除物设置到那个空位上。
先设置棋盘的逻辑状态。后计算被移动的消除物的新的显示位置，做一个移动动画即可。
具体实现查看源码工程的类 Fall。
合并的实现
本文实现的合并效果如下图：
合并的处理在掉落之后。
遍历棋盘最底部的那一行，遍历顺序从左到右。
因为之前已经执行了掉落，最底部的一行有空位的话，就说明有棋盘地图有一列为空。
如果发现了一个空位，就说明需要合并，向后查找一个非空列，整体移动那一列的消除物到空位即可。
具体实现查看源码工程的类 Merge。
道具的实现
经典的消灭星星有3个道具：指定一个消除物替换为另一个指定的消除物、九宫格炸弹，全体消除物随机变换。
九宫格炸弹
具体实现查看源码工程的类 PropBombNine、TouchPropBombNine
全体消除物随机变换
遍历整个棋盘地图，随机替换消除物即可。
具体实现查看源码工程的类 PropChangeAll。
单点替换
这个道具的实现相对以上2个比较特殊，耦合了点击操作。
先要设置触摸模式为使用道具，然后玩家点击后，如果点击的是一个消除物，
就在这个消除物的上方显示替换UI，供玩家选择变换后的消除物。
具体实现查看源码工程的类 PropChangeOne、TouchPropChangeOne
本文的完整实现源码工程
源码工程下载地址：Cocos Store
作者创作不易，您的支持让我创造出更多更好的作品。：）
【 Cocos Creator 项目实战】系列文章链接：
【 Cocos Creator 项目实战】益智游戏《2048》文章来源：https://www.toymoban.com/news/detail-640221.html
【Cocos Creator 项目实战 】消灭星星加强版文章来源地址https://www.toymoban.com/news/detail-640221.html
到了这里，关于【Cocos Creator 项目实战 】消灭星星加强版（附带完整源码工程）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
