前段时间空闲之余制作了一个基于Javascripit和HTML5的canvas面板的碰撞球连连看小游戏，游戏地址：点击IT宅桌面中的碰撞球图标即可。
连连看涉及到的算法也不是很复杂，这里我主要是分为三种情况去分析，下面逐个分析。
首先是初始化连连看数组，把所有的图片看成是一个二维数组，有图片的地方置1，没有图片的地方置0。
1、两个图片相邻的情况：
这种情况下，我们只需要把两个图片的x坐标和y坐标分别相减并取绝对值：
A = | x1 – x2 |; B = | y1 – y2 |;
只要发现计算的A，B两个值中，有一个为0，一个为1，即表示这两个图片是相邻的。
2、两条连线的情况：
如上图这种情况为图片对角，其中根据对角线的不同又可以分为两种情况，即左上角对右下角和右上角对左下角。其分析思路大致是一样的，只是细节的判断时方向可能不一样，这里我们就选择图中的左上角对右下角这种情况来分析。
1、首先如图所示，我们分别设左上角和右下角为A(x1,y1) B(x2,y2)点，这样我们可以找到其他的两个顶点的坐标C(x1,y2) D(x2,y1)。
2、判断CD两点是否无图片，即值是否为0，如果是则使用该点继续判断，否则放弃该点。如上图则C点无图，符合条件，转入下一步处理。
3、根据上一步获取到的点，判断该点分别与AB两点之间的连线上是否都不存在图片，如果不存在则表示连连看配对成功，否则，配对失败。如上图AC和BC两条连线上均没有图片，符合规则，所有AB两点配对成功。
3、三条连线的情况：
如上图所示，也可以具体分为两种情况考虑，我们现在先说其中的一种。
设左边的大空翼为A，右边的大空翼为B，我们先分别查找AB两点Y轴方向包括AB两点的最大的连续没有图片的位置，我们找到了如上图所示的左右两个绿色矩形框的位置。
接着在这两个矩形框中查找Y轴方向上的公有部分如图，左右两个矩形框中的白色矩形框即为Y轴上的公有部分。
我们在这个公有部分的Y轴范围分别逐个横着扫描其中的每一条连线，查看是否有其中的一条直线中没有图片，则匹配成功。上图中，我们扫描第一条直线时就发现了一条完整的没有图片的图片，即是图中中间那个绿色矩形框。这样就匹配成功了。
而至于另外一种情况，把上图作90度旋转，作类似的操作即可判断。
