JavaScript实现打地鼠游戏代码方法

本篇文章小编给大家分享一下JavaScript实现打地鼠游戏代码方法，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

游戏说明：

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

css模块

html模块

   
     游戏说明:

    点击"开始游戏"按钮，在下图中随机产生老鼠，老鼠消失前单击老鼠进行击打，

    打中一次即可获得100的积分，没有打中老鼠，扣取100积分。快快行动吧，考验
您的
    反应和眼力！

   
   
    

     

      
游戏时间：
      
分钟
     
     

      
倒计时：
      
秒
     
     

      
出现间隔：
      
秒
     
     

      
停留时间：
      
秒
     
     

      
得分情况：
      

     
     

      

       
            
       
      
     
    
   
   
    
   

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(/background_img/1.jpg)";
    //等待show时间结束后 把背景图片设置回来
    iShowId=window.setTimeout("oTdMouse.style.backgroundImage='url(/background_img/1.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(/background_img/1.jpg)";
         //等待0.2秒更改为00.jpg
         iChangeId=window.setTimeout("oTdMouse.style.backgroundImage='url(/background_img/1.jpg)';",200);
         var message="共"+iCount+"只，打中"+iGet+"只！";
         oSpanScore.innerHTML=message.fontcolor("blue").bold();
        }
        
       }
      }
     }
     oTab.appendChild(oTr);
    }
    oDivRight.appendChild(oTab);
   }
</script>