抱歉素材有点难找，这次的学习重点是在JS的实现，梳理一下打地鼠的实现逻辑，主要分为三个主要功能函数。
- 开始游戏：对分数、并根据游戏难度对游戏的倒计时和延迟进行初始化之后，利用setInterval定时器Math.random随机函数实现地鼠间隔一定时间随机出现在方块中的位置。其中表格可以使用table布局或者网格布局。
- 打地鼠：为了避免多次点击多次计算得分，用一个标志位来标志第一次点击，如果当前点击方块的itemid对应的方框里面有地鼠的样式，则得分+1
- 结束游戏：还原表格的布局之后将计算的得分反馈给用户
大概的展示如下
代码如下：
var startGame;//计时器
var score = 0;//总分
var time;//倒计时
var timeVal;//时间间隔
var curr_td = '';//难度改变，对应其实分数改变
function changeTimeValue(){var diff = document.getElementById("diffculty").value;if(diff == 'high'){document.getElementById("time").value = 30;}else if(diff == 'normal'){document.getElementById("time").value = 60;}else{document.getElementById("time").value = 120;};
}//开始游戏
function showMouse(){score = 0;//总分var diff = document.getElementById("diffculty").value;if(diff == 'high'){time = 30;timeVal = 500;}else if(diff == 'normal'){time = 60;timeVal = 1000;}else{time = 120;timeVal = 2000;}//开始游戏之后禁用开始游戏和选择难度document.getElementById("start").disabled = true;document.getElementById("diffculty").disabled = true;startGame = window.setInterval(function(){//清空所有表格里的imgvar itemArr = document.getElementsByTagName('td');for (var i = 0; i < itemArr.length; i++) {itemArr[i].style.backgroundColor = '#00ff35';itemArr[i].innerHTML = '';};//生成一个1~25的随机数var mouse = parseInt(Math.random()*25+1);var index = 'item_'+mouse;time = time - 1;document.getElementById("time").value = time;if(time <= 0){document.getElementById("score").value = 0;changeTimeValue();window.clearInterval(startGame); alert('游戏结束，你的得分是'+score);//游戏结束之后重新启用开始游戏和选择难度document.getElementById("start").disabled = false;document.getElementById("diffculty").disabled = false;return false;}//操作domdocument.getElementById(index).style.backgroundColor = '#ffffff';document.getElementById(index).innerHTML = '<img src="./image/mouse.jpg" height="50px;" width="50px;">';},timeVal);
};
//停止游戏
function stop(){var itemArr = document.getElementsByTagName('td');window.clearInterval(startGame); for (var i = 0; i < itemArr.length; i++) {itemArr[i].style.backgroundColor = '#00ff35';itemArr[i].innerHTML = '';};document.getElementById("score").value = 0;changeTimeValue();alert('游戏结束，你的得分是'+score); //点击停止结束之后重新启用开始游戏和选择难度document.getElementById("start").disabled = false;document.getElementById("diffculty").disabled = false;
};
//打地鼠
function bump(itemid){//防止多次点击if(curr_td == itemid){return false;};curr_td = itemid;var itemId = 'item_' + itemid;//var curr_item = document.getElementById('itemId');if(document.getElementById(itemId).innerHTML != ''){score = score + 1;document.getElementById("score").value = score;};
}
