自动补足算法是什么_消消乐类游戏！链式消除与自动补齐！

效果预览

操作方法

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

实现流程

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

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

3. 若有空节点&＃xff0c;则在最上方新填一个新的方块&＃xff1b;

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

5. 沿着 X 轴遍历完成后&＃xff0c;做自动掉落动画&＃xff1b;

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

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

实现算法

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

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

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

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

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

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

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

思路说明

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

游戏介绍

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

往期小工推荐

点击标题即可阅读