0054 发布游戏连连看到阿里云网站以及总结

上节课完成游戏连连看的所有的功能。
这节课就来进行最后的装修以及发布。

完整性测试

为了测试从第1关到第9关所有的关卡,可以修改难度参数,降低难度之后进行通关测试。

linklink.js修改如下:

3-13-1.jpg

测试的过程当中,发现一个问题,那就是如果碰到无解的情况,进行了变换之后还是无解,就会进入死循环,这是因为剩余图片变换位置函数并不太完美。
因为是按照位置相邻2个图片进行交换位置,交换之后,假设正好也是无解,则继续变换,还是2个相邻图片进行交换,那么正好又变为之前的位置了,这样就会永远变换下去,从而进入死循环了。
需要修改这里的变换函数:

linklink.js修改如下:

3-13-2.jpg

刷新网页,开始测试:

3-13-3.jpg

依次从第1关测试到第9关,直到通关:

3-13-4.jpg

注释掉相关代码恢复相关参数

全部测试完成之后,可以将相关参数调整为正常,并将所有的log语句都注释掉。
由于前面对代码的修改比较多,这里将完整的代码全部贴出来,防止大家失误。
linklink.html代码如下:

3-13-5.jpg

linklink.css代码如下:

3-13-6.jpg

3-13-7.jpg

linklink.js代码如下:

3-13-8.jpg

3-13-9.jpg

3-13-10.jpg

3-13-11.jpg

3-13-12.jpg

3-13-13.jpg

3-13-14.jpg

3-13-15.jpg

3-13-16.jpg

3-13-17.jpg

3-13-18.jpg

3-13-19.jpg

3-13-20.jpg

3-13-21.jpg

发布到阿里云网站

在本机测试完成之后,参照第2章网站发布的教程,可以将这个连连看游戏发布到阿里云网站上。
在个人简介的网站首页上增加一个链接,点击后新窗口链接到linklink.html文件。
index.html修改如下:

3-13-22.jpg

然后将以下文件都发布到网站相应的目录下:
index.html
linklink.html
linklink.css
linklink.js
images目录下的所有图片

3-13-23.jpg

发布之后,打开浏览器访问对应的域名:

3-13-24.jpg

可以看到多了一个链接,点击此链接,可以看到新窗口的内容就是游戏连连看。

3-13-25.jpg

第3章内容总结

通过学习基础的JavaScript语法, 并通过几个例子掌握JavaScript来修改网页内容和样式的方法。
然后通过2个游戏算24点和连连看,学习设计开发游戏,并将Html、CSS和JavaScript结合起来,完成一个比较复杂的动态网页。

下一节课,将开始一段新的课程,开始真正的零基础,非常适合家长带着孩子一起学编程。

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

推荐阅读更多精彩内容