宠物连连看2.6版(宠物连连看3.0精装版)

连连看指的是一款游戏

在我印象中，一向对游戏很不感冒的母亲只对两个游戏十分着迷过，一款是Windows自带的《蜘蛛纸牌》，还有一款就是《连连看》。

我还记得她总是在晚饭前玩上一把，晚饭后再在电脑前玩上两个小时。打开电脑就是连连看，对于当时的她来说，是非常精当确切的描述。

《连连看3》

不仅是我的母亲，当时全中国都有一场“连连看”热潮。

2004年10月21日的北京科技报中，一篇题为《卡通迷迷上了连连看》的文章描述了这样一个场景：

“小刘是我们办公室年龄最小的丫头，别看在客户面前一本正经的样子，平时却是个零食不离手、漫画看不停的准小孩。就拿‘连连看’让她玩玩，迪士尼明星、篮球飞人、口袋妖怪、哆啦A梦等几十个著名的卡通人物图片的大拼图，相信最能讨小刘这样天真可爱型的女生欢心了。

不过要真玩好，可不简单。你需要选择一对相同的图案连线，呈现的路径不超过两次转弯，符合规定则消除，那么就可以得分了……

目前，连连看可是最流行的办公室游戏，以至于有人说：如果有天当你看到一位漂亮的办公室小姐在埋头苦干，千万不要以为她在忙老板吩咐的活，有可能在机器上玩连连看呢！”

上图最后一行的皮卡丘就无法和倒数第三行最右侧的皮卡丘链接，因为有三次转弯

这篇报道简明扼要地说明了连连看的玩法：找出一对相同图案，使它们之间连线的转折不超过两次，消除它们，得分。

简单、轻松、快速、富有乐趣成为了连连看的代名词。得益于这样的玩法，它不仅在年轻人中获得追捧，也获得了中老年人群的青睐。同年11月10日，温州晚报也发表了一篇《连连看成网络新宠》的文章：

“连连看”这种乍一看显得幼稚，但极富网络对战乐趣的小游戏，在温州人尤其是年轻姑娘快速膨胀的“网络游戏依赖症”中，迅速超越了泡泡堂和碰碰球等网游新锐，甚至占据了不少中老年人的业余时间。

举个例子，一个典型的五口之家，如果装了宽带，奶奶喜欢玩麻将、爷爷喜欢玩单机版连连看，妈妈会上茶苑打麻将、爸爸则爱摸几把双扣，女儿一放学，就会抢过电脑玩QQ连连看，如果是儿子的话就沉迷于类似《传奇3》之类的网络MUD。这种模式，在拥有宽带的温州人家庭中所占的比例相当高。

报道同时还推测了“连连看”玩法的来历：

“其实，‘连连看’应该脱胎于10年前的投币台式机中‘中国龙’一类的游戏，当时这类游戏由于背景图片多为半裸美女图片而常搞‘地下活动’。”

报道中的“中国龙”，按照《连连看》开发者的说法，指的其实就是游戏《四川省》。

在连连看的官方网站llk.cn上，还可以查到制作者们对游戏的介绍。

在官网中，开发者陈一进和简诚志将《连连看2》称为第一个流行起来的连连看，并说明游戏改编自《四川省》

连连看官网介绍

《四川省》是一个游戏系列，初代由台湾智冠科技于1990年发行。

台湾游戏界有“南智冠，北精讯”的说法，除了售卖软盘游戏，智冠也推出过游戏杂志《软体世界》。在1990年4月8号出刊的《软体世界》第14-15页，杂志就介绍了初代《四川省》游戏。

在系列2代的启动界面，带有智冠和软体世界的标志：

1990年，智冠成立已有七年之久，但是距离他们发布第一款自研单机游戏《三国演义》还有一年的时间，《笑傲江湖》《金庸群侠传》更是后话。而1989年4月创刊的《软体世界》也才刚刚过完它的一周岁生日。刚刚脱离精讯，后来变成“南智冠，北大宇”的DOMO小组将在10月推出他们的《轩辕剑一》。

《四川省》并不是由智冠研发，而是由名为Dragon Team Studio的开发组制作，同一制作组在Dos平台上还开发了《四川省》的后两代作品。

启动界面左下角空余Dragon Team Studio的字样

从游戏本身来看，《四川省》已经具备了连连看的基础玩法，除了封面是以四川省地图作为划分游戏关卡，它本质上和连连看几乎没有区别。

以川渝地图作为游戏主舞台的《四川省》

这款游戏以极具诱惑力的色系图片为桌布，在桌布之上铺上已被翻开的麻将，麻将被排列成八边形。玩家需要将任意一对连线距离不超过两个转弯的麻将链接起来，消除它，并获得得分。除此之外，当全部的麻将被消除时，整张桌布也将呈现在玩家面前，作为“不可言说的额外奖励”。

游戏截图

在基础玩法之上，《四川省》还加入了一些额外法术。

其中，消牌大法可以任意链接一对牌，易位大法可以将两张牌转换位置，霹雳雷电会将同一纵列的牌全部消除。移位大法则可以将牌移动到屏幕上的随机位置。

加入这些法术之后，整个《四川省》的难度就下降了许多，在玩家绞尽脑汁也想不出下一步的解法时，还可以求助于它们。这也让这款游戏变得更加休闲，更容易上手。

