用原生js编写一款网页打地鼠游戏带源码

电脑一台

sublime或其他任意一款网页编辑器一个

新建游戏项目文件目录，结构如下

index.html的内容如下：

 

                                                                                                                  

images文件夹的内容如下图所示

js文件夹里的文件如下源码如下：    window.onload=function(){ var st=document.getElementById('st');    var over=document.getElementById('over');    var time=0;    var timespace=0;    var timestop=0;    var datetime=0;    var grade=0; var  s=0; var f=0; var k=0; var j=0; var im=document.getElementsByTagName('img'); im0=im[0]; im1=im[1]; im2=im[2];   function start_game(){     time=document.getElementById('inp0').value;     timespace=document.getElementById('inp1').value;     timestop=document.getElementById('inp2').value;     datetime=document.getElementById('datetime');     grade=document.getElementById('grade'); s=time*60;     st.disabled=true;      st.style.background='gray';      over.disabled=false;     over.style.background='#EEC900'; datetime.style.display='block';     f=setInterval(dt,1000);     function dt(){        s=s-1;       datetime.innerHTML=s+'秒';   if(s==0){over_game();}        }  // mouse(); timespace=timespace*1000; timestop=timestop*1000;  j=setInterval(mouse,timespace);     for(i=0;i<24;i++) {    im[i].onclick=function(){    var f=this.src;    if(f.match('images/004.png')){k++;grade.innerHTML=k*10; this.src='images/002.jpg';}   }   }      }   function over_game(){ clearInterval(f); clearInterval(j); datetime.style.display='none';     st.disabled=false;  st.style.background='#EEC900';     over.disabled=true;     over.style.background='gray';  for(i=0;i<24;i++){ im[i].src='images/002.jpg'; }   }    function mouse(){   var sj=parseInt(10*Math.random());   im[sj].src='images/004.png';    im[sj+sj].src='images/004.png';    im[sj+6].src='images/004.png';    function datime(){ for(i=0;i<24;i++) {     im[i].src='images/002.jpg';    }    }        setTimeout(datime,timestop);     }  /* function grade(){      }*/   st.onclick=function(){      start_game();      }   over.onclick=function(){        over_game();       }    }

css文件夹里的文件如下图所示源码如下：body{margin:0;   background-image: url(../images/003.png); cursor:pointer;}img{cursor:url('../images/mouse.ani');}#header{width:1000px; margin:0 auto; }#header_left {width:700px;float:left;}#header_left table{ margin-top:20px; float:right; }#header_left table {  border-collapse:separate;  border-spacing:3px 3px; margin-bottom:8px; color:white; font-weight:bold;}#header_rt{  width:260px;  margin-left:40px;float:left;margin-top:20px; text-align:center; color:#ffff99;line-height:25px;} #st{margin-left:85px;color:#F0FFFF; background-color:#EEC900; font-size:18px; border-radius:10px;border:1px ridge white; height:30px; margin-top:10px;} /*#st:hover{color:#F0FFFF; background-color:#E066FF;}*/#over{ margin-left:35px;color:#F0FFFF;  font-size:18px; border-radius:10px;border:1px ridge white; height:30px;margin-top:8px;} #main{width:100%;clear:both;}#ma{width:auto;}#ma table{margin:0 auto;border:none;border-spacing:0px 0px;}#ma table tr{margin:0; padding:0;border:none;}#ma table td{border:none;border-spacing:0px 0px; height:100px;  }#ma table img{width:100px; height:100px; margin:0; padding:0;}

做好后在网页里打开index.html文件运行游戏，游戏的初始化界面如下

结束游戏即可看到总得分