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

我们用连续三节内容，实现了连连看游戏的所有连线规则，如何创建连接线也已经学过了（忘了的可以去这里复习），现在是时候将满足要求的图片连起来了。

如图，选择两张图片后，如果两张图片满足任意一种连线规则，将两张图片连起来，然后消除。

直接实践

这一节没有理论，我们直接去到项目里实践。

先简单回顾一下连接线的创建，使用两个列表记录连接点的行列号，然后依次取出列表中的两个点，使用一个正方形的图片通过调整图片宽度，位置和旋转角度绘制连线。要绘制连线必须要知道连接点，直线需要两个点，单折线需要三个点，双折线需要四个点。对于不同的连线，我们只要将连接点记录到列表中，就可以画出对应的连线了。

首先，调整一下创建连接线的逻辑。之前为了方便测试，我们将创建连接线的逻辑放在一个按钮上。

将连接线的创建逻辑移动到“连接线”精灵上，增加两个通知，一个用于绘制连接线，一个用户删除连接线。

接着删除之前添加到“连接点行/列号”列表中的数据。之前为了测试我们增加了固定的数据，现在我们要根据玩家的选择设置连接点数据，所以要将其清空。

接着，看“连线判断处理”上的逻辑修改。

在之前逻辑的基础上，主要增加了绘制并删除连接线的逻辑。对于直线来说只需要记录两个连接点，图中使用的“设置连接点行列号”是一个函数，这个我们稍后会讲。单折线和双折线的连接点在哪里设置呢？在它们的函数中。

单折线修改后的积木逻辑：

双折线修改后的积木逻辑：

最后，再来看一下“设置连接点行列号”的积木逻辑。

先想一下为什么这里记录连接点行列号的时候，要减 1 呢？

因为我们在逻辑中使用的“行号”和“列号”指的是图片在数据表格中的行列号，数据表格比图片的布局多出了两行两列。在绘制连接线的时候，我们计算的是以图片布局为基础的位置，所以需要将数据表格的行列号，转换成图片布局的行列号。转换很简单，行号和列号分别减一即可。如果不好理解的话，看一下上方的图片左上角第一个蓝色的方块，它在数据表格中位于第二行第二列，它在图片布局中位于第一行第一列。

以上就是用线将图片连起来的所有实现了。

最后，再将“连线判断处理”的积木逻辑做一下优化，因为绘制连接线到消除图片的积木逻辑是一样的，可以复用。

创建一个“连接并消除图片”的新函数，把这段“绘制连接线，删除图片，删除连接线，重置选中图片索引”的积木放到函数中。

最终，连接判断处理的完整积木逻辑如下：

最后，预览一下游戏，检查各种连线是否正确。

至此，我们的连连看游戏已经完成了 80% 了，它已经算是一个有模有样的游戏 demo 了，你已经可以在手机上把玩它了。

下一节，我们将会学习如何判定游戏是否结束，毕竟一个游戏要有始有终才行。

欢迎关注我的微信公众号【小蚂蚁教你做游戏】，可领取原创的游戏开发学习路线和教程资料合集。