前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >二维矩阵节点的链式消除和自动补齐!消消乐类游戏可参考!

二维矩阵节点的链式消除和自动补齐!消消乐类游戏可参考!

作者头像
一枚小工
发布2020-05-09 16:36:50
7670
发布2020-05-09 16:36:50
举报
文章被收录于专栏:Cocos Creator开发Cocos Creator开发

效果预览

操作方法

点击选中开始节点,按住拖动到相邻的节点,相邻节点添加至选择链中,沿着链往回拖,将会取消之前选择的节点,松开手指以后,选择的节点将会消失,空节点上方的节点将会自动掉落,上方自动随机生成新的数字方块掉落,如上面效果图所示。

实现流程

1. 确定选择的节点链,并记录,更新选中的节点位置为空,并回收;

2. 沿着 Y 轴正向纵向从左到右遍历(即时掉落反方向);

3. 若有空节点,则在最上方新填一个新的方块;

4. 若不是空节点,遍历下一个节点,直到沿着 Y 轴遍历完成;

5. 沿着 X 轴遍历完成后,做自动掉落动画;

6. 遍历的方式类似,依次从 X 轴正向,按照 Y 轴遍历所有非空节点,根据偏差量,计算运动距离和运动时间,动画播放以后,更新节点数组的信息;

7. 遍历矩阵上方的新增节点,按照 6 中类似的操作播放掉落动画;

实现算法

首先,是做选择节点的消除操作,比如下图,是我选择的节点链,为了便于讲解,本文会把显示缩小 0.5 倍进行显示,后文中图类似。

通过上一步记录的选择节点链,进行消除,消除以后,显示的就是下图效果(每次游戏生成的随机数是不一样的,所以每个图的数字对不上,但是位置都是固定的几个位置,看的时候,需要注意)。

消除格子以后,就需要额外的补齐,消除了几个,就在屏幕上方补充几个,补充的时候,需要根据补充的有多少,注意 Y 轴显示位置,显示出来的效果就是下图所示。

接下来,就是做动画了,动画的思路,主要是计算每个格子,从上方掉落到下方,需要跨越的间隔,在统计的时候,从屏幕下方往屏幕上方开始做动画,有利于动画的控制。而动画,分为 2 部分,原屏幕中的和新增加的节点。

先进行原节点的动画控制,按照单元格,各自做自己的动画,同时播放,就会出现整体掉落的效果。

接着,就是上方新增的节点,播放动画,实现方式类似上一步的动画控制,连在一起的实现效果就是下图所示。

最后,对显示的部分,做遮罩处理,只显示想要显示的区域,就完成了该部分内容了。

思路说明

由于还在做,没有完全开发完,代码随时可能会修改,所以本游戏的后续文章中,尽量讲解思路,不贴代码,以免看的时候稀里糊涂的,产生误解,等游戏完全做完以后,再放开代码,如果感兴趣,欢迎关注。

游戏介绍

完整的游戏尚未做完,具体玩法是,屏幕上会随机一个数字,玩家通过选择节点链,若节点链上所有数字之和等于随机的数字,则得分,否则失败。后续更新,将会陆续分享

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-04-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 一枚小工 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档