连线消除游戏的原理和实现

本文正在参加「金石计划」

嗨！大家好，我是会做游戏也会教你做游戏的小蚂蚁。欢迎关注微信公众号【小蚂蚁教你做游戏】，每天学点儿做游戏的知识。

嗨！大家好，我是小蚂蚁。

继三消和点消之后，我们来继续了解下一种连线消除游戏的原理和实现。连线消除和之前的两种有着很大的不同，因为它不需要自动的查找算法，连线的整个过程都是由玩家自主手动完成的。

如图，连线消除游戏的规则是这样的：从玩家按住第一个图标开始，可以沿着水平，竖直，斜方向划线，如果划到的另一个图标跟之前的图标是一样的，就连起来，可以一直连直到再没有相同的图标为止。此时玩家松手，如果连成线的图标数量大于等于三个，则这些图标就能够被消除。

在连线消除游戏中，重点有两个，一个是判断下一个划到的图标跟之前的图标是否相同，是否应纳入匹配队列，另一个是如何将这些相同的图标用线连起来。

先理论

老规矩，我们还是先看理论部分，先来解决第一个问题，如何判断下一个划到的图标跟之前的图标是否相同。

如图，中间的 6 个绿色的三角形图标是相同的，可以用一条线把它连起来。但是我们怎么才能让计算机知道它们 6 个是一样的呢？如果之前有好好学习的话，那你应该立即反应过来，数据抽象呀！

如图，每个图标都对应一个数字，我们就可以把当前的整个游戏抽象成一个包含数字的表格，判断两个图标是否一样，其实就变成了判断两个数字是否相等。

至于如何能知道玩家当前按住了哪个图标呢？网格布局呀！至于如何知道玩家手指当前划到了哪个图标呢？还是网格布局呀！不清楚的话赶紧去看看之前关于网格布局的文章补补课。

再来解决第二个问题，如何将相同的图标用一条线连接起来。

把所有相同的图标连成一条长线，其实就是在每两个相邻的图标之间连一条短线，如图，一共是 6 个相同的图标，那么共需要 5 条短线来把它们全部连接起来。

在玩家操作的过程中，我们可以将相同图标的位置存储到一个匹配列表中，连线的时候，只需要从匹配列表中依次的取出两个相邻图标的位置，然后在这两个位置之间创建一条直线即可。

至于如何消除，消除后上方的图标如何下落，系列课里之前都有讲过，不会的同学可以去前面补课，这里就不再重复讲了。

以上就是理论部分了，相比三消和点消，连线消除真的简单很多。

再实践

接下来，我们就来看一下连线消除游戏在微信小游戏制作工具中的实现吧！

首先，来看一下对于玩家操作处理的积木逻辑。

玩家手指按下：

玩家手指滑动：

玩家手指抬起：

其中有一个地方可能有的同学不太理解，就是为什么要把行列号换算成索引，有的时候又要把索引换算成行列号呢？因为换算成索引可以让我们只需要使用一个列表就可以存储一个图标位置。我们都知道行列号是一个图标的唯一标识，如果我们存储行列号的话，一个行号一个列号就得使用表格的形式，或者使用两个列表。现在我们把它换算成索引，只需要使用一个列表就够了。之前的课程中我们讲过，行列号和索引是等价的，是可以互推的，所以为了存储方便，我们就转换成索引，为了计算方便，我们就转换成行列号。

接着再来看一下图标上的匹配判断。

匹配判断很简单，整个过程是这样的：每当玩家的手指滑动到一个相邻的图标上时，就给所有的图标发送一次匹配通知，每个图标都会判断当前是否划到了自己身上，并且判断自己是否跟之前连接的图标类型相同，当同时满足这两个条件时，就把这个图标加入到匹配列表中。

以上的这些是如何找到相同的图标，并且把它们的索引记录到一个匹配元素列表中。有了这个列表，就相当于我们有了每个图标的行列位置，接下来就是依次的取出两个图标，然后用一条线将它们连接起来了。

如图，是连接线的积木逻辑，注释已经写的很清楚了。这里我们重点来看一下其中的获取两个点位置的函数，这个函数的作用是利用两个图标的索引，计算出这两个图标在屏幕上的坐标位置（x,y）。

这个函数的积木逻辑主要进行计算处理，先利用图标的索引计算出图标的行号和列号，然后再根据行列号计算出图标在屏幕上的位置坐标 (x,y），并存储在返回列表中，这里我们利用了一个局部的列表变量来存储函数计算的值，用于在后续创建连线的时候使用。

最后，我们再来看一下如何根据两个点的坐标位置，设置一条连接线。

都是一些简单的数学计算，这里就不再赘述了。之前专门写过一篇游戏开发中的数学的教程，数学知识忘光了的同学可以去【这里】学习。

连线消除的教程到此就结束了，至此，我已经写完了三消，点消，连线消的所有教程，这个坑总算是填完了，终于可以长长的舒一口气了。

消除游戏至今仍然是一个很大的品类，受众很广泛，对于个人游戏开发者来讲依然是个不错的选择。希望这些系列教程能够帮助你了解各种各样的消除游戏，如果觉得教程不错，不要忘了点赞转发，也算是对我辛勤创作的一点儿鼓励了，哈哈！