JavaScript实现打地鼠游戏

 更新时间:2021年10月09日 17:07:27   作者:♡ 小宸轩的前端  
这篇文章主要为大家详细介绍了JavaScript实现打地鼠游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现打地鼠游戏的具体代码,供大家参考,具体内容如下

游戏说明:

点击"开始游戏"按钮,在图中随机产生老鼠,老鼠消失前单击老鼠进行击打,打中一次即可获得100的积分,没有打中老鼠,扣取100积分

css模块

<style>
    #div0{
     text-align: center;
     width: 1360px;
     height: 600px;
     margin: 60px auto;
     background-image: url("images/bg.jpg");
     position: relative;
    }
    #div_top{
     text-align: left;
     color:brown;
     width: 360px;
     height: 100px;
     position: absolute;
     left: 500px;
    }
    #div_left{
     width: 350px;
     height: 320px;
     position: absolute;
     left: 300px;
     top: 150px;
    }
    #tab_data{
     width:350px;
     height:320px;
    }
    #div_right{
     width: 350px;
     height: 320px;
     position: absolute;
     right: 380px;
     top: 150px;
    }
    #tab{
     width:320px;
     height:320px;
    }
    #tab td{
     background-image:url("images/00.jpg");
     background-repeat:no-repeat;
     background-position:center;
    }
</style>

html模块

<div id="div0">
   <div id="div_top">
     游戏说明:<br/>
    点击"开始游戏"按钮,在下图中随机产生老鼠,老鼠消失前单击老鼠进行击打,<br/>
    打中一次即可获得100的积分,没有打中老鼠,扣取100积分。快快行动吧,考验<br/>您的
    反应和眼力!<br/>
   </div>
   <div id="div_left">
    <table id="tab_data">
     <tr>
      <th>游戏时间:</th>
      <td><input type="text" name="text_time" value="1" />分钟</td>
     </tr>
     <tr>
      <th>倒计时:</th>
      <td><input type="text" name="text_CD" value="60" disabled="disabled"/>秒</td>
     </tr>
     <tr>
      <th>出现间隔:</th>
      <td><input type="text" name="text_hide" value="1" />秒</td>
     </tr>
     <tr>
      <th>停留时间:</th>
      <td><input type="text" name="text_show" value="1" />秒</td>
     </tr>
     <tr>
      <th>得分情况:</th>
      <td><span id="span_score"></span></td>
     </tr>
     <tr>
      <th colspan="2">
       <input type="button" value="开始游戏" id="but_start"/>
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <input type="button" value="结束游戏" id="but_end"/>
      </th>
     </tr>
    </table>
   </div>
   <div id="div_right">
    
   </div>
</div>

js模块

<script>
   var collTd=[];//记录所有的td
   var oTdMouse;//记录被选中的td
   //定义变量记录页面中的标签元素
   var oButStart,oButEnd;
   var oTextTime,oTextHide,oTimeShow,oTimeCD;
   var oSpanScore;
   //定义变量记录时间参数:
   var iAll,iCD,iShow,iHide,iCount,iGet;
   var iCDId,iRandomId,iShow,iChangeId;
   window.onload=function(){
    //创建表格
    createTable();
    //给标签元素变量赋值
    init();
    //给按钮注册事件
    oButStart.onclick=startGame;
    oButEnd.onclick=endGame;
   }
   //开始游戏
   function startGame(){
    iAll=parseInt(oTextTime.value)*60;
    iCD=iAll;
    //每隔1秒钟执行一次倒计时
    iCDId=window.setInterval(setCD,1000);
    iShow=parseInt(oTextShow.value);
    iHide=parseInt(oTextHide.value);
    iCount=0;
    iGet=0;
    //每隔iShow+Hide随机一个td
    randomId();
    iRandomId=window.setInterval(randomId,(iShow+iHide)*1000);
    oButStart.disabled="disabled";
    oButEnd.disabled="";
   }
   //随机td
   function randomId(){
    iCount++;
    var index=parseInt(Math.random()*collTd.length);
    oTdMouse=collTd[index];
    //更改背景图片
    oTdMouse.style.backgroundImage="url('images/01.jpg')";
    //等待show时间结束后 把背景图片设置回来
    iShowId=window.setTimeout("oTdMouse.style.backgroundImage='url(images/00.jpg)';",iShow*1000);
   }
   //设置倒计时
   function setCD(){
    iCD--;
    oTextCD.value=iCD;
    //每隔一秒钟记录一下分数
    var message="共"+iCount+"只,打中"+iGet+"只!";
    oSpanScore.innerHTML=message.fontcolor("blue").bold();
    if(iCD<=0){
     endGame();
    }
   }
   //结束游戏
   function endGame(){
    oButEnd.disabled="disabled";
    oButStart.disabled="";
    window.clearInterval(iCDId);
    window.clearInterval(iRandomId);
   }
   //给标签元素变量赋值
   function init(){
    oButStart=document.getElementById("but_start");
    oButEnd=document.getElementById("but_end");
    
    oTextTime=document.getElementsByName("text_time")[0];
    oTextCD=document.getElementsByName("text_CD")[0];
    oTextHide=document.getElementsByName("text_hide")[0];
    oTextShow=document.getElementsByName("text_show")[0];
    
    oSpanScore=document.getElementById("span_score");
    oTextCD.value=60;
    oButEnd.disabled="disabled";
   }
   //动态生成表格
   function createTable(){
    var oDivRight=document.getElementById("div_right");
    var oTab=document.createElement("table");
    oTab.id="tab";
    for(var i=0;i<6;i++){
     var oTr=document.createElement("tr");
     for(var j=0;j<5;j++){
      var oTd=document.createElement("td");
      oTr.appendChild(oTd);
      collTd.push(oTd);
      //给所有的td添加点击事件
      oTd.onclick=function(){
       if(this==oTdMouse){
        //判断当前单元格的背景图片是不是01.jpg
        if(this.style.backgroundImage.indexOf("01.jpg")!=-1){
         //得一分
         iGet++;
         //背景图片更改为02.jpg
         oTdMouse.style.backgroundImage="url('images/02.jpg')";
         //等待0.2秒更改为00.jpg
         iChangeId=window.setTimeout("oTdMouse.style.backgroundImage='url(images/00.jpg)';",200);
         var message="共"+iCount+"只,打中"+iGet+"只!";
         oSpanScore.innerHTML=message.fontcolor("blue").bold();
        }
        
       }
      }
     }
     oTab.appendChild(oTr);
    }
    oDivRight.appendChild(oTab);
   }
