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

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

一款非常简单的网页打地鼠游戏，帮你练习下你的js，顺便增加点乐趣，时间紧迫，做的不是很精美请大家见谅！

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

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;

im1=im;

im2=im;

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文件运行游戏，游戏的初始化界面如下

结束游戏即可看到总得分