上节课完成了一个算24点的游戏，基本了解了关于使用JavaScript如何编写一个游戏的基本要素。
接下来的几节课，来完成更复杂的网页游戏：连连看。


要编游戏先得会玩游戏


如果没有玩过这个游戏的同学，需要先去尝试玩一下这个游戏，了解游戏的基本规则。
打开浏览器，进入网站4399.com：


然后点击益智类的第一个链接：连连看。


然后点击左侧排行第一的“宠物连连看2.5”。


然后点击“开始游戏”。进入游戏主界面。


游戏的玩法很简单，就是找到相同的2个图片，连起来消掉，全部消掉过关。

连接2个图片的方法是先选中一个图片如下：


然后点击另外一个相同的图片，满足一定连接规则，就可以消掉了。


例如上面消掉的2个图片连接的方式是直线连接。
下面选择上面的2个相同图片：


可以看到消掉了，这2个图片连接的方式是拐了2个直角弯进行连接。
再将当中的2个图片消掉：


然后就可以继续消掉，2个图片如果是拐了1个直角弯进行连接也可以消掉。

游戏每一个关卡会进行倒计时，时间到了，没有完成关卡，则游戏结束。


游戏还有一个功能是生命值，如果游戏玩到某种状况，无法找到可以连接的情况，则会消耗一条命，程序会将剩余的图片重新排布，让游戏可以继续下去。如果全部生命都消耗光了，则游戏结果。如果过了一关，则生命值加1。

游戏还有一个功能是可以暂停，暂停的时候，倒计时会暂停，但是图片全部不显示。取消暂停，则继续倒计时，并继续可以玩。

游戏还有一个功能是可以提示，当很长时间都无法发现可以连接的情况下，为了节省时间，可以消耗一条命，让程序提示可以消掉哪2个图片。

请大家努力完成游戏，尽量多打几关，熟悉游戏规则才能编写开发出这个游戏。


游戏功能和界面设计


游戏要实现的功能上面已经说明过了，来完全模仿实现所有的功能。
这个游戏总共有9关，每一关的不同之处在于，1个是相同图片出现的总个数平均值从大变小，另一个是完成1个连接后剩余图片的移动方向。具体移动方向如下：
第1关：不移动
第2关：向下移动
第3关：向上移动
第4关：向左移动
第5关：向右移动
第6关：从中间向左右分开移动
第7关：从中间向上下分开移动
第8关：从中间向上下左右分开移动
第9关：从上下左右向中间移动

界面设计呢，也可以参考上面的界面，但是简陋一些也没关系，先保证功能正常能玩，后续再慢慢修改美化界面。
大致的界面样式是这样的：



程序设计思路


首先定义游戏的一些常量。
从左到右14个图，从上到下10个图，每个图是正方形，边长为40px。边框宽度为3px。
总共有9关，初始有6条命，每关的时间暂定都是一样的200秒。当然也可以加大难度，越往后的关卡时间越短。
另外还要明确下，每关出现的不同图片的种类的个数。图片种类数越少，则每个种类出现的图片数就越多，也就越容易。反之则越难。
大概统计一下，第1关出现的图片种类数为30种，图片总数是140个，平均每种图片出现次数为4.6个，当然是通过随机数来控制。
假设每过一关增加4种图片种类，则第9关图片种类数为62种，平均每种图片出现次数为2.25个，大概难度还可以。当然也可以完成整个程序通过测试来试验是否难度太大，然后调整难度参数即可。

所有的图片考虑采用png格式，准备一个完全透明的图片，如果消掉的图片就用完全透明图片来代替。
焦点选中效果，采用变更图片的边框的css样式来实现。类似于上节课的算24点的焦点效果一样。
两个图片相同且满足连接条件，则显示一个连接线，暂停0.5秒后连接线和2个图片都消失。
画连接线，可以使用一个canvas标签浮在图片层的上层，根据2个选中的图片获得起始和结束坐标，以及可能的中间点坐标，然后直接描画出连接线。
根据规则，连连看的连接线最多只能有2个直角拐角，并且连接线当中的单元格必须是空的。连接线允许使用棋盘外的一个空的单元格。
因此，连连看的连接线的形式最多是4种：
1.直线
2.单折线
3.双折S线
4.双折回线
分别如下图所示:


同时可以从左上角作为原点，坐标为(x,y)，横向为x，纵向为y。
同时为了计算方便，格子之外也占用一个坐标位置。

最重要的判断两点是否能连通的函数的算法，就是依次判断这4种情况是否可以连通。
首先判断两点是否在一条线上，假如是，则只需判断情况1和情况4。
假如两点不在一条线上，则只需要判断情况2和情况3和情况4。
第1种直线判断很简单，就是2点之间的是否全部是空的单元格。如下图所示：


第2种单折线，判断就是找到2点之间的延伸相交的2点作为单转折点，再分解为判断2条直线。如下图所示：


第3种双折S线，就是遍历2点之间的区域的边线的所有能组成3段直线的2个转折点，再分解为判断3条直线。如下图所示：


第4中双折回线，就是便利2点对应的棋盘外的区域的4条边的所有能组成3段直线的2个转折点，再分解为判断3条直线。如下图所示：


先编写所有的网页显示元素和对应的样式。
接下来编写初始化函数，使用JavaScript生成140个图片元素。
然后编写随机生成图片序号函数，初始化的时候显示出所有的对应图片。
然后编写焦点控制函数，移动焦点的事件。
最后编写判断是否连接函数，如果成功连接，则编写消掉2个方块的函数，然后编写剩余方块移动函数。
然后编写判断是否没有可以连接的方块了，是否游戏结束了函数。这个函数可用于提示功能。
如果没有可连接的方块，则需要编写变换剩余方块位置的函数。
同时将生命值考虑进去。
最后，编写倒计时相关函数和暂停功能。


去网上寻找图片素材


根据之前的设计，需要至少62个不同的图片。
去网上搜索关键字“连连看图片素材包下载”，找到喜欢的图片。

学哥是从这里下载的http://www.58pic.com/indexphp/download/12573696，下载后是一个zip文件。
将zip文件解开之后是3个文件，然后对swf文件继续进行解压缩，解开之后就是这样的：


将这76个文件存放到images目录下。


如果实在找不到图片，那么就自己用画图程序画吧，图片里面放上数字就好了。

然后自己创建一个透明背景的png文件，大小和下载的图片大小一样，命令为相同的规则，序号为0。


编写网页显示效果


开始编写网页显示界面，编写上面的按钮和状态栏，然后编写4个图片的静态显示效果，其中一个为透明图片，设置相应的样式。
创建3个文件，linklink.html，linklink.css，linklink.js。
linklink.css代码如下：




linklink.html代码如下：


浏览器打开这个html文件，查看显示效果：


可以看到，网页的基本的显示效果了。这里只写了4个图片，是为了调试图片的样式，调试好了之后，就可以通过JavaScript来动态生成所有的图片。


使用JavaScript生成所有图片元素


编写js文件，设置初始化变量，已经生成相应的数组的代码。
linklink.js代码如下：



修改html文件如下：


刷新网页，查看：


可以看到10行14列的每个格子的位置都生成了div元素和相应的img元素。
如果修改js代码的生成随机图片序号的地方：
linklink.js修改如下：


刷新网页，可以看到全部图片都变化了。


接下来一节课，将重点讲解如何根据关卡难度生成所有成对的图片序号。