这个游戏是本人前不久刚入门编写的游戏，感觉里面代码很LOW但是对于新手来说很一般般吧~

没有上传音乐文件了

运行效果：

上代码（HTML+JS）：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <link rel="stylesheet" type="text/css" href="css/new_file.css"/>
  7.         <script type="text/javascript">
  8.             function $$(idName){
  9.                 return document.getElementById(idName);
  10.             }
  11.         </script>
  12.     </head>
  13.     <body>
  14.  
  15.         <div id="" class="top">
  16.             <table>
  17.                  <tr><td>游戏时间</td><td><input type="text" id="inp0" value=""/>&nbsp;分钟</td></tr>
  18.  
  19.                  <tr><td>倒计时间</td><td><span id="datetime"></span></td></tr>
  20.  
  21.                  <tr><td>地鼠出现间隔</td><td><input type="text" id="inp1"/>&nbsp;秒钟</td></tr>
  22.  
  23.                  <tr><td>停留时间</td><td><input type="text" id="inp2"/>&nbsp;秒钟</td></tr>
  24.  
  25.                  <tr><td>得分情况</td><td><span id="grade">0</span> </td></tr>
  26.  
  27.                  <tr><td><input type="button" value="开始游戏" id="st" /></td>
  28.                  <td><input type="button" value="退出游戏" id="over" disabled=""/></td></tr>
  29.  
  30.                </table>
  31.  
  32.         </div>
  33.  
  34.         <div id="heads" class="header">
  35.             <span  class="mouse1 dd">
  36.                 <a id="mouses1" onclick="addGrade()" href="#"></a>
  37.             </span>
  38.             <span  class="mouse2 dd">
  39.                 <a id="mouses2" onclick="addGrade()" href="#"></a>
  40.             </span>
  41.             <span  class="mouse3 dd">
  42.                 <a id="mouses3" onclick="addGrade()" href="#"></a>
  43.             </span>
  44.             <span  class="mouse4 dd">
  45.                 <a id="mouses4" onclick="addGrade()" href="#"></a>
  46.             </span>
  47.             <span  class="mouse5 dd">
  48.                 <a id="mouses5" onclick="addGrade()" href="#"></a>
  49.             </span>
  50.             <span  class="mouse6 dd">
  51.                 <a id="mouses6" onclick="addGrade()" href="#"></a>
  52.             </span>
  53.             <span  class="mouse7 dd">
  54.                 <a id="mouses7" onclick="addGrade()" href="#"></a>
  55.             </span>
  56.             <span  class="mouse8 dd">
  57.                 <a id="mouses8" onclick="addGrade()" href="#"></a>
  58.             </span>
  59.             <span id="cuizi" class="c">
  60.  
  61.             </span>
  62.         </div>
  63.         <div class="rule">
  64.             <h2>游戏说明</h2>点击游戏开始按钮，在下图中随机产生老鼠,老鼠消失前单机老鼠进行打击，
  65.             打中一次即可获得10积分，失败一次不扣分，赶快行动吧！
  66.         </div>
  67.         <!--背景音乐-->
  68.         <audio id="audio1" controls="controls" loop>
  69.             <source src="mp3/music2.mp3" type="audio/mp3" />
  70.             Your browser does not support the audio element.
  71.         </audio>
  72.         <audio id="audio2"><!--敲击的声音-->
  73.             <source src="mp3/music1.mp3" type="audio/mp3" />
  74.             Your browser does not support the audio element.
  75.         </audio>
  76.  
  77.         <script type="text/javascript">
  78.             var audioa= $$('audio1');
  79.             window.onload=function(){
  80.                 audioa.play();
  81.             }
  82.         </script>
  83.  
  84.         <script type="text/javascript">
  85.             //锤子在div里面跟踪鼠标移动
  86.             $$("heads").onmousemove=function(e){
  87.                 e = e||event;//获事件对象
  88.                 var xx=e.x;
  89.                 var yy=e.y;
  90.                 $$("cuizi").style.left = xx+"px";
  91.                 $$("cuizi").style.top = yy+"px";
  92.             }
  93.             var timespace=0;//间隔
  94.             var timestop=0;//停留时间
  95.             var timesdaojishi=1000;
  96.  
  97.             var jg;
  98.             var daoji;
  99.             var stops;
  100.             //点击开始按钮
  101.             $$('st').onclick=function(){
  102.                 //禁用开始键 和开启退出游戏
  103.                 $$('st').disabled='disabled';
  104.                 $$('over').disabled='';
  105.  
  106.                 if(timesdaojishi!=0){
  107.                     //倒计时
  108.                     var mit=$$('inp0').value;
  109.                     mit*=60;
  110.                     daoji= setInterval(function(){
  111.                         if(mit>=0){
  112.                             $$('datetime').innerHTML='倒计时：'+mit+'秒';
  113.                         }else{
  114.                                 end();
  115.                         }
  116.                         mit--;
  117.                     },timesdaojishi);
  118.                 }                    
  119.  
  120.                 //时间间隔
  121.                 timespace = document.getElementById('inp1').value*1000;
  122.                 timestop = document.getElementById('inp2').value*1000;
  123.                 //不等于0就继续
  124.                 if(timespace!=0)
  125.                     jg = setInterval(mouse,timespace);
  126.             }
  127.             //点击退出游戏按钮
  128.             $$('over').onclick=function(){
  129.                 end();
  130.             };
  131.             //点击地鼠加分
  132.             function addGrade(){
  133.                 var g=$$('grade').innerHTML;
  134.                 $$('grade').innerHTML=parseInt(g)+10;
  135.                 //播放敲击的声音
  136.                 $$('audio2').play();
  137.  
  138.                 //当前的老鼠隐身
  139.                 event.target.style.display='none';
  140.             }
  141.             //============================================以下是帮助函数
  142.             //地鼠出现时间
  143.             function mouse(){
  144.                 //不等于0就继续
  145.                 if(timestop!=0){
  146.                     var dishuNum=['mouses1','mouses2','mouses3','mouses4','mouses5','mouses6','mouses7','mouses8'];
  147.  
  148.                     var sj = parseInt(Math.random()*10%dishuNum.length);
  149.     //                alert(sj);
  150.                     $$(dishuNum[sj]).style.display='block';
  151.     //                alert(timestop);
  152.                     function datime() {
  153.                             $$(dishuNum[sj]).style.display='none';
  154.  
  155.                     }
  156.                     stops=setTimeout(datime, timestop);
  157.                 }
  158.  
  159.             }
  160.             //结束
  161.             function end(){
  162.                 //禁用退出游戏键 和开启开始游戏
  163.                 $$('over').disabled='disabled';
  164.                 $$('st').disabled='';
  165.                 $$('inp0').value=0;
  166.                 $$('grade').innerHTML=0;
  167.                 window.clearInterval(jg);
  168.                 window.clearInterval(daoji);
  169.                 window.clearTimeout(stops);
  170.             }
  171.         </script>
  172.     </body>
  173. </html>

