上节课完成了一个24点的游戏，基本了解了使用情况JavaScript如何编写游戏的基本要素。

接下来的几节课，完成更复杂的网页游戏:连连看。

编游戏，先玩游戏

如果没有玩过这个游戏的学生，需要先尝试玩这个游戏，了解游戏的基本规则。

打开浏览器，进入网站：

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

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

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

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

连接两张图片的方法是选择以下图片：

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

例如，上面消除的两张图片的连接方式是直线连接。

以下以上两张相同的图片：

可见消失了，这两张图片的连接方式是转两个直角弯连接。

消除两张图片：

然后你可以继续消失。如果两张图片转动直角弯连接，也可以消除。

游戏的每个关卡都会倒计时，时间到了，没有完成关卡，游戏就结束了。

游戏的另一个功能是生命值。如果游戏在某种情况下无法找到连接，它将消耗一条生命。该程序将重新安排剩余图片，以便游戏能够继续下去。如果所有的生命都被消耗掉了，那么游戏的结果就会结束。如果通过一个级别，则生命值将增加1。

游戏的另一个功能是暂停。暂停时，倒计时将暂停，但图片不会显示。取消暂停后，继续倒计时并继续玩。

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

请尽量完成游戏，尽可能多地玩几关，熟悉游戏规则来编写和开发游戏。

游戏功能和界面设计

上面已经说明了游戏要实现的功能，以完全模仿所有功能。

这个游戏有9个层次。每个层次的区别在于，一个是同一图片的总数平均值从大到小，另一个是连接后剩余图片的移动方向。具体移动方向如下：

第一关:不移动

第二关：向下移动

第三关：向上移动

第四关：向左移动

第五关：向右移动

第六关:从中间到左右分开移动

第七关:从中间向上移动

第八关:从中间到上下左右分开移动

第九关:从上下左右移动

至于界面设计，也可以参考上面的界面，但是简单也没关系。先保证功能正常，再慢慢修改美化界面。

一般界面样式如下：

程序设计理念

首先定义游戏的一些常量。

从左到右有14张图，从上到下有10张图，每张图都是正方形，边长40px。边框宽度为3px。

总共有9个关卡，最初有6个生命，每个关卡的时间暂定为200秒。当然也可以增加难度，关卡时间越短。

此外，还应明确每个关中不同图片类型的数量。图片类型越少，每个类型的图片数量越多，就越容易。相反，它就越困难。

据大致统计，第一关出现的图片种类30种，图片总数140种，平均每张图片出现4.6种，当然是随机数控制的。

假设每关增加4种图片类型，第9关图片类型为62种，平均每张图片出现2.25种，难度可能还可以。当然，整个程序也可以通过测试来测试，然后调整难度参数。

考虑使用所有图片png格式，准备完全透明的图片，如果消失的图片被完全透明的图片所取代。

焦点选择效果，改变图片边框css实现风格。类似于上节课24点的焦点效果。

如果两张图片相同且符合连接条件，则显示一条连接线，连接线和两张图片在0.5秒后消失。

根据规则，连接线最多只能有两个直角角，连接线中的单元格必须是空的。连接线允许在棋盘外使用空单元格。

因此，连连看的连接线最多有四种形式：

1.直线

2.单折线

3.双折S线

4.双折回线

如下图所示：

以左上角为原点，坐标为(x,y)，横向为x，纵向为y。

同时，为了便于计算，格子外还占据了坐标位置。

判断两点能否连接的函数最重要的算法是依次判断这四种情况能否连接。

首先，判断两点是否在一条线上。如果是，只需判断情况1和情况4。

如果两点不在一条线上，只需要判断情况2、情况3和情况4。

第一种直线判断很简单，就是2点之间是否都是空单元格。如下图所示:

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

第三条双折S线是所有可以形成三段直线的两个转折点，然后分解为判断三条直线。如下图所示：

第四条双折线是棋盘外的四个边缘的所有两个转折点，可以形成三条直线，然后分解为判断三条直线。如下图所示：

首先编写所有的网页显示元素和相应的样式。

接下来，编写初始化函数并使用它JavaScript产生140个图片元素。

然后随机编写图片序号函数，初始化时显示所有相应的图片。

然后编写焦点控制函数，移动焦点事件。

最后，编写判断是否连接函数。如果连接成功，编写两个方块的函数，然后编写剩余方块的移动函数。

然后编写判断是否没有可连接的方块，游戏是否结束了函数。该函数可用于提示功能。

如果没有可连接的方块，则需要编写转换剩余方块位置的函数。

同时将生命值考虑进去。

最后，编写倒计时函数和暂停功能。

在网上寻找图片素材

根据之前的设计，至少需要62张不同的图片。

在网上搜索关键词连连看图片素材包下载，找到喜欢的图片。

学哥从这里下载http://www.58pic.com/indexphp/download下载后/12573696zip文件。

将zip解开文件后，有三个文件，然后对齐swf文件继续解压缩，解开后如下:

存储这76个文件images目录下。

如果真的找不到图片，那就自己用画图程序画吧，把数字放在图片里。

然后自己创建一个透明背景的png文件的大小与下载的图片大小相同，序列号为0。

编写网页显示效果

开始编写网页显示界面，编写上述按钮和状态栏，然后编写四张图片的静态显示效果，其中一张是透明图片，设置相应的样式。

创建三份文件，linklink.html，linklink.css，linklink.js。

linklink.css代码如下：

linklink.html代码如下：

打开浏览器html查看显示效果：

可以看出，网页的基本显示效果。这里只写了四张图片来调试图片的样式。调试后，可以通过JavaScript动态生成所有图片。

使用JavaScript生成所有图片元素

编写js设置初始变量的文件已经生成了相应的数组代码。

linklink.js代码如下：

修改html文件如下：

刷新网页，查看：

可以看出，每个格子的位置产生了10行14列div元素的元素img元素。

如果修改js随机图片序号生成代码的地方:

linklink.js修改如下：

刷新网页，可以看到所有图片都变了。

下一节课将重点介绍如何根据关卡难度生成所有成对的图片序列号。