宠物连连看2 5版攻略

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

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

  要编游戏先得会玩游戏

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

  打开浏览器,进入网站:

宠物连连看2 5版攻略

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

宠物连连看2 5版攻略

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

宠物连连看2 5版攻略

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

宠物连连看2 5版攻略

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

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

宠物连连看2 5版攻略

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

宠物连连看2 5版攻略

  例如上面消掉的2个图片连接的方式是直线连接。

  下面选择上面的2个相同图片:

宠物连连看2 5版攻略

  可以看到消掉了,这2个图片连接的方式是拐了2个直角弯进行连接。

  再将当中的2个图片消掉:

宠物连连看2 5版攻略

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

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

宠物连连看2 5版攻略

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

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

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

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

  游戏功能和界面设计

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

  这个游戏总共有9关,每一关的不同之处在于,1个是相同图片出现的总个数平均值从大变小,另一个是完成1个连接后剩余图片的移动方向。具体移动方向如下:

  第1关:不移动

  第2关:向下移动

  第3关:向上移动

  第4关:向左移动

  第5关:向右移动

  第6关:从中间向左右分开移动

  第7关:从中间向上下分开移动

  第8关:从中间向上下左右分开移动

  第9关:从上下左右向中间移动

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

  大致的界面样式是这样的:

宠物连连看2 5版攻略

  程序设计思路

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

  从左到右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.双折回线

  分别如下图所示:

宠物连连看2 5版攻略

  同时可以从左上角作为原点,坐标为(x,y),横向为x,纵向为y。

  同时为了计算方便,格子之外也占用一个坐标位置。

  最重要的判断两点是否能连通的函数的算法,就是依次判断这4种情况是否可以连通。

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

  假如两点不在一条线上,则只需要判断情况2和情况3和情况4。

  第1种直线判断很简单,就是2点之间的是否全部是空的单元格。如下图所示:

宠物连连看2 5版攻略

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

宠物连连看2 5版攻略

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

宠物连连看2 5版攻略

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

宠物连连看2 5版攻略

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

  接下来编写初始化函数,使用JavaScript生成140个图片元素。

  然后编写随机生成图片序号函数,初始化的时候显示出所有的对应图片。

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

  最后编写判断是否连接函数,如果成功连接,则编写消掉2个方块的函数,然后编写剩余方块移动函数。

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

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

  同时将生命值考虑进去。

  最后,编写倒计时相关函数和暂停功能。

  去网上寻找图片素材

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

  去网上搜索关键字“连连看图片素材包下载”,找到喜欢的图片。

  学哥是从这里下载的

  http://www.58pic.com/indexphp/download/12573696,下载后是一个zip文件。

  将zip文件解开之后是3个文件,然后对swf文件继续进行解压缩,解开之后就是这样的:

宠物连连看2 5版攻略

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

宠物连连看2 5版攻略

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

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

  编写网页显示效果

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

  创建3个文件,linklink.html,linklink.css,linklink.js。

  linklink.css代码如下:

宠物连连看2 5版攻略
宠物连连看2 5版攻略
宠物连连看2 5版攻略

  linklink.html代码如下:

宠物连连看2 5版攻略

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

宠物连连看2 5版攻略

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

  使用JavaScript生成所有图片元素

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

  linklink.js代码如下:

宠物连连看2 5版攻略
宠物连连看2 5版攻略

  修改html文件如下:

宠物连连看2 5版攻略

  刷新网页,查看:

宠物连连看2 5版攻略

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

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

  linklink.js修改如下:

宠物连连看2 5版攻略

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

宠物连连看2 5版攻略

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

原创文章,作者:街游网,如若转载,请注明出处:https://www.jiepx.net/7444.html

(0)
上一篇 08/11/2022 2:57 下午
下一篇 08/11/2022 2:59 下午

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注