js实现打地鼠_草坪打地鼠-CSDN博客

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   .content{
    width: 330px;
    height: 330px;
    margin: 50px auto;/*草坪margin为50*/
    background: url(img/5.jpg) no-repeat;
    background-size: 100% 100%;
   }
   .content img{
    width: 100px;
    height: 100px;
   }
   #score{
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background: lightpink;
    text-align: center;
    line-height: 50px;
   }
   #score1{
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background: lightpink;
    text-align: center;
    line-height: 50px;
   }
   #btn{
    /*display: block;*/
    width: 80px;
    height: 50px;
    margin: 20px auto;
    font-family: forte;/*漂亮字体*/
    font-size:30px;
    color: greenyellow;
   }
   .title{
    position:relative;
    width: 330px;
    height: 30px;
    background-color: lightblue;
    margin: 20px auto;
    font-family: arial;
    font-size: 20px;
    color: lightcoral;
    text-align:center;
    line-height: 30px;
   }
  </style>
</head>
<body>
  <div class="title">
   <marquee direction="right" behavior="alternate" scrollamount="10" scrolldelay="10">一起打地鼠呀</marquee>
  </div>
  <div class="content" id="game">
   <img src="img/5.jpg" οnclick="beat(this)">
   <img src="img/5.jpg" οnclick="beat(this)">
   <img src="img/5.jpg" οnclick="beat(this)">
   <img src="img/5.jpg" οnclick="beat(this)">
   <img src="img/5.jpg" οnclick="beat(this)">
   <img src="img/5.jpg" οnclick="beat(this)">
   <img src="img/5.jpg" οnclick="beat(this)">
   <img src="img/5.jpg" οnclick="beat(this)">
   <img src="img/5.jpg" οnclick="beat(this)">
  </div>
  <p id="score">得分：0分</p>
  <p id="score1">得分：0分</p>
  <div id="btn" οnclick="start()">Start</div>
  <script>
//      定义全局变量
           var lastTemp=0;
   //实现开始按钮的点击函数
   function start(obj){
//    alert("可以游戏了");

             setInterval(timer,1000);
   }
   function timer(){
    //产生随机数0-8

    var temp=Math.round(Math.random()*8);
    //获取最外层的div
    var contentDiv=document.getElementById("game");
    //找到相应整数的子类
    var child=contentDiv.children[temp];
    child.src="img/2.gif";
    if(lastTemp!=temp){
//     将上一秒的地鼠变为草坪
                    var lastChild=contentDiv.children[lastTemp];
                    lastChild.src="img/5.jpg";
    }
    lastTemp=temp;

   }
   //设置一个参数，记录分数
   var x=0,k=0;
   function beat(obj){
    //取出图片路径
    var srcstr=obj.src;
    //截取字符串，若倒数第五位字符串为2，则为地鼠，否则为草坪
    if(srcstr.charAt(srcstr.length-5)=="2"){
     x++;
     obj.src="img/5.jpg";
     document.getElementById("score").innerHTML="得分："+x;
    }else if(srcstr.charAt(srcstr.length-5)=="5"){
     k++;
     document.getElementById("score1").innerHTML="失分："+k;
    }
   }
  </script>
</body>
</html>