用原生js编写一款网页打地鼠游戏带源码
1、新建游戏项目文件目录，结构如下
2、index.html的内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<script src="js/cont.js"></script>
<style>
img{cursor:url('images/mouse.ani');}
</style>
</head>
<body>
<div id="header">
<div id="header_left">
<table>
<tr><td>游戏时间</td><td><input type="text" id="inp0" value=""/> 分钟</td></tr>
<tr><td>倒计时间</td><td><span id="datetime"></span></td></tr>
<tr><td>地鼠出现间隔</td><td><input type="text" id="inp1"/> 秒钟</td></tr>
<tr><td>停留时间</td><td><input type="text" id="inp2"/> 秒钟</td></tr>
<tr><td>得分情况</td><td><span id="grade"></span> </td></tr>
<tr><td><input type="button" value="开始游戏" id="st" onClick="start_game()" /></td><td><input type="button" value="退出游戏"
id="over" disabled=""/></td></tr>
</table>
</div>
<div id="header_rt">
游戏说明<br/>点击游戏开始按钮，在下图中随机产生老鼠,老鼠消失前单机老鼠进行打击，
打中一次即可获得10积分，失败一次不扣分，赶快行动吧！
</div>
</div>
<div id="main">
<div id="ma">
<table>
<tr>
<td><img src="images/002.jpg"></td>
<td><img src="images/002.jpg"></td>
<td><img src="images/002.jpg"></td>
<td><img src="images/002.jpg"></td>
<td><img src="images/002.jpg"></td>
</tr>
<tr>
<td><img src="images/002.jpg"></td>
<td><img src="images/002.jpg"></td>
<td><img src="images/002.jpg"></td>
<td><img src="images/002.jpg"></td>
<td><img src="images/002.jpg"></td>
</tr>
<tr>
<td><img src="images/002.jpg"></td>
<td><img src="images/002.jpg"></td>
<td><img src="images/002.jpg"></td>
<td><img src="images/002.jpg"></td>
<td><img src="images/002.jpg"></td>
</tr>
<tr>
<td><img src="images/002.jpg"></td>
<td><img src="images/002.jpg"></td>
<td><img src="images/002.jpg"></td>
<td><img src="images/002.jpg"></td>
<td><img src="images/002.jpg"></td>
</tr>
</table>
</div>
</div>
<div id="foot">
</div>
</body>
</html>
3、images文件夹的内容如下图所示
4、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();
}
}
5、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;}
6、做好后在网页里打开index.html文件运行游戏，游戏的初始化界面如下
7、结束游戏即可看到总得分
