html5小游戏源码_【玩转IT】HTML5实现万圣节抽符游戏

不给糖就捣乱

- Happy Halloween -

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

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

以下是首页：

点击宝箱之后，进入第二页：

点击“开始游戏”，进入第三页：

点击空中飞舞的灵符，进入下一页：

这个小游戏是如何实现的呢？下面，请看源码！

第一步

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

向上滑动阅览

       

       

       

       

       

       

       

       

       

       

       

第二步

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

向上滑动阅览

html,body,#page1,#page2,#page3,#page4

{

width:100%;

height: 100%;

}

     #page1

     {

        background-image: url(img/halloween1.jpg);

        background-repeat: no-repeat;

        background-size: cover;

     }

     #title

     {

     position:fixed;

     left:300px;

     top:50px;

     animation: mymove01 3s;

     }

     @keyframes mymove01

     {

     0%

     {

     opacity:0;

     }

     100%

     {

     opacity:1;

     }

     }

     #box

     {

     position:fixed;

     left:300px;

     bottom:250px;

     animation: mymove02 1s infinite;

     }

     @keyframes mymove02

     {

     0%

     {

     left:300px;

     }

     100%

     {

     left:320px;

     }

     }

     #page2

     {

        background-image: url(img/halloween2.jpg);

        background-repeat: no-repeat;

        background-size: cover;

        display: none;

     }

     #pumpkin

     {

     position:fixed;

     left:280px;

     top:50px;

     }

     #startGame

     {

     position:fixed;

     left:380px;

     bottom:250px;

     }

     #page3

     {

     background-image: url(img/halloweenMain.jpg);

        background-repeat: no-repeat;

        background-size: cover;

         display: none;

     }

     #charm01

     {

     position:fixed;

     animation: movecharm01 5s infinite;

     }

      @keyframes movecharm01

      {

           0%

           { left:50px;

            top:100px;

           }

           30%

           {

            left:50px;

            top:200px;

           }

           60%

           {

            left:100px;

            top:150px;

           }

           100%

           {

            left:50px;

            top:100px;

           }

      }

      #charm02

      {

      position:fixed;

     animation: movecharm02 10s infinite;

      }

       #charm03

      {

      position:fixed;

     animation: movecharm03 15s infinite;

      }

       #charm04

      {

      position:fixed;

     animation: movecharm04 10s infinite;

      }

       #charm05

      {

      position:fixed;

     animation: movecharm05 5s infinite;

      }

       #charm06

      {

      position:fixed;

     animation: movecharm06 10s infinite;

      }

       #charm07

      {

      position:fixed;

      right:50px;

      bottom:300px;

     animation: movecharm07 3s infinite;

      }

      @keyframes movecharm02

      {

           0%

           { left:250px;

            top:400px;

           }

           30%

           {

            left:300px;

            top:450px;

           }

           60%

           {

            left:350px;

            top:450px;

           }

           100%

           {

            left:250px;

            top:400px;

           }

      }

       @keyframes movecharm03

  {

0%   {left:50px;top:650px;}

50%  {left:500px;top:750px;}

100% {left:50px;top:650px;}

  }

  @keyframes movecharm04

{

0%   {left:500px;top:50px;}

10%  {left:650px;top:100px;}

50% {left:650px;top:650px;}

90% {left:650px;top:100px;}

100% {left:500px;top:50px;}

}

@keyframes movecharm05

{

0%   {left:400px;top:900px;}

50%  {left:400px;top:950px;}

100% {left:400px;top:900px;}

}

@keyframes movecharm06

{

0%   {left:300px;top:800px;}

    50%  {left:300px;top:1200px;}

100% {left:300px;top:800px;}

}

@keyframes movecharm07

{

0%   {width:100px;height:100px;}

100% {width:20px;height:20px;}

}

#page4

     {

        background-repeat: no-repeat;

        background-size: cover;

         display: none;

     }

第三步

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

向上滑动阅览

         function showpage(num)

         {

          document.getElementById("page1").style.display="none";

          document.getElementById("page2").style.display="none";

          document.getElementById("page3").style.display="none";

          document.getElementById("page4").style.display="none";

          if(num==1)

          {

           document.getElementById("page1").style.display="block";          

          }

          else if(num==2)

          {

           document.getElementById("page2").style.display="block";          

          }

          else if(num==3)

          {

           document.getElementById("page3").style.display="block";          

          }

          else if(num==4)

          {

           document.getElementById("page4").style.display="block";          

          }

         }

         function showcharm(num)

         {

          showpage(4);

          if(num == 1)

          {

           document.getElementById("page4").style.backgroundImage ="url(img/charm1.jpg)";

          }

          else if(num == 2)

          {

           document.getElementById("page4").style.backgroundImage ="url(img/charm2.jpg)";

          }

          else if(num == 3)

          {

           document.getElementById("page4").style.backgroundImage ="url(img/charm3.jpg)";

          }

          else if(num == 4)

          {

           document.getElementById("page4").style.backgroundImage ="url(img/charm4.jpg)";

          }

          else if(num == 5)

          {

           document.getElementById("page4").style.backgroundImage ="url(img/charm5.jpg)";

          }

          else if(num == 6)

          {

           document.getElementById("page4").style.backgroundImage ="url(img/charm6.jpg)";

          }

          else if(num == 7)

          {

           document.getElementById("page4").style.backgroundImage ="url(img/charm7.jpg)";

          }

         }

点击了解更多