</script>

更多有趣的经典小游戏实现专题,分享给大家:

C++经典小游戏汇总

python经典小游戏汇总

python俄罗斯方块游戏集合

JavaScript经典游戏 玩不停

java经典小游戏汇总

javascript经典小游戏汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 在微信小程序中保存网络图片

    在微信小程序中保存网络图片

    这篇文章主要介绍了在微信小程序中保存网络图片,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • JavaScript中判断某个字符串、数组等是否包含某个值的五种方法

    JavaScript中判断某个字符串、数组等是否包含某个值的五种方法

    在JavaScript中有多种方法可以用来判断字符串、数组是否包含某个值,这篇文章主要给大家介绍了关于JavaScript中判断某个字符串、数组等是否包含某个值的五种方法,需要的朋友可以参考下
    2024-03-03
  • 详解Bootstrap glyphicons字体图标

    详解Bootstrap glyphicons字体图标

    本章将讲解Bootstrap glyphicons字体图标,并通过一些实例了解它的使用,字体图标是在 Web 项目中使用的图标字体。字体图标在下载的Bootstrap的fonts文件夹中
    2016-01-01
  • JS控制FileUpload的上传文件类型实例代码

    JS控制FileUpload的上传文件类型实例代码

    下面小编就为大家带来一篇JS控制FileUpload的上传文件类型实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • ECMAscrip新特性函数介绍

    ECMAscrip新特性函数介绍

    这篇文章主要介绍了ECMAscrip新特性之函数的扩展,在ECMAScript 2015中,允许为函数的参数添加默认值,将默认值直接写在参数的后面即可,具体情况参考下面文章的详细内容
    2021-12-12
  • IE下js调试工具Companion.JS

    IE下js调试工具Companion.JS

    做web开发的朋友都清楚,js程序的调试是相当郁闷的,因为首先这种语言语法比较灵活,它是一种弱类型的脚本语言,很多错误是无法控制的。
    2010-10-10
  • Bootstrap教程JS插件弹出框学习笔记分享

    Bootstrap教程JS插件弹出框学习笔记分享

    这篇文章主要为大家分享了Bootstrap教程JS插件弹出框学习笔记,为大家详细介绍Bootstrap弹出框的使用方法,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • php基于redis处理session的方法

    php基于redis处理session的方法

    这篇文章主要介绍了php基于redis处理session的方法的相关资料,需要的朋友可以参考下
    2016-03-03
  • asp(javascript)全角半角转换代码 dbc2sbc

    asp(javascript)全角半角转换代码 dbc2sbc

    asp与javascript 全角半角处理代码
    2009-08-08
  • js如何准确获取当前页面url网址信息

    js如何准确获取当前页面url网址信息

    这篇文章主要为大家介绍了js准确获取当前页面url网址信息的多种方法,包括正则法、split拆分法等,需要的朋友可以参考下
    2016-04-04

最新评论