本文主要分享了js实现打地鼠小游戏的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧

话不多说，请看代码：

打地鼠

#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;

}

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("游戏结束！\n 你获得的分数为："+score+"\n 命中率为："+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 = '';

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();

}

分数：

命中率：

倒计时：

流程设计：点击“开始游戏”按钮游戏开始，否则将提示“请点击开始游戏”字样

分数、命中率显示重置为“0”，倒计时开始(默认为30秒)

老鼠图片不断显示、隐藏，玩家可点击鼠标左键进行游戏

当30秒倒计时结束或者玩家主动点击“结束按钮”时，游戏结束并显示游戏结果

【相关推荐】