首页
学习
活动
专区
工具
TVP
发布

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 将定期原创或转载优质的技术分享教程,我们也欢迎有创作想法想要投稿的开发者与本公众号进行联系,感谢支持!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190814A0HUO700?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券