教你用javascript做一个连连看，元旦快乐！

这几天胃痛，在家没上班，闲着没事，找了一个小游戏玩，找到了一个连连看，可是只有玩这个，太无聊了，发现这个游戏挺简单的，于是研究研究，就用javascript写了一个连连看，我把过程写给大家，希望大家能够喜欢，也希望高手能够帮忙完善，新手能够得到帮助。

最后成品代码写的仓促，没有容错，封装也不合理，只实现了核心部分，其他部分，喜欢添加的旧添加吧。

游戏界面截图：

>> 在线连连看演示

下面就开始我的教程（姑且算是教程吧，草草写点吧，时间太少，大家原谅）

以最高难度游戏级别作的分析。

第一步，大体分析

看看游戏主要包含哪些元素，发现3部分，一些成对的图片块，一个能盛图片块的方盘容器，一个能连接两个图块的线。

第二步，元素分析

图块：图块一共有32种不同的图案，每种图案4张，图块会相应鼠标的点击，图块会消失，图块有高度和宽度。

方盘：能承载128个图块，2维承载，横向16块，纵向8块，方盘可以放图块，可以打乱已有图块的位置顺序。

连线：游戏的核心，连接两块图块得中心点，最多只能折两次，不能穿透图块，连线可以通过方盘外部

第三步，抽象

有了上面的分析，把3个元素抽象成3个对象，怎么抽象的，自己动脑吧，我写的代码就是因为动脑不足，导致封装乱七八糟的。

第四部，核心算法

1，洗牌算法（很简单的算法）

把2维数组的数据推到1维数组，交换数据中位置属性，重新按照位置放置元素

2，查找路径：

其实连连看最主要的地方就是如何查找两个图块之间的一条最多只有两个折点的路径，这里的实现方法有很多种，我这里实现的是找到的方法，不是最短路径或者最优路径的方法。

根据研究你会发现，连线可以分成两部分，一部分是法线，一部分是图块投影到法线上的射线，那么，我们就可以利用这个关系，查找一条路径。

首先，设两个图块A,B，那么每个图块都有X向和Y向两条射线，那么如果存在一条Y向法线在AB的X射线公共区之间，或者存在X向法线在AB的Y射线公共区之间，那么就找到了一条路径。

没有实现的地方：（这些基本都是无关紧要了，关口可以根据洗牌的方法很容易改造出来，有兴趣你就去实现吧）计时、计分、提示、关口

部分js代码：

//记录被选择图块的信息
var selectImg = "";
var selectX = 0;
var selectY = 0;
//图块宽度和高度，用来计算画线的位置
var stepX = 41;
var stepY = 50;

//初始化棋盘,只能以oGrid命名
var oGrid = new objGrid(16,8);

/*****************************功能函数*******************************************/
//数组元素随机排序,tot设计，修改请保留
function rndArray(arr){
 var le = arr.length;
  for(var i=0; i < le; i++){
   var s = Math.floor(Math.random()*le);
   var zx = arr[i].x;
   var zy = arr[i].y;//这里不能写成z=arr[i],因为object是引用
   arr[i].x = arr[s].x;
   arr[i].y = arr[s].y;
   arr[s].x = zx;
   arr[s].y = zy;
  }
}
//数组元素随机排序
function ArrayRnd(arr,times){
 for(i = 0; i < times; i++)rndArray(arr)
}

现在开始玩吧：Lianliankan.htm 

玩另一个在线连连看（声音效果和qq游戏连连看一样）：

http://www.aspxhome.com/game/lianliankan/ 

程序打包下载：game/llk/js-Lianliankan.rar(116KB)