js实现Tomcat游戏

最新推荐文章于 2022-02-16 22:43:17 发布

xqn-猫的树

最新推荐文章于 2022-02-16 22:43:17 发布

阅读量324

点赞数

分类专栏： javascript 文章标签： Javascript setInterval clearInterval playGame

本文链接：https://blog.csdn.net/qq_36838562/article/details/72566827

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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.οnlοad=function(){
//     点击相应按钮,播放相应图片。动画名称，图片总数
                   document.getElementById("cymbal").οnclick=function(){
                       startAnimation("cymbal",12);
                   }
                   document.getElementById("eat").οnclick=function(){
                       startAnimation("drink",81);
                   }
                   document.getElementById("drink").οnclick=function(){
                       startAnimation("eat",40);
                   }
                   document.getElementById("fart").οnclick=function(){
                       startAnimation("fart",28);
                   }
                   document.getElementById("pie").οnclick=function(){
                       startAnimation("pie",24);
                   }
                   document.getElementById("scratch").οnclick=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>

xqn-猫的树

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现Tomcat游戏

*{ padding: 0; margin: 0; } body,html{ width:100%; height:100%; } #cat{ position: absolute; width: 100%; height: 100%; } img{ position:
复制链接

扫一扫