css代码：

  1. .top{
  2.     width: 700px;
  3.     margin: 0 auto;
  4. }
  5. /**{
  6.     border: 1px solid lightgoldenrodyellow;
  7. }*/
  8. .header{
  9.     width: 700px;
  10.     height: 400px;
  11.     margin: 0 auto;
  12.     border: 1px dotted lightsalmon;
  13.     background-image: url(../img/地鼠场地.gif);
  14.     background-color: lightgreen;
  15. }
  16. .dd{
  17.     /*display: none;*/
  18.     width: 54px;
  19.     height: 54px;
  20.     /*background-image: url(../img/地鼠.gif);*/
  21.     /*background-position: -159px -130px;*/
  22.     display: block;
  23.     /*border: 1px solid red;*/
  24. }
  25. .dd a{
  26.     display: none;
  27.     width: 53px;
  28.     height: 53px;
  29.     background-image: url(../img/地鼠.gif);
  30.     background-position: -159px -130px;
  31.     /*border: 1px solid lightgoldenrodyellow;*/
  32. }
  33. .mouse1{
  34.     position: relative;
  35.     z-index: 3px;
  36.     left: 315px;
  37.     top: 90px;
  38. }
  39. .mouse2{
  40.     position: relative;
  41.     z-index: 3px;
  42.     left: 210px;
  43.     top: 73px;
  44. }
  45. .mouse3{
  46.     position: relative;
  47.     z-index: 4px;
  48.     left: 540px;
  49.     top: 25px;
  50. }
  51. .mouse4{
  52.     position: relative;
  53.     z-index: 1px;
  54.     left: 53px;
  55.     top: 54px;
  56. }
  57. .mouse5{
  58.     position: relative;
  59.     z-index: 1px;
  60.     left: 285px;
  61.     top: -10px;
  62. }
  63. .mouse6{
  64.     position: relative;
  65.     z-index: 1px;
  66.     left: 500px;
  67.     top: -76px;
  68. }
  69. .mouse7{
  70.     position: relative;
  71.     z-index: 1px;
  72.     left: 173px;
  73.     top: -55px;
  74. }
  75. .mouse8{
  76.     position: relative;
  77.     z-index: 1px;
  78.     left: 376px;
  79.     top: -80px;
  80. }
  81. .c{
  82.     position: absolute;
  83.     z-index: 1000px;
  84.     top:190px;
  85.     display: block;
  86.     width: 20px;
  87.     height: 20px;
  88.     background-image: url(../img/锤子.gif);
  89.     background-size: 25px;
  90.     background-repeat: no-repeat;
  91.     background-position:-2px -3px;
  92.     border-radius:10px ;
  93. }
  94. .rule{
  95.     position: absolute;
  96.     width: 200px;
  97.     z-index: 10px;
  98.     right: 5%;
  99.     top: 0px;
  100.     border: 1px dotted lightcoral;
  101.     text-align: center;
  102.     border-radius: 10px;
  103.     background-color: lightgoldenrodyellow;
  104. }

