效果预览
操作方法
点击选中开始节点,按住拖动到相邻的节点,相邻节点添加至选择链中,沿着链往回拖,将会取消之前选择的节点,松开手指以后,选择的节点将会消失,空节点上方的节点将会自动掉落,上方自动随机生成新的数字方块掉落,如上面效果图所示。
实现流程
1. 确定选择的节点链,并记录,更新选中的节点位置为空,并回收;
2. 沿着 Y 轴正向纵向从左到右遍历(即时掉落反方向);
3. 若有空节点,则在最上方新填一个新的方块;
4. 若不是空节点,遍历下一个节点,直到沿着 Y 轴遍历完成;
5. 沿着 X 轴遍历完成后,做自动掉落动画;
6. 遍历的方式类似,依次从 X 轴正向,按照 Y 轴遍历所有非空节点,根据偏差量,计算运动距离和运动时间,动画播放以后,更新节点数组的信息;
7. 遍历矩阵上方的新增节点,按照 6 中类似的操作播放掉落动画;
实现算法
首先,是做选择节点的消除操作,比如下图,是我选择的节点链,为了便于讲解,本文会把显示缩小 0.5 倍进行显示,后文中图类似。
通过上一步记录的选择节点链,进行消除,消除以后,显示的就是下图效果(每次游戏生成的随机数是不一样的,所以每个图的数字对不上,但是位置都是固定的几个位置,看的时候,需要注意)。
消除格子以后,就需要额外的补齐,消除了几个,就在屏幕上方补充几个,补充的时候,需要根据补充的有多少,注意 Y 轴显示位置,显示出来的效果就是下图所示。
接下来,就是做动画了,动画的思路,主要是计算每个格子,从上方掉落到下方,需要跨越的间隔,在统计的时候,从屏幕下方往屏幕上方开始做动画,有利于动画的控制。而动画,分为 2 部分,原屏幕中的和新增加的节点。
先进行原节点的动画控制,按照单元格,各自做自己的动画,同时播放,就会出现整体掉落的效果。
接着,就是上方新增的节点,播放动画,实现方式类似上一步的动画控制,连在一起的实现效果就是下图所示。
最后,对显示的部分,做遮罩处理,只显示想要显示的区域,就完成了该部分内容了。
思路说明
由于还在做,没有完全开发完,代码随时可能会修改,所以本游戏的后续文章中,尽量讲解思路,不贴代码,以免看的时候稀里糊涂的,产生误解,等游戏完全做完以后,再放开代码,如果感兴趣,欢迎关注。
游戏介绍
完整的游戏尚未做完,具体玩法是,屏幕上会随机一个数字,玩家通过选择节点链,若节点链上所有数字之和等于随机的数字,则得分,否则失败。后续更新,将会陆续分享