纯js 连连看，多套图片连连看

自己数学知识学得不多，复杂的算法对数学要求高。近来先锻炼自己的逻辑思维，琢磨这自己写个小游戏，选择了连连看。

连连看的实现有几个难点，一个一个来分析，解决。

1、判断连接的线段数不能超过3，即连线有2个转折点

我用一个数组来保存连连看图片列表，值0 表示图片已消去，大于0 表示第几张图片，游戏图片区域是8*8个格子的，数组长度设置成 10*10 ，因为连连看连线可以在游戏图片区域外。

首先判断2个图片是否可以一条直线相连，这是最简单，2个图片相同，且连线路径都没有其他图片，就相连可以消去

再判断 线段数为2的情况，即连线有1个转折点：先找到转折点，如：(x1,y1) (x2,y2) 的转折点为：(x1,y2) (x2,y1) 

判断转折点的图片已消去，且转折点 与点击的2个点都可以连接的时，这2点就可以通过此转折点连接。

稍麻烦的是连线有2个转折点的情况：先找出点击的2个点上下左右4个方向的空白点，分别保存到一个数组。遍历2个数组，只要一个数组中的任意一点和另外一个数组中的任意一点可以连接，那么点击的2个点和这2个数组中可相连的2个点可以有2个转折点相连。

2、判断死锁，程序自动解锁

有了是否能连接的判断，只需要循环剩下的点，判断是否有可以连接的2个点，没有就是死锁。程序随机交换图片，再判断是否死锁。

3、根据显示规格 8*8 10*10 分配图片

假设有8*8 =64个格子，分配12种不同图片 文件名 1。。。12.jpg

我是算法如下：

先计算平均每种图片可以有几张，如果平均数是基数，则-1.连连看的图片都是成对的

var avg =Math.floor( 64/12);

if(avg%2==1)avg--;

此时 先分配给每种图片avg张 12*4=48。12种图片，每种4张

剩下是的图片，2张2张的从 第一种开始分配。

有了这些核心逻辑，其他的就简单了。 试玩及源码：

电脑：多套图连连看游戏有4种难度和10余种图片可以选择，游戏过程中可以切换图片http://www.cyfhw.top/game/llk/

手机：多套图连连看游戏有4种难度和10余种图片可以选择，游戏过程中可以切换图片http://m.cyfhw.top/game/llk/