您的位置：首页 > Web前端 > JavaScript

js实现打地鼠

2017-05-19 23:10 232 查看

<!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.j
4000
pg" onclick="beat(this)">

   <img src="img/5.jpg" onclick="beat(this)">

   <img src="img/5.jpg" onclick="beat(this)">

   <img src="img/5.jpg" onclick="beat(this)">

   <img src="img/5.jpg" onclick="beat(this)">

   <img src="img/5.jpg" onclick="beat(this)">

   <img src="img/5.jpg" onclick="beat(this)">

   <img src="img/5.jpg" onclick="beat(this)">

   <img src="img/5.jpg" onclick="beat(this)">

  </div>

  <p id="score">得分：0分</p>

  <p id="score1">得分：0分</p>

  <div id="btn" onclick="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>

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

标签： javascript 小游戏打地鼠定时器 setInterval

相关文章推荐

新的分享

章节导航