如果再往前追溯的话，智冠版《四川省》游戏来源于日本的同名街机。而整个“四川省”玩法脱胎于Brodie Lockard在1981年制作的连连看游戏。五年之后，动视也推出过名为《上海》的类连连看游戏。再往前，它们的祖师爷能推导到一种单人游玩的棋牌。

说回连连看，《四川省》中的擦边球内容被后来的《连连看》刨除。《连连看》将麻将转化成更为当时年轻人喜爱的“口袋妖怪”形象，八边形的桌布也变成了正方形，这样玩家在计算路径时会更为方便。在继承了成熟的游戏系统基础上，连连看的关卡特色在于不同关卡中，消失的牌的方向是不一样的。这种设计进一步提升了可玩性。所有这些让《连连看》一炮而红。

2002年，陈一进制作的《连连看2》进入大陆。随后以一年一个版本的速度迭代完善。老玩家们特别熟悉的《连连看3》由简诚志和陈一进制作，到2004年，朱俊和简诚志的《连连看4》发布时，已经很少会有人把它和《四川省》联系起来了。两年后，朱俊成立了“上海步天软件有限公司“，负责运营连连看网站和游戏软件，同时也代理了一批和游戏搭不着边的财务软件。

连连看成为了一类游戏

从一开始，《连连看》似乎就和商业沾不上边。

到《连连看4》为止，它一直是在官网免费提供。在网络上开始出现一些冒名带插件的版本之后，作者甚至在官网上注明已发行的版本，并请大家在官网下载。

连连看官网展示它通过安全软件的检测

除了官方的、与冒名带插件的版本以外，最知名的连连看可能是腾讯QQ游戏大厅版。

2004年的国内游戏市场完全不是今天的局面。网游领域有史玉柱的巨人和陈天桥的盛大，休闲领域则有联众棋牌。当时的腾讯还远远没有今天的体量，其公司内部也正在进行第二次转型的筹备。

在他们代理发行的第一款网游《凯旋》失败后， 马化腾重新组建了游戏部，收拢了《凯旋》游戏组、增值开发部的棋牌小组和一些运营人员，新的游戏部被命名为“腾讯互动娱乐事业部”，进军棋牌游戏市场。

在新开发人员强势推进下，原本只有五款游戏的QQ游戏大厅被彻底重写，增加了游戏门类，强化与QQ的绑定体系，加入QQ秀和一些其他的关联功能。

连连看作为新加入的游戏，也在2004年9月1日上线，被划在了“休闲游戏”分类下，可它本身却并不休闲。

QQ游戏大厅官网内的连连看截图

QQ游戏大厅版本的相比原始版本的连连看，玩家更难估测可能的路径，随机性更强，游戏初期需要花更多的时间思考，而后期剩下少数牌后，则需要比拼手速。游戏中还有陷害其他对手的道具，例如让对手的牌面冻结变得无法点击，或者是让对手的屏幕暂时黑屏只能靠记忆进行点击。迥异的游戏节奏让玩家体验也变得大相径庭。

此外，如果你是QQ游戏蓝钻，你还可以获得额外的服装和道具加成、聊天商城也有售卖可以在等待时发送的表情等物件，总的来说，各方面都是当时十足的“QQ味”。

到2004年年底，腾讯棋牌同时在线人数突破100万。网络上借助连连看的东风，兴起了各类“宠物连连看”“蝴蝶连连看”“花花连连看”，换皮游戏层出不穷。

单机版连连看则显得有些“后知后觉”，《连连看4》在2004年推出后沉寂了4年之久。《连连看5》在2008年11月22日发布，并一直持续更新到2010年6月。《连连看5》中首次加入了主题模式和格子广告两种方式，尝试进行商业变现。

主界面下方的展示区就是格子广告

360和JJ都曾以主题合作的方式投放过广告

总体来看，单机版连连看的广告投放比较克制，也相对容易被玩家接受和理解。开发者甚至在官网中写下了自己的使命、信念，以及“拒绝任何恶评插件、弹窗、修改首页等损害玩家利益的商业合作”的价值观。

气节

然而在2010年代，连连看已经逐渐让位于《开心农场》《抢车位》等SNS社区型游戏，它们成为了这个浪潮中的下一个热点。

连连看成为了一群人的游戏

2020年，《四川省》已发布整整30年，距离《连连看3》发布也已经过去了17年，最新版本的连连看已经变成了十年前的老游戏。

回看连连看的官网，很多链接已经不能使用，或者指向了花花绿绿的博彩页面。

官网最后更新，请大家指教的“我是白骨精”主题

那么，还有人在玩连连看吗？

答案当然是有，虽然具体人数无法统计，但仍然有人在玩。证据就是那些在网络上零碎的玩家留言。

而我唯一能确定还在玩的人，是我的妈妈。

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

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

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

打开浏览器，进入网站：

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

然后点击左侧排行第一的“宠物连连看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个图片都消失。

根据规则，连连看的连接线最多只能有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来动态生成所有的图片。

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

linklink.js代码如下：

修改html文件如下：

刷新网页，查看：

可以看到10行14列的每个格子的位置都生成了div元素和相应的img元素。

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

linklink.js修改如下：

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

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