您的位置：首页 > 运维架构 > Tomcat

js实现Tomcat游戏

2017-05-19 23:17 267 查看

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style>

   *{

    padding: 0;

    margin: 0;

   }

   body,html{

    width:100%;

    height:100%;

   }

   #cat{

    position: absolute;

    width: 100%;

    height: 100%;

   }

   img{

    position: absolute;

    width:50px;

   }

   #cymbal{



    left: 5%;

    bottom: 40%;



   }

   #eat{

    left: 5%;

    bottom:20%

   }

   #drink{

    left: 5%;

    bottom: 30%;

   }

   #fart{right: 5%;bottom: 40%;}

   #pie{right: 5%;bottom: 30%;}

   #scratch{right: 5%;bottom: 20%;}

  </style>

</head>

<body>

      <img id="cat" src="img/angry/angry_00.jpg"/>

   

   <img id="cymbal" src="img/cymbal/cymbal.png">

   <img id="eat" src="img/eat/eat.png">

   <img id="drink" src="img/drink/drink.png">

   <img id="pie" src="img/pie/pie.png">

   <img id="fart" src="img/fart/fart.png">

   <img id="scratch" src="img/scratch/scratch.png">

   <script>

   var timer;

    window.onload=function(){

//     点击相应按钮,播放相应图片。动画名称，图片总数

                   document.getElementById("cymbal").onclick=function(){

                       startAnimation("cymbal",12);

                   }

                   document.getElementById("eat").onclick=function(){

                       startAnimation("drink",81);

                   }

                   document.getElementById("drink").onclick=function(){

                       startAnimation("eat",40);

                   }

                   document.getElementById("fart").onclick=function(){

                       startAnimation("fart",28);

                   }

                   document.getElementById("pie").onclick=function(){

                       startAnimation("pie",24);

                   }

                   document.getElementById("scratch").onclick=function(){

                       startAnimation("scratch",56);

                   }

    }

    //播放动画的方法，动画名称和图片总数

    function startAnimation(name,count){

     clearInterval(timer);

     var index=0;

     var img=document.getElementById("cat");

     timer=setInterval(function(){

      //判断是否可以继续播放

      if(++index<count){

       img.src=getImageName(name,index);

      }else{

       //没有可以播放的图片，清楚定时器

       clearInterval(timer);

      }

     },80);

    }





    //图片路径

    //根据动画名和图片索引返回图片名

    function getImageName(name,index){

     //img/angry/angry_00.jpg

     return "img/"+name+"/"+name+"_"+getIndex(index)+".jpg" ;

    }











    //实现02功能

    function getIndex(index){

     //若小于10，拼接一个0

     if(index<10){

      return "0"+index;

     }else{

      return index;

     }

    }

   </script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Javascript setInterval clearInterval playGame

相关文章推荐

新的分享

章节导航