锅打灰太狼游戏

最新推荐文章于 2021-09-25 19:33:05 发布

ChericeYang

最新推荐文章于 2021-09-25 19:33:05 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/cathei/article/details/81563913

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       #wrap{
           width: 320px;
           height: 400px;
           position: relative;
           background: url('img/game_bg.jpg') no-repeat;
       }
       #score{
           font-size: 24px;
           color: #fff;
           position: absolute;
           left: 60px;
           top: -18px;
       }
       #timeImg{
           width: 100px;
           height: 16px;
           position: absolute;
           left: 63px;
           top: 66px;
           border-radius: 16px;
       }
       #start{
           width: 100%;
           font-size: 50px;
           text-align: center;
           color: orange;
           position: absolute;
           top: 180px;
           cursor: pointer;
       }
   </style>
</head>
<body>
   <div id="wrap">
       <p id="score">0</p>
       <img src="img/progress.png" id="timeImg">
       <div id="start">开始</div>
   </div>
</body>
<script src="tween.js"></script>
<script>
   //坐标数组
   var ltArr = [["98px","115px"],["20px","160px"],["188px","142px"],["16px","220px"],["102px","192px"],["200px","212px"],["30px","294px"],["120px","274px"],["208px","296px"]];

// 用来生成不断创建狼的计时器
var createTimer = null;

   // 记录页面中狼出现的位置下标数组
   var indexArr = [];
   var scoreNum = 0;

   // 开始游戏
   start.onclick = function(){
       // 隐藏开始按钮
       this.style.display = "none";
       timerFu();
       // 创建狼
       createTimer = setInterval(function(){
           createWolf();
       },1000)
   }
   // 创建狼的函数
   function createWolf(){
       var n = randomNum(0,ltArr.length);
       if (indexArr.indexOf(n) == -1) {
           // 说明本次随机的下标还没有狼
           indexArr.push(n);
       }else{
           // 如果位置已经有狼了，那么就等待下次创建重新来过
           return;
       }
       // 创建狼图片
       var wolf = new Image();
       // 生成狼的类型
       var type = wolfType(); //“x"/"h"
       // 狼图片下标
       var index = 0 ;
       // 狼出现的位置
       // var wolfLT = ltArr[n]; //"xxpx","yypx"
       wolf.style.position="absolute";
       wolf.style.left =ltArr[n][0];
       wolf.style.top = ltArr[n][1];
       // 狼点击
       wolf.onclick = function(){
           // 解决重复点击创建多个计时器，首次计时器无法关闭的问题
           wolf.onclick = null;
           // 计算得分
           if (type == "x") {
               scoreNum -= 10 ;
           }else{
               scoreNum += 10;
           }
           score.innerHTML = scoreNum ;
           // 关闭狼身上正在运行的计时器
           clearInterval(wolf.upTimer);
           clearInterval(wolf.downTimer);
           // 更换被打击的图片路径
           index = 6;
           wolf.hurtTimer = setInterval(
               function(){
                   wolf.src = "img/"+type+index+".png";
                   index++;
                   if (index>9) {
                       clearInterval(wolf.hurtTimer);
                       wolf.remove();
                       indexArr.shift();
                   }
               },100)
       }
       // 狼出现
       wolf.upTimer = setInterval(function(){
           wolf.src = "img/"+type+index+".png";
           index++;
           if (index >= 5) {
               // 关闭狼出现的计时器，打开狼下降的计时器
               clearInterval(wolf.upTimer);
               wolf.downTimer = setInterval(function(){
                   wolf.src = "img/"+type+index+".png";
                   index--;
                   if (index==0) {
                       clearInterval(wolf.downTimer);
                       // 将狼从wrap中删除
                       wolf.remove();
                       // 将此狼的位置解放，先创建的先消失
                       indexArr.shift();
                   }
               },150)
           }
       },150)
       // 将生成的狼写入wrap中
       wrap.appendChild(wolf);
   }

   // 倒计时的函数
   function timerFu(){
       // 游戏时间是1分钟=60s=60000ms
       var t=0,d=2000,b=180,c=-180;
       var timer = setInterval(function(){
           t++;
           timeImg.style.width = Tween.Linear(t,b,c,d)+"px";
           if (t>=d) {
               // 游戏结束
               clearInterval(timer);
               // 关闭创建狼的计时器
               clearInterval(createTimer);
               start.innerHTML = "GAME OVER";
               start.style.display="block";
           }
       },30)
   }

   //生成狼类型的函数
   function wolfType(){
       n = randomNum(0,100);
       if (n < 30) {
           // 小灰灰
           return "x";
       }else{
           // 灰太狼
           return "h";
       }
   }
   // 随机数函数
   function randomNum(max,min){
       return Math.floor(Math.random()*(max-min)+min);
   }
</script>
</html>