无聊时做的一个简易的WEB版连连看

这几天写毕业论文写的实在烦闷，想起来有次面试问我连连看中判断是否相消的算法，那时根本不知道怎么回事，直接被鄙视，后来才知道原来是编程之美里面的题，后悔的一塌糊涂，突然萌生了写个连连看的想法。

这次写的连连看主要应该包括随机生成格子和判断是否相消两部分，其实还应该有一个是判断是死局，也就是判断是否存在可以相消的格子，这两天太懒了，下次在写。

首先是随机数的生成，每次生成两个随机位置放随机生成的图案一样的格子，要保证每次生成的两个位置是原来没有初始化过的。这里有个小的技巧，想象手里13张扑克牌，第一次抽出一张，将抽出的这张与最后一张交换，第二次从前12张抽出一张，与第12张交换，持续这个过程，就可以生成一个序列，保证每次抽出的牌都是以前没有抽到过的，随机生成格子就是基于这样一个小技巧。

然后就是判断相消的算法了，不知道的时候觉得很难，看了编程之美真是恍然大悟，还是基础不行，平时玩的太多，看书太少。这个算法类似与图的最短路径算法（忘了叫什么名字了，囧），那个算法中，第一次从源节点出发，找1步可以到的节点，得出一个集合，设为U1，从U1出发，找两步可以到达的节点，得出U2，类似这样下去，直到找到目标节点，或者遍历完整个图。这里也是类似的做法，只不过是将一步，两步改成可以直接到的，拐一个弯能到的，拐两个弯能到的，如果目标节点最后出现在前面的集合里面，就说明是可以相消的。

 

再后面就是具体的实现了，是用jquery写的，这里存储用的是Object数组，相当于一个Map，key是节点所在的位置，value是前一个节点的位置，相当于value所在的节点可以不拐弯直接连到value所在节点，这样，通过当前节点的key得到它的value，这个value就是前一个节点的key，这样向前找，就可以找到源节点，就得到了从源节点到目标节点的一个路径。

 

剩下的就是一些显示的问题了，比如一般的连连看，可以相消的情况，一般会有几条线画出源节点到目标节点的路径，由于是新学的jquery，不知道有没有画线的函数，就直接用几个div，把路径画出来了，要注意一下这些div要将position设置为absolute，不然会打乱原来的布局。其他的就是一些css和html的东西了，只是想做个简易的，用数字表示格子的种类。

 

写完了才发现原来csdn的博客好像不能传附件，那就不传了，本身就是新手，就不献丑了，欢迎高手拍砖。