Cocos Creator：快速开发推箱子游戏

Cocos 已获得转载授权！

作者：蒲公英，开发工程师，7 年 Cocos 引擎使用经验。

游戏总共分为 4 个功能模块：

开始游戏（menuLayer）

关卡选择（levelLayer）

游戏（gameLayer）

游戏结算（gameOverLayer）

Cocos Creator 内组件效果如下：

游戏开始默认显示 menuLayer，游戏中，通过控制各个层级的显示和隐藏，实现不同模块的切换。例如开始游戏，点击开始以后，触发回调函数，切换到游戏关卡选择界面，绑定关系如下图：

实现代码如下：

其他功能模块实现类似，以下将分4个模块分别讲述各个模块的实现。

1. 开始游戏 menuLayer

开始游戏模块，开始游戏后默认显示，其他模块隐藏，功能实现相对简单，界面布局完成以后，开始游戏按钮添加响应事件即可，实现代码如上，在此界面添加了一个小动画，让开始游戏按钮不断的放大缩小，代码如下：

实现后的效果：

2. 关卡选择 levelLayer

关卡选择分两步：第一步，界面显示，通过配置文件，加载预制文件，显示所有关卡；第二步，根据游戏情况，更新每一关卡信息。

2.1 第一步显示关卡

游戏中所有关卡置于 ScrollView 控件上，每一个关卡，使用一个预制文件（levelItem），通过读取关卡配置文件，加载所有关卡，加载完成后重新计算 ScrollView 内容的高度，加载关卡代码如下：

下图即是所有关卡预制的父节点：

预制脚本挂在到预制上：

2.2 第二步更新关卡

每一个 levelItem 预制上挂一个 levelItem 脚本组件，levelItem 脚本组件负责更新信息，主要控制是否可点击、通关星数、关卡等级、点击进入，levelItem 脚本组件更新 UI 代码如下：

玩家的通过的信息，通过配置存储文件，保存玩家通关信息，分为已通关、刚开启和未开启三种状态，具体实现如下：

最终的显示效果如下图：

3. 游戏 gameLayer

游戏也分为两步：第一步，显示界面；第二步，游戏操作判断。

3.1 显示界面

游戏内使用 levelConfig.json 配置每一关卡信息，每个关卡游戏部分由多行多列的方格组成，每一个关卡信息包含 content、allRow、allCol、heroRow、heroCol、allBox 属性，allRow 和 allCol 记录总共行数和列数，heroRow、heroCol 记录英雄所在位置，allBox 记录箱子的总数，content 是核心，记录每个方格的属性，根据不同的属性显示不同的物体，如墙面、地面、物体、箱子，可以通过修改配置，增加任意关卡。

读取关卡所有数据，并根据每一个位置的属性，显示不同的实物。

根据配置创建关卡信息：

根据类型创建元素：

游戏的所有元素，放置在下图中 gameControlLayer 的上：

游戏开始后，显示的效果如下（第一关，其他关类似）

3.2 游戏操作判断

路线计算好后，玩家移动，若玩家点击的是箱子区域，先检测箱子前方是否有障碍物，若没有则推动箱子，通过切换地图的图片和修改位置类型达到推动箱子的效果。

点击地图位置，获取最优路径，人物跑到指定点，实现如下：

获取最优路径算法：

4. 游戏结算 gameOverLayer

游戏结束后，根据成功推到箱子数，判断游戏是否成功，游戏成功以后，更新关卡信息即可。

判断逻辑如下：

Cocos Creator 组件布局如下：

以上便是转载全文，感兴趣的开发者可以关注公众号“一枚小工”与作者进行更加深入的交流互动。

Cocos 将定期原创或转载优质的技术分享教程，我们也欢迎有创作想法想要投稿的开发者与本公众号进行联系，感谢支持！