消消乐类游戏！链式消除与自动补齐！

效果预览

操作方法

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

实现流程

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

2. 沿着 Y 轴正向纵向从左到右遍历（即时掉落反方向）；

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

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

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

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

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

实现算法

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

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

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

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

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

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

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

思路说明

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

游戏介绍

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

往期小工推荐  

点击标题即可阅读

第一篇丨链式选择和取消！