美文网首页零基础学编程Web前端之路互联网科技
0054 发布游戏连连看到阿里云网站以及总结

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

作者: 学哥量化交易学习 | 来源:发表于2017-08-25 09:52 被阅读59次

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

    完整性测试

    为了测试从第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结合起来,完成一个比较复杂的动态网页。

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

    相关文章

      网友评论

        本文标题:0054 发布游戏连连看到阿里云网站以及总结

        本文链接:https://www.haomeiwen.com/subject/wwzydxtx.html