上节课完成了点击事件，基本上可以开始玩了。
这节课来编写核心的函数：判断2个相同点之间是否可以按照规则连通。


编写判断是否可连通函数


针对4种情况要分别编写函数进行判断。
首先进行判断2个点是否在一条直线上，如果是的，则需要判断情况1和情况4。
如果不在一条直线上，则需要判断情况2，情况3和情况4。
编写主体函数，将每种情况组织为函数。
linklink.js修改如下：



将4种情况的返回值先都设置为true，然后逐个函数来编写。


第1种直线判断


通过判断2个点当中的每一个点是否都是空的，如果全部都是空的则说明可以连通，否则不能连通。


linklink.js修改如下：


刷新网页，进行测试：


在任意一个图片上点击右键，打开调试窗口：


发现前面代码有错误，initPage函数没有定义，删除掉body元素的事件。
linklink.html修改如下：


重新刷新网页：


点击一个中间存在图片的在一条直线上的2个图片中的一个：


然后点击另外一个图片：


可以看到图片消除了，选中焦点消失了。
查看log语句，可以看到该函数起作用了。这是因为虽然情况1判断返回的是false，但是后面继续去判断情况4的时候，默认全部为true，所以认为是可以连接的。这是因为程序还在开发调试当中，为了集中焦点在当前函数上，为了更方便的测试，将其它函数默认为返回true。

点击不是直线的情况，消掉部分图片，然后选中预期可直线连通的2个图片的当中的一个：


然后点击另一个图片：


通过查看log语句，发现情况1判断函数返回仍然是false，不符合预期，按照逻辑判断，应该返回true才对。
认真检查代码，发现一个问题，当判断可以连接2个图片之后，图片消除的同时，没有对存储数据进行处理，就是allimg数组里面存放的还是图片的值大于0，没有将对应的位置的数据设置为0。
修改clearimg函数如下：


刷新网页，再次重复测试前面的步骤：


可以看到判断函数正确判断出来了可以连通，2个图片被消除，选中焦点消失了。
查看log语句，可以看到该函数起作用了。

然后测试不同的情况，例如同行的情况，同列的情况，右到左，下到上等等情况。


第2种单折线判断


单折线的关键点在于找到2个点的延伸的交叉点，然后判断分解为2段直线，然后调用前面编写好的直线判断函数，就能得到结果。


linklink.js修改如下：


刷新网页，进行测试，找到2个预期通过单折线不能连通的情况，点击其中一个图片：


点击另外一个图片：


查看log语句，可以看到该函数起作用了，返回的是false。

消掉部分图片，然后选中预期可单折线连通的2个图片的当中的一个：


然后点击另一个图片：


可以看到判断函数正确判断出来了可以连通，2个图片被消除，选中焦点消失了。
查看log语句，可以看到该函数起作用了，返回的是true。


第3种双折S线和第4种双折回线判断


来看一下双折S线和双折回线的定义：
双折S线是这样的：


双折回线是这样的：


通过分析可以得到一个规律，其实双折线的规律就是确定2个相关点，通过这2个相关点和选中的2个点，来组成3段直线。
如果3段直线上的所有点都是空图片，则表示2点满足连通的条件。
两种双折线的区别仅仅在于，一种是位于2点形成的矩形区域内，另一种是位于矩形区域外。
但这2种情况是可以统一起来进行判断的。
假如a点的坐标（行号，列号）是（2，2），b点的坐标是（7，10）。
按照下图所示，可以这样循环处理：


首先行数遍历，变量m从0行处理到11行，得到转折点1的坐标是（m，2），对应的另外一个转折点2的坐标就是（m，10）。
那么就可以得到3段直线，分别是直线1是（2，2）到（m，2），直线2是（m，2）到（m，10），直线3是（m，10）到（7，10）。判断这3段直线使用直线判断函数，如果都是空的则说明可以连通。
行数遍历当中，如果碰到转折点1等于a点或者转折点2等于b点，则属于单折线，前面已经判断过，忽略即可。
行数遍历完成之后，同样的进行列数遍历即可，道理相同，只是循环从纵向改为横向即可。

注意此函数被调用的地方有2处，一种情况是两个点位于一条直线上的时候，则只需要循环一个方向即可。

linklink.js修改如下：




由于所有的情况都已经编写完成，如果代码没有错误，应该可以进行完整的测试了。


测试全部连通情况


所有的判断连通函数都已经些好了，那么刷新整个网页，开始全部测试。
按照自己正式打游戏的习惯，进行连接，假如发现不是预期的情况发生，比如该连通的不连通，或者不该连通的反而连通，则需要重新调试代码，直到全部修正为止。
最后应该可以将所有的图片都消除掉。


接下来一节课，就需要处理更多的情况，例如碰到某种图片分布不存在可以连接的情况，需要特殊处理。