js实现打地鼠小游戏
话不多说，请看代码：
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>打地鼠</title>
<styletype="text/css">
#content{
width:960px;
margin:0auto;
text-align:center;
margin-top:40px;
}
#form1{
margin:20px0;
}
table{
margin:0auto;
cursor:url(http://cdn.attach.qdfuns.com/notes/pics/201702/12/115915n79d7hvffengpdxe.png),auto;
}
td{
width:95px;
height:95px;
background:#00ff33;
}
</style>
<scripttype="text/javascript">
vartd=newArray(),//保存每个格子的地鼠
playing=false,//游戏是否开始
score=0,//分数
beat=0,//鼠标点击次数
success=0,//命中率
knock=0,//鼠标点中老鼠图片的次数
countDown=30,//倒计时
interId=null,//指定setInterval()的变量
timeId=null;//指定setTimeout()的变量
//游戏结束
functionGameOver(){
timeStop();
playing=false;
clearMouse();
alert("游戏结束！\n你获得的分数为："+score+"\n命中率为："+success);
success=0;
score=0;
knock=0;
beat=0;
countDown=30;
}
//显示当前倒计时所剩时间
functiontimeShow(){
document.form1.remtime.value=countDown;
if(countDown==0){
GameOver();
return;
}else{
countDown=countDown-1;
timeId=setTimeout("timeShow()",1000);
}
}
//主动停止所有计时
functiontimeStop(){
clearInterval(interId);
clearTimeout(timeId);
}
//随机循环显示老鼠图片
functionshow(){
if(playing){
varcurrent=Math.floor(Math.random()*25);
document.getElementById("td["+current+"]").innerHTML='<imgsrc="http://cdn.attach.qdfuns.com/notes/pics/201702/12/115915w6tluu1gq8l1b54h.png">';
setTimeout("document.getElementById('td["+current+"]').innerHtml=''",3000);//使用setTimeout()实现3秒后隐藏老鼠图片
}
}
//清除所有老鼠图片
functionclearMouse(){
for(vari=0;i<25;i++){
document.getElementById("td["+i+"]").innerHTML="";
}
}
//点击事件函数，判断是否点中老鼠
functionhit(id){
if(playing==false){
alert("请点击开始游戏!");
return;
}else{
beat+=1;
if(document.getElementById("td["+id+"]").innerHTML!=""){
score+=1;
knock+=1;
success=knock/beat;
document.form1.success.value=success;
document.form1.score.value=score;
document.getElementById("td["+id+"]").innerHTML="";
}else{
score+=-1;
success=knock/beat;
document.form1.success.value=success;
document.form1.score.value=score;
}
}
}
//游戏开始
functionGameStart(){
playing=true;
interId=setInterval("show()",1000);
document.form1.score.value=score;
document.form1.success.value=success;
timeShow();
}
</script>
</head>
<body>
<divid="content">
<inputtype="button"value="开始游戏"onclick="GameStart()"/>
<inputtype="button"value="结束游戏"onclick="GameOver()"/>
<formname="form1"id="form1">
<label>分数：</label>
<inputtype="text"name="score"size="5">
<label>命中率：</label>
<inputtype="text"name="success"size="10">
<label>倒计时：</label>
<inputtype="text"name="remtime"size="5">
</form>
<table>
<tr>
<tdid="td[0]"onclick="hit(0)"></td>
<tdid="td[1]"onclick="hit(1)"></td>
<tdid="td[2]"onclick="hit(2)"></td>
<tdid="td[3]"onclick="hit(3)"></td>
<tdid="td[4]"onclick="hit(4)"></td>
</tr>
<tr>
<tdid="td[5]"onclick="hit(5)"></td>
<tdid="td[6]"onclick="hit(6)"></td>
<tdid="td[7]"onclick="hit(7)"></td>
<tdid="td[8]"onclick="hit(8)"></td>
<tdid="td[9]"onclick="hit(9)"></td>
</tr>
<tr>
<tdid="td[10]"onclick="hit(10)"></td>
<tdid="td[11]"onclick="hit(11)"></td>
<tdid="td[12]"onclick="hit(12)"></td>
<tdid="td[13]"onclick="hit(13)"></td>
<tdid="td[14]"onclick="hit(14)"></td>
</tr>
<tr>
<tdid="td[15]"onclick="hit(15)"></td>
<tdid="td[16]"onclick="hit(16)"></td>
<tdid="td[17]"onclick="hit(17)"></td>
<tdid="td[18]"onclick="hit(18)"></td>
<tdid="td[19]"onclick="hit(19)"></td>
</tr>
<tr>
<tdid="td[20]"onclick="hit(20)"></td>
<tdid="td[21]"onclick="hit(21)"></td>
<tdid="td[22]"onclick="hit(22)"></td>
<tdid="td[23]"onclick="hit(23)"></td>
<tdid="td[24]"onclick="hit(24)"></td>
</tr>
</table>
</div>
</body>
</html>
流程设计：
- 点击“开始游戏”按钮游戏开始，否则将提示“请点击开始游戏”字样
- 分数、命中率显示重置为“0”，倒计时开始（默认为30秒）
- 老鼠图片不断显示、隐藏，玩家可点击鼠标左键进行游戏
- 当30秒倒计时结束或者玩家主动点击“结束按钮”时，游戏结束并显示游戏结果
实例中用到的图片附件下载
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！