打地鼠小游戏的实现

最新推荐文章于 2023-06-29 06:00:00 发布
最新推荐文章于 2023-06-29 06:00:00 发布
阅读量583 收藏 4
点赞数 1
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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>

##该代码有个bug，就是在暂停之后，点击事件依旧能够触发，按照游戏体验逻辑，在暂停之后游戏界面应该锁定，学习的知识有限，我始终没找到办法纠正这个bug，希望有经验的大神指点一二，互相交流。

懒得多写
关注
Android实现打地鼠小游戏
01-03
本文实例为大家分享了Android实现打地鼠小游戏的具体代码，供大家参考，具体内容如下 实现结果 代码实现 playmouse.java package com.example.playmouse; import android.content.pm.ActivityInfo; import android...
砸地鼠 php源码,分享一个html+js实现打地鼠游戏的实例代码
weixin_39673742的博客
03-23 361
本文主要分享了js实现打地鼠小游戏的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧话不多说，请看代码：打地鼠#content {width:960px;margin:0 auto;text-align:center;margin-top:40px;}#form1 {margin:20px 0;}table {margin:0 auto;cursor:url(http://cdn.attac...
HTML5版打地鼠前端源码
京回收
05-31 318
【代码】HTML5版打地鼠前端源码。
html、css打地鼠游戏,CSS打地鼠游戏
weixin_32310195的博客
05-30 201
* {margin:0;padding:0;-moz-box-sizing:border-box;box-sizing:border-box;}html,body {height:100%;}body {background:#000;font-family:sans-serif;}.window {position:absolute;left:0;top:0;width:100%;height:...
写的一个“打地鼠“小游戏
weixin_62670199的博客
09-11 905
用JavaScript写的"打地鼠"小游戏...比较简单,没有用太多的时间优化,其他人使用可以变得更加完善
很难写但好玩的html打地鼠游戏代码
weixin_42584586的博客
12-17 572
<p>这是一个简单的 HTML 打地鼠游戏代码：</p> <p>```html</p> <html> <head> <style> /* 设置地鼠的样式 */ .mole { width: 50px; height: 50px; background-colo...
JavaScript实现打地鼠小游戏
10-19
JavaScript实现打地鼠小游戏的知识点可以从游戏设计、HTML结构布局、JavaScript逻辑实现等方面展开。 ### 游戏设计 打地鼠小游戏设计思想简单，但能够锻炼和展示JavaScript编程能力。游戏通常有一个固定时间间隔，...
vue实现打地鼠小游戏
10-14
总结起来，这个Vue实现的打地鼠小游戏是一个简单的交互式应用，展示了Vue如何结合HTML、CSS和JavaScript来创建动态用户界面。通过数据绑定、计算属性和方法，实现了游戏的核心功能，包括生成随机地鼠、用户设置、...
js实现打地鼠小游戏
12-03
通过以上函数的协同工作，这个打地鼠小游戏实现了动态显示地鼠、计算得分和命中率、倒计时结束游戏等功能。用户可以通过点击地鼠格子进行游戏，当游戏结束时，会弹出对话框显示游戏结果。 为了增强游戏体验，可以...
HTML+js实现简单的打地鼠小游戏
qq_36336898的博客
01-08 5992
首先是内容和样式 这里是建立了3*3的方格 statu属性用于记录是否砸中了地鼠 &lt;style type="text/css"&gt; *{ margin: 0; padding: 0; } .main{ width: 300px; height: 300px; margin:100px auto; } tr{ height: 100...
打地鼠小程序
09-09
实现打地鼠小游戏的所有功能。界面美观，运行环境是vs。
基于jsp的web小游戏程序源代码
05-31
基于jsp的web小游戏程序源代码.是一个石头，剪子，布的小游戏的设计，适用于初学者
canvas+CSS打地鼠小游戏
11-06
canvas+CSS打地鼠小游戏
javab编写的六个小游戏（含源代码）
03-29
用java编写的六个经典小游戏，包含源代码可直接运行，适合于有一定java基础的人，对深入理解java语言有很大帮助
jsp实现剪子石头布小游戏
10-17
主要为大家详细介绍了jsp实现剪子石头布小游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript 中阶 打地鼠游戏（基础版）
weixin_65257540的博客
03-16 4055
思路 1、先搭建整体布局样式 2、由于打地鼠游戏需要用到格子类型，所以会设计到表格table的使用 3、为了便于后面操作，需要把游戏中会用到的图片进行类名的命名，后面js部分就可以挂类来更改不同的表达效果 4、先获取游戏中会需要到的元素 5、渲染最高分数，通过本地储存的方法localStorage.getItem()，先获取本地数据，进行判断，如右数据，那最高分的元素就直接渲染这个数据，如果没有，分数则为0 6、设置鼠标在游戏中的变化效果，onmouseover移入，onmousedown按下和onmou
基于C++和QT打地鼠游戏的设计与实现#原创
最新发布
qq_51290347的博客
06-29 1064
在生活节奏不断加快的现代社会，轻松的益智游戏对缓解生活压力调节情绪具有重要意义，而打地鼠这一款游戏正好符合大众的心理。为了迎合众多用户的需求，开发了这款叫做打地鼠的小游戏，并且这款小游戏适合社会各阶层的人士，此外，它还有很强的娱乐性和交互性。尽管现在市面上存在的游戏版本很多，可是打地鼠的市场还是很大的，原因就在于它能引人入深,爱不释手。随着游戏速度的逐渐加快，其刺激性也更强。可以说，游戏的优势不仅在于简单易行,而且在于他能很快顺利的运行。
JSP 实现 石头剪刀布小游戏
DOYOUUNDERSTANDME的博客
04-20 2353
<html> <head> <title>石头剪刀布</title> </head> <body> <form method="get" > <select name="s"> <option value="">请选择</option> <option value="石头">石头</option&g.
【Android】开发”打地鼠“小游戏
花北城的博客
03-08 3259
关注我论坛的可能知道，上期我提及要制作另一个Android程序的计划，经过我的努力和各位网友的帮助下，今日我终于完成了任务。现写下程序的制作过程，以及程序遇到的瓶颈和秘方，一来，与各位编程好友分享；其次就是，丰富我的日志，并提升我的编程水准，牢记问题的解决办法，但这一切都是次要的……我们选择划圈的这张图，用photoshop或者美图秀秀什么的扣两张图，记住背景一定是透明的（关于透明背景图片的制作我会专门撰写）效果如图所示： 首先，我简述一下程序要实现的功能：本程序非常简单，既然是打地鼠游戏，顾名思义地鼠会随
Java实现的简单打地鼠小游戏教程
资源摘要信息: "Java打地鼠小游戏是一个基于Java语言开发的简单桌面游戏。在这个游戏中，通常会有一个窗口界面，上面会有多个随机出现的地鼠洞。游戏的目标是在限定的时间内，尽可能多地用锤子敲击出现的地鼠，每次...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值