在学习前端的时候，尝试着写了打地鼠小游戏，包括计时器，老鼠地雷图片的隐藏显示，计算成功率和得分，判断是否点中老鼠（点中地雷扣分），功能和界面都较为简单。以下是代码：
HTML代码，index.html：
<!DOCTYPE html>
<html>
<head>
<title>打地鼠</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#content {
width: 1000px;
margin: 0 auto;
text-align: center;
}
table {
margin: 0 auto;
cursor: url('img/hammer.png'),auto;
}
td {
width: 100px;
height: 100px;
background-color: #ffff99;
}
</style>
<script src="main.js"></script>
</head>
<body>
<div id="content">
<input type="button" value="game start" onclick="GameStart()">
<input type="button" value="game over" onclick="GameOver()">
<form name="form1">
<label>得分:</label>
<input type="text" name="score" size="5">
<label>成功率：</label>
<input type="text" name="success" size="10">
<label>倒计时：</label>
<input type="text" name="lefttime" size="5">
<label>中雷数:</label>
<input type="text" name="getminer" size="5">
</form>
<table>
<tr>
<td id="td[0]" onclick="hitmouse(0)"></td>
<td id="td[1]" onclick="hitmouse(1)"></td>
<td id="td[2]" onclick="hitmouse(2)"></td>
<td id="td[3]" onclick="hitmouse(3)"></td>
<td id="td[4]" onclick="hitmouse(4)"></td>
</tr>
<tr>
<td id="td[5]" onclick="hitmouse(5)"></td>
<td id="td[6]" onclick="hitmouse(6)"></td>
<td id="td[7]" onclick="hitmouse(7)"></td>
<td id="td[8]" onclick="hitmouse(8)"></td>
<td id="td[9]" onclick="hitmouse(9)"></td>
</tr>
<tr>
<td id="td[10]" onclick="hitmouse(10)"></td>
<td id="td[11]" onclick="hitmouse(11)"></td>
<td id="td[12]" onclick="hitmouse(12)"></td>
<td id="td[13]" onclick="hitmouse(13)"></td>
<td id="td[14]" onclick="hitmouse(14)"></td>
</tr>
<tr>
<td id="td[15]" onclick="hitmouse(15)"></td>
<td id="td[16]" onclick="hitmouse(16)"></td>
<td id="td[17]" onclick="hitmouse(17)"></td>
<td id="td[18]" onclick="hitmouse(18)"></td>
<td id="td[19]" onclick="hitmouse(19)"></td>
</tr>
<tr>
<td id="td[20]" onclick="hitmouse(20)"></td>
<td id="td[21]" onclick="hitmouse(21)"></td>
<td id="td[22]" onclick="hitmouse(22)"></td>
<td id="td[23]" onclick="hitmouse(23)"></td>
<td id="td[24]" onclick="hitmouse(24)"></td>
</tr>
</table>
</div>
</body>
</html>main.js：
var td = new Array(), //保存每个格子的地鼠的数组
start = false, //游戏是否开始
score = 0, //分数
clickon = 0, //鼠标点击次数
success = 0, //成功率
hiton = 0, //鼠标点中老鼠图片次数
countDown = 30, //倒计时
getminer = 0, //中雷数
interId = null, //指定 setInterval()的变量
timeId = null, //指定 setTimeout()的变量
landmineId=null;
//游戏开始
function GameStart(){
start = true;
interId = setInterval(showmouse,500);
landmineId = setInterval(showminer,800);
document.form1.score.value = score;
document.form1.success.value = success;
showtime();
}
//游戏结束
function GameOver(){
timeStop();
start = false;
clearMouse();
alert("游戏结束！\n 你的分数为："+score+"\n 命中率为："+success);
success = 0;
score = 0;
hiton = 0;
clickon = 0;
countDown = 30;
}
//显示剩余时间，通过递归调用实现倒计时
function showtime(){
document.form1.lefttime.value = countDown;
if(countDown == 0){
GameOver();
return;
}else{
countDown = countDown-1;
timeId = setTimeout("showtime()",1000);
}
}
//stop all the time
function timeStop(){
clearInterval(interId);
clearTimeout(timeId);
clearTimeout(landmineId);
}
//随机循环显示老鼠图片
function showmouse(){
if(start)
{
var current = Math.floor(Math.random()*30);
document.getElementById("td["+current+"]").innerHTML = '<img src="img/mouse.jpg">';
//1秒后隐藏老鼠
setTimeout("document.getElementById('td["+current+"]').innerHTML=''",1000);
}
}
//随机循环显示地雷图片
function showminer(){
if(start)
{
var landmine = Math.floor(Math.random()*30);
document.getElementById("td["+landmine+"]").innerHTML = '<img src="img/dilei.jpg">';
//1秒后隐藏地雷
setTimeout("document.getElementById('td["+landmine+"]').innerHTML=''",1000);
}
}
//清除所有图片
function clearMouse(){
for(var i=0;i<=24;i++)
{
document.getElementById("td["+i+"]").innerHTML="";
}
}
//判断是否点中老鼠
function hitmouse(id){
if(start==false)
{
alert("游戏未开始");
return;
}
else
{
clickon +=1;
if(document.getElementById("td["+id+"]").innerHTML!="")
{
//如果击中老鼠则加分
if(document.getElementById("td["+id+"]").innerHTML == '<img src="img/mouse.jpg">'){
score += 1;
hiton += 1;
success = hiton/clickon;
document.form1.success.value = success.toFixed(2);
document.form1.score.value = score;
document.getElementById("td["+id+"]").innerHTML="";
}
//击中地雷则减分
else {
score -= 1;
getminer += 1;
success = hiton/clickon;
document.form1.success.value = success.toFixed(2);
document.form1.score.value = score;
document.form1.getminer.value = getminer;
document.getElementById("td["+id+"]").innerHTML="";
}
}
else
{
success = hiton/clickon;
document.form1.success.value = success.toFixed(2);
document.form1.score.value = score;
}
}
}