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

这节内容我们继续学习如何在两个图片之间创建连接线。在连连看游戏中一共会出现 4 种连接线。

直线：由两个点确定一条水平或者竖直的线。

单折线：由三个点确定的带有一个直角弯的线。

双折S线：由四个点确定的带有两个直角弯的线，看起来像是S型。

双折回线：由四个点确定的带有两个直角弯的线，先出去再折返回来。

我们先把连连看游戏的规则放置一边，只解决如何在游戏中创建不同的连接线。原理非常的简单：两个点能够确定一条直线。

直线就不用说了，两个点确定一条直线，只要知道了两个点的坐标位置，就可以确定直线的位置和长度。三个点的单折线怎么做呢？其实就是拆分成水平和竖直的两条直线。双折线呢？就拆分成三条直线，每两个点决定一条直线。

直接实践

理论非常的简单，我们直接去到项目里进行实践来加深理解。由于我们的项目目前还没有考虑连连看游戏的规则，所以也就没办法根据游戏的真实情况来创建不同的连线。但是没有关系，我们完全可以提前预设一些点，然后根据这些点来创建不同的连线来进行测试。

导入一个新的正方形素材，将其颜色设置为黄色，高度设置为 10，当作连接线使用。

通常游戏引擎都会提供画线功能，只需要提供两个点即可在两点间画一条线。微信小游戏制作工具目前并没有提供现成的画线功能，我们采用的实现方式是使用一个图片，通过设置图片的宽度来控制线的长度，通过设置图片的位置来控制线的位置，通过设置图片的旋转来控制线是水平还是竖直的。

再导入一个按钮素材，用于测试画线功能。点击按钮后，会在预设好的位置进行画线。

接着，增加一些全局变量。

图中红线圈出的是增加的全局变量和列表。四个全局变量记录的是一条连线的起点和终点的位置坐标，“连接点的行/列号”是两个列表，我们会在这里提前设置好要连接的点的行号和列号，然后进行画线测试。

接着，来看实现的积木逻辑。

注意这里循环次数的设置，循环的次数就是创建线的数量，如果只有两个点，只需要创建一条线，循环一次即可。如果有三个点，就需要循环两次，第一第二个点确定一条线，然后第二第三个点确定一条线。

连接线的起点和终点位置根据当前的行列号进行计算即可，这个我们在第二节里已经讲过计算公式了，在此就不赘述了。

最后，再来看一下连接线上的积木逻辑。

已知一条线的起点和终点的坐标，就可以计算出其中点的位置坐标。中点的位置就是我们要设置的图片的位置。

因为所有的线只有两种状态，要么水平要么竖直，不会出现斜线，所以只需要通过判断起点和终点的 X 或 Y 的值是否相等，就能够判断出当前的线是水平还是竖直的。在确定水平和竖直之后，通过坐标位置的差值能够计算出线的长度（即图片的宽度），至于旋转角度就很简单了，水平是 0 度，竖直是 90 度。

这样我们就实现了连线的功能，最后我们前往列表中添加一些行号和列号的点，然后进行创建连线的测试。

定好一些连线点，将这些点的行列号依次填入“连接点的行/列号”列表中，然后运行游戏进行测试。

总结一下

这一节里我们学习了连接线的创建，原理很简单：两个点可以确定一条直线。对于多个点的折线情况，将其拆分成多段直线的组合。

在微信小游戏制作工具中可以使用一张图片来实现连线的效果，通过设置图片的位置，宽度和旋转角度实现在指定的两个位置上创建连接线。

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