当前位置: > 关于睿道 > 新闻中心 > 行业动态
  • 睿道简介
  • 新闻中心
  • 园区环境
  • 联系我们
  • 【玩转IT】HTML5实现万圣节抽符游戏

    2019-10-31 来源:Neuedu东软睿道

          为庆祝万圣节来临,小孩会装扮成各种可爱的鬼怪,逐家逐户敲门索要糖果,否则就会捣蛋。同时,传说这晚,各种鬼怪也会装扮成小孩混入群众一起庆祝万圣节来临,而人类为了让鬼怪更融洽才装扮成各种鬼怪。

          今天分享一个万圣节抽灵符小游戏,希望对大家学习HTML5有帮助,文末有源码哦!

              以下是首页:                                    点击宝箱,进入第二页:                 点击“开始游戏”,进入第三页:        点击飞舞的灵符,进入下一页:

                                                 

          这个小游戏是如何实现的呢?下面,请看源码!

         第一步

         编写HTML页面,使用audio标签实现背景音乐,使用4个div实现4个页面,其中第4个页面,是通过切换背景图显示出不同灵符。默认显示第一个div,即第一个页面,其他div隐藏。

       

       

           

           

       

       

           

           

       

       

           

           

           

           

           

           

           

       

       

       


     

          第二步


          编写CSS样式,其中第一页宝箱的移动和第三页精灵的移动,都是通过CSS3动画实现的。


          第三步

          通过javascript实现页面的切换,以及第4页,不同灵符的切换。