JS打地鼠特效

最新推荐文章于 2021-10-08 17:33:51 发布

_isHF

最新推荐文章于 2021-10-08 17:33:51 发布

阅读量458

点赞数

分类专栏： JS代码简单小特效

JS代码简单小特效专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   .hole{
    width: 100px;
    height: 100px;
    float: left;
    position: absolute;
    /*border: 1px solid red;*/
   }
  </style>
</head>
<body>
  <div style="width: 800px;height: 400px; background-image: url(bg.jpg);">
   <div class="hole" style="top: 35px;left: 114px;"></div>
   <div class="hole" style="top: 35px;left: 330px;"></div>
   <div class="hole" style="top: 35px;left: 550px;"></div>
   <div class="hole" style="top: 150px;left: 114px;"></div>
   <div class="hole" style="top: 150px;left: 330px;"></div>
   <div class="hole" style="top: 150px;left: 550px;"></div>
   <div class="hole" style="top: 260px;left: 114px;"></div>
   <div class="hole" style="top: 260px;left: 330px;"></div>
   <div class="hole" style="top: 260px;left: 550px;"></div>
  </div>
  <p id="score">分数：0</p>
  <p id="lv">第一关</p>
  <input type="button" value="start" />
  <input type="button" value="stop" />
  <script>
   var time1,num, i=0;
   var count=0;
   var lv=1;
   var lvS=1500;
   var holes = document.getElementsByClassName("hole");
   var scoreShow = document.getElementById("score");
   var olv = document.getElementById("lv");
   var btn = document.getElementsByTagName("input");
   btn[0].onclick = function(){
    time1 = setInterval(function(){
     if(i==10){
      pass();
      i=0;
     }else
      createMouse();
    },1800)
   }
   btn[1].onclick = function(){
    clearInterval(time1);
   }
   function createMouse(){
    var newMouse = document.createElement("img");
    num = Math.floor(Math.random()*8);
    newMouse.className = "mouse";
    newMouse.οnclick=hit;
    newMouse.src ="1.png";
    holes[num].appendChild(newMouse);
    setTimeout(function(){
     holes[num].removeChild(holes[num].lastElementChild);
    },lvS)
    i++;
   }
   function hit(){
    count+=100;
    scoreShow.innerHTML = "分数："+count;
    holes[num].removeChild(holes[num].lastElementChild);
    var sucess = document.createElement("h2");
    sucess.innerHTML = "+100"
    holes[num].appendChild(sucess);
   }
   function pass(){
    if (lvS<200) {
     alert("恭喜通关")
    }
    if (count>=80*i) {
     alert("恭喜通关，进入下一关");
     count = 0;
     lvS = lvS - (lv*150);
     lv++;
     olv.innerHTML = "第"+lv+"关";
     scoreShow.innerHTML = "分数："+count;
    }
    else {
     alert("好可惜，再来一次吧");
     count = 0;
     lv=1;
     lvS = 1500;
     olv.innerHTML = "第一关";
     scoreShow.innerHTML = "分数："+count;
    }
   }
  </script>

</body>
</html>