js实现打地鼠小游戏

话不多说，请看代码：

<！doctype html><html><head><meta charset="utf-8"><title>打地鼠</title> <style type="text/css">#content { width:960px; margin:0 auto; text-align:center; margin-top:40px; } #form1 { margin:20px 0; } table { margin:0 auto; cursor:url（http://cdn.attach.qdfuns.com/notes/pics/201702/12/115915n79d7hvffengpdxe.png）,auto; } td { width:95px; height:95px; background:#00ff33; } </style> <script type="text/javascript"> var td = new Array（）, //保存每个格子的地鼠 playing = false, //游戏是否开始 score = 0,//分数 beat = 0,//鼠标点击次数 success = 0,//命中率 knock = 0,//鼠标点中老鼠图片的次数 countDown = 30,//倒计时 interId = null,//指定 setInterval（）的变量 timeId = null;//指定 setTimeout（）的变量 //游戏结束 function GameOver（）{timeStop（）;playing = false; clearMouse（）;alert（"游戏结束！
 你获得的分数为："+score+"
 命中率为："+success）;success = 0;score = 0;knock = 0;beat = 0;countDown = 30; } //显示当前倒计时所剩时间 function timeShow（）{ document.form1.remtime.value = countDown; if（countDown == 0）{ GameOver（）; return; }else{ countDown = countDown-1; timeId = setTimeout（"timeShow（）",1000）; } } //主动停止所有计时 function timeStop（） { clearInterval（interId）; clearTimeout（timeId）;} //随机循环显示老鼠图片 function show（）{ if（playing）{ var current = Math.floor（Math.random（）*25）; document.getElementById（"td["+current+"]"）.innerHTML = "<img src="http://cdn.attach.qdfuns.com/notes/pics/201702/12/115915w6tluu1gq8l1b54h.png">"; setTimeout（"document.getElementById（"td["+current+"]"）.innerHtml=""",3000）; //使用 setTimeout（）实现3秒后隐藏老鼠图片 } } //清除所有老鼠图片 function clearMouse（）{ for（var i=0;i<25;i++）{ document.getElementById（"td["+i+"]"）.innerHTML=""; } } //点击事件函数，判断是否点中老鼠 function hit（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; } } } //游戏开始 function GameStart（）{ playing = true; interId = setInterval（"show（）",1000）;document.form1.score.value = score; document.form1.success.value = success; timeShow（）; }</script></head><body> <div id="content"><input type="button" value="开始游戏" onclick="GameStart（）" /><input type="button" value="结束游戏" onclick="GameOver（）" /><form name="form1" id="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="remtime" size="5"></form> <table> <tr><td id="td[0]" onclick="hit（0）"></td> <td id="td[1]" onclick="hit（1）"></td><td id="td[2]" onclick="hit（2）"></td><td id="td[3]" onclick="hit（3）"></td><td id="td[4]" onclick="hit（4）"></td> </tr> <tr><td id="td[5]" onclick="hit（5）"></td><td id="td[6]" onclick="hit（6）"></td><td id="td[7]" onclick="hit（7）"></td><td id="td[8]" onclick="hit（8）"></td><td id="td[9]" onclick="hit（9）"></td> </tr> <tr><td id="td[10]" onclick="hit（10）"></td><td id="td[11]" onclick="hit（11）"></td><td id="td[12]" onclick="hit（12）"></td><td id="td[13]" onclick="hit（13）"></td><td id="td[14]" onclick="hit（14）"></td></tr><tr><td id="td[15]" onclick="hit（15）"></td><td id="td[16]" onclick="hit（16）"></td><td id="td[17]" onclick="hit（17）"></td><td id="td[18]" onclick="hit（18）"></td><td id="td[19]" onclick="hit（19）"></td></tr><tr><td id="td[20]" onclick="hit（20）"></td><td id="td[21]" onclick="hit（21）"></td><td id="td[22]" onclick="hit（22）"></td><td id="td[23]" onclick="hit（23）"></td><td id="td[24]" onclick="hit（24）"></td></tr></table> </div></body></html>

流程设计：

点击“开始游戏”按钮游戏开始，否则将提示“请点击开始游戏”字样
分数、命中率显示重置为“0”，倒计时开始（默认为30秒）
老鼠图片不断显示、隐藏，玩家可点击鼠标左键进行游戏
当30秒倒计时结束或者玩家主动点击“结束按钮”时，游戏结束并显示游戏结果

实例中用到的图片附件下载
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！