打地鼠小游戏的实现

最新推荐文章于 2023-03-08 10:26:42 发布

懒得多写

最新推荐文章于 2023-03-08 10:26:42 发布

阅读量577

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45701008/article/details/104124457

版权

#打地鼠小游戏总结
##用jsp简单实现了一下打地鼠游戏的编程，自己写的太烂了，只能实现基本的功能，代码可读性不高，看了朋友的代码后叹为观止，借鉴着重写了一遍，分享出来供大家参考。
（朋友的代码比我的简洁，我因为添加了暂停/继续按钮，以及按钮之间的禁用关系，为开始和结束分别各用了一个初始化状态。所以看着可能会比较杂乱，如果只追求功能的实现，这些代码都可以去掉，可以只看开始结束按钮的代码。）
素材：

被打之后
（素材有点丑，大家可以网上搜其他好看的素材代替。）
效果：
在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script type="text/javascript" src="jquery-3.4.1.js" ></script>
  <script>
   var variable1;
   var speed;
   var time1;
   var time2;
   var time3;
   var time4;
   var random1;
   var count;
   var recordtime;
   $(function(){
    init1();
    speed1();
    $(".MChunk03 input").on("click",function(){//触发按钮事件
     variable1=$(this).attr("contrl");        
     $(".MChunk03 input").prop("disabled",false);     
     switch(variable1){
      case "start":init2();//开始按钮
       $(".MChunk03 input").prop("disabled",false);
       $(this).prop("disabled",true);
       $(".MChunk02 div").off("click");       
       time1=setInterval("startGame()",speed);//出现地鼠和消失地鼠的功能实现
       time4=setInterval("recorde()",10);//计时器的实现
       break;
      case "pause"://暂停按钮
       $(this).attr("contrl","go on");$(this).val("继续");
       $(".MChunk03 input").eq(0).prop("disabled",true);
       $(".MChunk03 input").eq(2).prop("disabled",true);       
       clearInterval(time1);
       clearTimeout(time2);
       clearTimeout(time3);
       clearTimeout(time4);
       break;
      case "go on"://暂停按钮变成的继续按钮
       $(this).attr("contrl","pause");$(this).val("暂停");
       time1=setInterval("startGame()",speed);
       time2=setTimeout("change("+random1+")",speed+1000);
       time3=setTimeout("change("+random1+")",speed+1000);
       time4=setInterval("recorde()",10);
       break;
      default:alert("共消灭"+count+"只，"+"耗时"+recordtime/1000+"秒");init1();speed1();//结束按钮
     }
    })
   })
   function startGame(){
    var random=parseInt(Math.random()*25);
    $(".MChunk01 img:eq("+random+")").prop("src","../img/01.jpg");
    $(".MChunk01 img:eq("+random+")").show();
    time2=setTimeout("change("+random+")",speed+1000);
    $(".MChunk01 img:eq("+random+")").on("click",function(){
     $(this).off("click");
     $(this).prop("src","../img/02.jpg");
     time3=setTimeout("change("+random+")",speed+1000);
     count++;
    })
    if(count==100){
     alert("共消灭"+count+"只<br/>"+"耗时"+recordtime+"秒");
     init1();speed1();
    }
   }
   function recorde(){
       recordtime+=10;
       $(".MChunk03 span").eq(1).html(recordtime/1000);
       $(".MChunk03 span").eq(0).html(count);
      }
   function change(random){
    random1=random;
    $(".MChunk01 img:eq("+random+")").hide();
    $(".MChunk01 img:eq("+random+")").off();
   }
   function speed1(){
    $(".MChunk02 div").on("click",function(){
     variable1=$(this).attr("grade");
     $(".MChunk02 div").css("background-color","darkseagreen");
     $(this).css("background-color","burlywood");
     switch(variable1){
      case "grade2":speed=500;
       break;
      case "grade3":speed=200;
       break;
      default:speed=1000;
     }
    });
   }
   function init1(){
    speed=1000;
    count=0;
    recordtime=0;
    $(".MChunk01 img").prop("src","../img/00.jpg");
    $(".MChunk03 input").eq(1).prop("disabled",true);
    $(".MChunk03 input").eq(2).prop("disabled",true);
    $(".MChunk03 span").eq(1).html(recordtime/1000);
    $(".MChunk03 span").eq(0).html(count);
    $(".MChunk02 div").css("background-color","darkseagreen");
    clearInterval(time1);
    clearTimeout(time2);
    clearTimeout(time3);
    clearInterval(time4);    
   }
   function init2(){
    count=0;
    recordtime=0;
    $(".MChunk01 img").prop("src","../img/00.jpg");
    $(".MChunk03 input").eq(1).prop("disabled",true);
    $(".MChunk03 input").eq(2).prop("disabled",true);
    $(".MChunk03 span").eq(1).html(recordtime/1000);
    $(".MChunk03 span").eq(0).html(count);
    clearInterval(time1);
    clearTimeout(time2);
    clearTimeout(time3);
    clearInterval(time4);
    switch(speed){
        case 500:speed=500;
         break;
        case 200:speed=200;
         break;
        default:speed=1000;
       }
   }
  </script>
  <style>
   .LChunk1{border: 1px solid slateblue;width: 810px;margin: 0px auto;text-align: center;}
   .MChunk01{border: 1px solid slateblue;width: 500px;height: 500px;float: left;}
   .MChunk02{border: 1px solid slateblue;width: 300px;height: 500px;float: left;background-color: darkseagreen;}
   .MChunk03{border: 1px solid slateblue;width: 800px;height: 200px;clear: both;background-color: #2AABD2;}
   .MChunk01 div{width: 100px;height: 100px;float: left;background: url(../img/00.jpg);}
   .MChunk01 img{width: 100%;height: 100%;}
   .MChunk02 div{width: 300px;height: 100px;border: 1px solid white;line-height: 100px;}
   .MChunk03 div{line-height: 60px;}
   .MChunk03 input{height: 30px;margin: 0px 10px;}
  </style>
 </head>
 <body>
  <div class="LChunk1">
   <h1>打地鼠小游戏</h1>
   <div class="MChunk01">
    <div class="SChunk01"><img/></div>
    <div class="SChunk01"><img/></div>
    <div class="SChunk01"><img/></div>
    <div class="SChunk01"><img/></div>
    <div class="SChunk01"><img/></div>
    
    <div class="SChunk01"><img/></div>
    <div class="SChunk01"><img/></div>
    <div class="SChunk01"><img/></div>
    <div class="SChunk01"><img/></div>
    <div class="SChunk01"><img/></div>
    
    <div class="SChunk01"><img/></div>
    <div class="SChunk01"><img/></div>
    <div class="SChunk01"><img/></div>
    <div class="SChunk01"><img/></div>
    <div class="SChunk01"><img/></div>
    
    <div class="SChunk01"><img/></div>
    <div class="SChunk01"><img/></div>
    <div class="SChunk01"><img/></div>
    <div class="SChunk01"><img/></div>
    <div class="SChunk01"><img/></div>
    
    <div class="SChunk01"><img/></div>
    <div class="SChunk01"><img/></div>
    <div class="SChunk01"><img/></div>
    <div class="SChunk01"><img/></div>
    <div class="SChunk01"><img/></div>
   </div>
   <div class="MChunk02">
    <h2>*难度选择*</h2>
    （默认简单模式）
    <div grade="grade1">简单</div>
    <div grade="grade2">正常</div>
    <div grade="grade3">困难</div>
   </div>
   <div class="MChunk03">
    <div>
     共销灭<span>0</span>只<br />
     用时&nbsp;<span>0</span>&nbsp;&nbsp;秒<br />
     <input type="button" value="开始挑战" contrl="start">
     <input type="button" value="暂停" contrl="pause">
     <input type="button" value="结束挑战" contrl="end">
    </div>
   </div>
  </div>
 </body>
</html>