需要的图片：

纯JS编写打地鼠游戏的更多相关文章

  1. [前端 3]纯Js制作俄罗斯方块游戏

    导读:在别人文章里看到了,然后写了一遍.结果出错了,然后调出来了,然后理解了一下,加了点注释,有一些想法.忘了在 哪一篇上面看的了,就贴不出来链接地址.原谅.呃,真没自己的东西,权当练打字了吧.其实, ...

  2. js中打地鼠游戏

    <!DOCTYPE html><html lang=""><head> <mata charset = "utf-8" ...

  3. 纯js编写验证信息提示正则匹配数字，字母，空值

    1.显示效果 2,html结构 <div class="border_bg"> <div id="upcCode" style="p ...

  4. baguetteBox.js响应式画廊插件(纯JS)

    baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...

  5. 纯JS单页面赛车游戏代码分享

    分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可 支持IE9+版本 <!DOCTYPE html> <html&g ...

  6. 纯JS实现俄罗斯方块，打造属于你的游戏帝国

    纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...

  7. 无聊的人用JS实现了一个简单的打地鼠游戏

    直入正题,用JS实现一个简单的打地鼠游戏 因为功能比较简单就直接裸奔JS了,先看看效果图,或者 在线玩玩 吧 如果点击颜色比较深的那个(俗称坏老鼠),将扣分50:如果点击颜色比较浅的那个(俗称好老鼠) ...

  8. 为Node.js编写组件的几种方式

    本文主要备忘为Node.js编写组件的三种实现:纯js实现.v8 API实现(同步&异步).借助swig框架实现. 关键字:Node.js.C++.v8.swig.异步.回调. 简介 首先介绍 ...

  9. 青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 10（排行榜界面&界面管理）

    继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...

随机推荐

  1. 监控报I/O问题，怎么办？

    Linux系统出现了性能问题,一般我们可以通过top.iostat.free.vmstat等命令来查看初步定位问题.其中iostat可以给我们提供丰富的IO状态数据. 一.查询命令基本使用 1.命令介 ...

  2. MySQL高可用之组复制技术(2)：配置单主模型的组复制

    MySQL组复制系列文章: MySQL组复制大纲 MySQL组复制(1):组复制技术简介 MySQL组复制(2):配置单主模型的组复制 MySQL组复制(3):配置多主模型的组复制 MySQL组复制( ...

  3. Go Web：处理请求

    处理请求 Request和Response http Requset和Response的内容包括以下几项: Request or response line Zero or more headers ...

  4. 解读经典-《C#高级编程》第七版-Chapter1-.Net体系结构-Page13-20

    01 程序集 程序集是包含编译好的.基于.Net Framework的代码逻辑单元.一般来说,在Visual Studio中的一个项目即一个程序集,而一个项目中包含多种不同的代码文件.程序集分为可执行 ...

  5. MONGODB（二）——索引操作

    一.1.插入10w条数据> for(var i = 0;i<100000;i++){... var rand = parseInt(i*Math.random());... db.pers ...

  6. SpringBoot解决ajax跨域问题

    一.第一种方式: 1.编写一个支持跨域请求的 Configuration import org.springframework.context.annotation.Configuration; im ...

  7. 27.QT-QProgressBar动态实现多彩进度条(详解)

    如下图所示: 效果如下: (gif录制的动画效果不好,所以颜色有间隙) 介绍 通过qss实现,只需要一个多彩背景图,通过QImage获取颜色,然后来设置进度条,便可以实现动态多彩进度条(根据图片设定颜 ...

  8. mybatis_05动态SQL_if和where

    If标签:作为判断入参来使用的,如果符合条件,则把if标签体内的SQL拼接上. 注意:用if进行判断是否为空时,不仅要判断null,也要判断空字符串‘’: Where标签:会去掉条件中的第一个and符 ...

  9. Android Material Design控件使用（二）——FloatButton TextInputEditText TextInputLayout 按钮和输入框

    FloatingActionButton 1. 使用FloatingActionButton的情形 FAB代表一个App或一个页面中最主要的操作,如果一个App的每个页面都有FAB,则通常表示该App ...

  10. String为什么是不可变的?

    前几天一个面试被问到String为什么是不可变的?, 自我感觉当时回答的不太理想, 事后总结一下 不可变的是什么 我们谈论的String不可变, 指的是字符串的值不可变 例: String s = & ...