【Cocos Creator 项目实战】益智游戏《消灭星星》加强版（附带完整源码工程）

Siliphen

已于 2023-09-01 12:58:43 修改

阅读量1.6k

点赞数 1

分类专栏： Cocos Creator 项目实战文章标签： Cocos Creator 游戏项目实战消灭星星 PopStar cocos 益智游戏

于 2023-08-10 21:09:37 首次发布

本文链接：https://blog.csdn.net/StevenKyleLee/article/details/132128891

版权

Cocos Creator 项目实战专栏收录该内容

2 篇文章 1 订阅

订阅专栏

本文乃Siliphen原创，转载请注明出处

【 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 ;                                        
}

《消灭星星》最难的算法就是这个“查找联通分量”了。

如果一下子不理解也没关系，可以反复琢磨下本文作者的伪代码和具体实现。

或者是查阅数据结构或算法的书籍，深入、详细的学习下。加油！：）