0052 游戏连连看编写剩余方块移动以及是否结束

前一节课编写好了判断2个相同图片是否可以连接的函数,相当于核心的功能已经具备了。
这节课来完成其它辅助的功能,让游戏可以更顺利的进行下去。

编写剩余方块移动函数

按照之前的设计,每一关的不同主要是靠移动剩余方块的位置来区分。
具体移动方向如下:
第1关:不移动
第2关:向下移动
第3关:向上移动
第4关:向左移动
第5关:向右移动
第6关:从中间向左右分开移动
第7关:从中间向上下分开移动
第8关:从中间向上下左右分开移动
第9关:从上下左右向中间移动

第1关最简单,无需移动。
第2关到第5关都是整体移动,假如2个图片消除之后,就要调用一个移动函数,移动函数当中就是根据不同的移动方向,将相对位置剩余的方块进行移动,修改allimg的存储数据即可。
后面4关也是同样的处理,仅仅需要注意按照中轴线进行区分不同的部分移动的方向不同而已。

首先来做向下移动的处理,linklink.js修改如下:

3-11-1.jpg
3-11-2.jpg

修改初始关卡为第2关:

3-11-3.jpg

刷新网页:

3-11-4.jpg

然后消除一组相同图片:

3-11-5.jpg

可以看到,消除的2个图片上方的所有图片都整体向下移动了一格。
然后消除更多组的图片:

3-11-6.jpg

可以看到,整体是从上向下移动的效果。

接下来,按照这个思路,将剩余的7种情况编写完成:

3-11-7.jpg

3-11-8.jpg

3-11-9.jpg

3-11-10.jpg

3-11-11.jpg

3-11-12.jpg

3-11-13.jpg

然后依次修改关卡初始值来测试每一关是否能够正常移动。

判断是否存在可连通的情况

如果当游戏进行到某种情况时,可能产生一种情况,由于互相锁住路线,导致所有的图片都无法连接了,这时候游戏就无法继续进行了,那么这个时候程序必须能够自动判断出这种情况并作出处理。处理的方式要么是游戏结束,要么是将剩余方块变化位置,同时变换位置的时候也要保证变换完成之后必须存在至少一组可连接的图片,否则仍然进行不下去。

要判断是否所有的相同图片组合都不能进行连接了,方法可以采用遍历所有组合的办法,也就是按位置次序遍历所有的图片,然后再次遍历该位置后面所有相同的图片,确定2个相同图片后,调用前一节课的判断是否连通的函数,假如可以连通则认为存在一种可能,就可以函数返回true,如果遍历完所有的图片组合都没有找到一组,则函数返回false。

为了调试看log,将其它函数中的console.log语句都注释掉,并且调整为测试第1关。

linklink.js修改如下:

3-11-14.jpg

3-11-15.jpg

3-11-16.jpg

3-11-17.jpg

3-11-18.jpg

3-11-19.jpg

刷新网页,进行测试:

3-11-20.jpg

消掉一组图片并且移动之后,console会显示有解还是无解,显示判断结果:

3-11-21.jpg

不停的消除,直到发现有无法连接的情况:

3-11-22.jpg

然后人工进行逐个检查,确认确实是没有可连接的情况了,才能证明函数正确无误。

编写无解情况下的方块位置变换函数

当存在无解的时候,就需要对剩余的方块位置进行变换,确保游戏可以继续进行下去,同时变换位置的时候也要保证变换完成之后必须存在至少一组可连接的图片。
变化位置,可以采取下面的步骤方法,达到随机变换的目的。
从前往后,从上往下,将相邻2个有图片的地方的图片进行交换。

linklink.js修改如下:

3-11-23.jpg

3-11-24.jpg

为了方便测试,可以调整初值参数如下:

3-11-25.jpg

消除图片,直到即将出现出现无解的情况:

3-11-26.jpg

然后消除最后一组图片,看看程序是否正常进行了变换:

3-11-27.jpg

可以看到图片位置前后相邻进行了交换,并且至少存在一组可以连接的图片了。

判断是否游戏结束和增加过关功能

前面的函数都写好之后,就可以将生命值的因素考虑进去了。
首先判断是否全部消除了,是的话则过关,增加关卡数值,重新初始化所有图片,并将生命值加1。
否则没有过关,则判断当出现无解的时候,则判断如果生命值还有,则可以变换位置,如果生命值为0了,则游戏结束。

linklink.js修改如下:

3-11-28.jpg

3-11-29.jpg

3-11-30.jpg

将难度调高一些,生命值调少一些,让测试可以方便一点:

3-11-31.jpg

刷新网页,进行测试:

3-11-32.jpg

然后测试,消耗掉1个生命值:

3-11-33.jpg

再消耗掉1个生命值:

3-11-34.jpg

当再次无解的时候:

3-11-35.jpg

可以看到游戏结束了,点击确定,可以看到游戏图片全部清空了,并且弹出alert,可以重新开始游戏。

3-11-36.jpg

这样就完成了一个关卡之内如果出现无解的时候可以让游戏继续下去的功能。
然后将生命值调整为正常,并且将第一关的难度值调整为正常:

3-11-37.jpg

然后刷新网页开始正常游戏,测试当全部消除完成之后,游戏是否可以进入第2关。
消除到最后一组的时候:

3-11-38.jpg

消除完成之后:

3-11-39.jpg

点击确定按钮,可以看到关卡进入了下一关:

3-11-40.jpg

消除2组图片,可以看到剩余图片向下移动了。

3-11-41.jpg

可以看到网页内存储的JavaScript变量level和life的值都已经变化了,但还没有体现到网页的显示文字上面,下节课就来完成这个效果,以及增加计时功能、暂停功能和提示功能。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,552评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,666评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,519评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,180评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,205评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,344评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,781评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,449评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,635评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,217评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,775评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2 341

推荐阅读更多精彩内容