当前位置：Gxlcms > html代码 > 分享一个html+js实现打地鼠游戏的实例代码

分享一个html+js实现打地鼠游戏的实例代码

时间：2021-07-01 10:21:17 帮助过：875人阅读

本文主要分享了js实现打地鼠小游戏的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧

话不多说，请看代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>打地鼠</title>
  6.  <style type="text/css">
  7.  #content {
  8.  width:960px;
  9.  margin:0 auto;
  10.  text-align:center;
  11.  margin-top:40px;
  12.  }
  13.  #form1 {
  14.  margin:20px 0;
  15.  }
  16.  table {
  17.  margin:0 auto;
  18.  cursor:url(http://cdn.attach.qdfuns.com/notes/pics/201702/12/115915n79d7hvffengpdxe.png),auto;
  19.  }
  20.  td {
  21.  width:95px;
  22.  height:95px;
  23.  background:#00ff33;
  24.  }
  25.  </style>
  26.  <script type="text/javascript">
  27.  var td = new Array(),  //保存每个格子的地鼠
  28.  playing = false,  //游戏是否开始
  29.  score = 0, //分数
  30.  beat = 0, //鼠标点击次数
  31.  success = 0, //命中率
  32.  knock = 0, //鼠标点中老鼠图片的次数
  33.  countDown = 30, //倒计时
  34.  interId = null, //指定 setInterval()的变量
  35.  timeId = null; //指定 setTimeout()的变量
  36.  //游戏结束
  37.  function GameOver(){
  38.  timeStop();
  39.  playing = false;
  40.   clearMouse();
  41.  alert("游戏结束！\n 你获得的分数为："+score+"\n 命中率为："+success);
  42.  success = 0;
  43.  score = 0;
  44.  knock = 0;
  45.  beat = 0;
  46.  countDown = 30;
  47.  }
  48.  //显示当前倒计时所剩时间
  49.  function timeShow(){
  50.  document.form1.remtime.value = countDown;
  51.  if(countDown == 0){
  52.  GameOver();
  53.  return;
  54.  }else{
  55.  countDown = countDown-1;
  56.  timeId = setTimeout("timeShow()",1000);
  57.  }
  58.  }
  59.  //主动停止所有计时
  60.  function timeStop() {
  61.  clearInterval(interId);
  62.  clearTimeout(timeId); 
  63.  }
  64.  //随机循环显示老鼠图片
  65.  function show(){
  66.  if(playing){
  67.  var current = Math.floor(Math.random()*25);
  68.  document.getElementById("td["+current+"]").innerHTML = '<img src="http://cdn.attach.qdfuns.com/notes/pics/201702/12/115915w6tluu1gq8l1b54h.png">';
  69.  setTimeout("document.getElementById('td["+current+"]').innerHtml=''",3000); //使用 setTimeout()实现3秒后隐藏老鼠图片
  70.  }
  71.  }
  72.  //清除所有老鼠图片
  73.  function clearMouse(){
  74.  for(var i=0;i<25;i++){
  75.  document.getElementById("td["+i+"]").innerHTML="";
  76.  }
  77.  }
  78.  //点击事件函数，判断是否点中老鼠
  79.  function hit(id){
  80.  if(playing == false){
  81.  alert("请点击开始游戏!");
  82.  return;
  83.  }else{
  84.  beat += 1;
  85.  if(document.getElementById("td["+id+"]").innerHTML != ""){
  86.  score += 1;
  87.  knock += 1;
  88.  success = knock/beat;
  89.  document.form1.success.value = success;
  90.  document.form1.score.value = score;
  91.  document.getElementById("td["+id+"]").innerHTML = "";
  92.  }else{
  93.  score += -1;
  94.  success = knock/beat;
  95.  document.form1.success.value = success;
  96.   document.form1.score.value = score;
  97.  }
  98.  }
  99.  }
  100.  //游戏开始
  101.  function GameStart(){
  102.  playing = true;
  103.  interId = setInterval("show()",1000); 
  104.  document.form1.score.value = score;
  105.  document.form1.success.value = success;
  106.  timeShow();
  107.  } 
  108.  </script>
  109. </head>
  110. <body>
  111.  <p id="content">
  112.  <input type="button" value="开始游戏" onclick="GameStart()" />
  113.  <input type="button" value="结束游戏" onclick="GameOver()" />
  114.  <form name="form1" id="form1">
  115.   <label>分数：</label>
  116.   <input type="text" name="score" size="5">
  117.   <label>命中率：</label>
  118.   <input type="text" name="success" size="10">
  119.   <label>倒计时：</label>
  120.   <input type="text" name="remtime" size="5">
  121.  </form> 
  122.  <table>
  123.   <tr>
  124.   <td id="td[0]" onclick="hit(0)"></td>  
  125.   <td id="td[1]" onclick="hit(1)"></td>
  126.   <td id="td[2]" onclick="hit(2)"></td>
  127.   <td id="td[3]" onclick="hit(3)"></td>
  128.   <td id="td[4]" onclick="hit(4)"></td>
  129.   </tr>
  130.   <tr>
  131.   <td id="td[5]" onclick="hit(5)"></td>
  132.   <td id="td[6]" onclick="hit(6)"></td>
  133.   <td id="td[7]" onclick="hit(7)"></td>
  134.   <td id="td[8]" onclick="hit(8)"></td>
  135.   <td id="td[9]" onclick="hit(9)"></td>
  136.   </tr>
  137.   <tr>
  138.   <td id="td[10]" onclick="hit(10)"></td>
  139.   <td id="td[11]" onclick="hit(11)"></td>
  140.   <td id="td[12]" onclick="hit(12)"></td>
  141.   <td id="td[13]" onclick="hit(13)"></td>
  142.   <td id="td[14]" onclick="hit(14)"></td>
  143.   </tr>
  144.   <tr>
  145.   <td id="td[15]" onclick="hit(15)"></td>
  146.   <td id="td[16]" onclick="hit(16)"></td>
  147.   <td id="td[17]" onclick="hit(17)"></td>
  148.   <td id="td[18]" onclick="hit(18)"></td>
  149.   <td id="td[19]" onclick="hit(19)"></td>
  150.   </tr>
  151.   <tr>
  152.   <td id="td[20]" onclick="hit(20)"></td>
  153.   <td id="td[21]" onclick="hit(21)"></td>
  154.   <td id="td[22]" onclick="hit(22)"></td>
  155.   <td id="td[23]" onclick="hit(23)"></td>
  156.   <td id="td[24]" onclick="hit(24)"></td>
  157.   </tr>
  158.  </table>
  159.  </p>
  160. </body>
  161. </html>

流程设计：

  • 点击“开始游戏”按钮游戏开始，否则将提示“请点击开始游戏”字样

  • 分数、命中率显示重置为“0”，倒计时开始（默认为30秒）

  • 老鼠图片不断显示、隐藏，玩家可点击鼠标左键进行游戏

  • 当30秒倒计时结束或者玩家主动点击“结束按钮”时，游戏结束并显示游戏结果

【相关推荐】

1. 免费html在线视频教程

2. html开发手册

3. php.cn原创html5视频教程

以上就是分享一个html+js实现打地鼠游戏的实例代码的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！