在写这个打地鼠的游戏开始首先要清楚每一步该做什么
然后再一步一步搭好框架再完善功能。
1.创建table三行三列，用来存放坑（图片）
2.获得所有的图片标签
3.老鼠的动作有①.冒出来
4.②. 老鼠跑了
5.③.老鼠被打死了
6.完善功能
一、首先实现第一步，用table创建一个三行三列的坑
<div id = "content"> <h2>打地鼠</h2><br/> <table id = "background"> <tr> <td><img src="./images/keng.gif" ></td> <td><img src="./images/keng.gif" ></td> <td><img src="./images/keng.gif" ></td> </tr> <tr> <td><img src="./images/keng.gif" ></td> <td><img src="./images/keng.gif" ></td> <td><img src="./images/keng.gif" ></td> </tr> <tr> <td><img src="./images/keng.gif" ></td> <td><img src="./images/keng.gif" ></td> <td><img src="./images/keng.gif" ></td> </tr> </table></div>
接下来就是写js函数。
二、首先获得所有的坑的集合
var image = document.getElementsByTagName(‘img');
三、老鼠的动作有：①.冒出来
老鼠冒出来的坑得获得一个随机的坑，然后将坑的图片替换成地鼠的图片
再将每个老鼠绑定click事件。然后要么打死触发die()函数。要么隔一段时间触发paole()函数
function chulai(){
ranK = Math.floor(Math.random() * 9);
image[ranK].src = "./images/dishu.gif";
image[ranK].style.marginTop = "0px";
image[ranK].setAttribute("onclick","die()");
setTimeout("paole()", Math.random()*400+800);
}
</div>
四、老鼠的动作： ②.老鼠很幸运的跑了
如果执行老鼠跑了的这个函数，那么得做一些改变。首先图片得换成默认的坑的图片。然后移除掉绑定到它身上的click事件。最后再继续调用老鼠出来的函数，chulai();
function paole(){
image[ranK].src = "./images/keng.gif";
image[ranK].style.marginTop = "31px";
image[ranK].removeAttribute("onclick");
setTimeout("chulai()", Math.random()*400+800);
}
</div>
五、老鼠的动作： ③.老鼠很不幸的被我们打死了
老鼠执行该事件得进行以下改变，同样也得移除它身上的click事件，将它的图片换成受伤的图片。
function die(){
image[ranK].src = "./images/shang.gif";
image[ranK].removeAttribute("onclick");
image[ranK].style.marginTop = "3px";
}
</div>
在写完了上面这些代码后，貌似有了完整的功能，实际上却不能执行。因为少了一个入口的函数，即老鼠出来的函数应该被调用，当然，这个函数也应该在Math.random()的随机时间中被调用，即整合后的代码如下。
<script type="text/javascript">
//1 先获取到所有的坑(图片)
var image = document.getElementsByTagName('img');
var ranK;
//随机时间调用入口函数
setTimeout("chulai()",Math.random()*400+800);
//让老鼠随机出现在一个坑里
function chulai(){
ranK = Math.floor(Math.random() * 9);
image[ranK].src = "./images/dishu.gif";
image[ranK].style.marginTop = "0px";
image[ranK].setAttribute("onclick","die()");
setTimeout("paole()", Math.random()*400+800);
}
//2 老鼠回去了
function paole(){
image[ranK].src = "./images/keng.gif";
image[ranK].style.marginTop = "31px";
image[ranK].removeAttribute("onclick");
setTimeout("chulai()", Math.random()*400+800);
}
//3 老鼠被打死了
function die(){
image[ranK].src = "./images/shang.gif";
image[ranK].removeAttribute("onclick");
image[ranK].style.marginTop = "3px";
}
</script>
</div>
在通过设置css样式后，就可以完美的执行了。效果图如下。
上面的主体代码已经完成了。接下来就添加功能。
添加功能一、记录当前打死的老鼠数
如果想要添加计数功能，那么在body中定义一个div块，用来显示当前打死多少只老鼠的字符串。在这里我们设置为id为score。再定义一个变量count，记录当前打死的老鼠数。在die()函数中进行count++。
部分代码如下：
function die(){
image[ranK].src = "./images/shang.gif";
image[ranK].removeAttribute("onclick");
image[ranK].style.marginTop = "3px";
count++;
score.innerHTML =count;
}
</div>
效果图如下：
添加功能二、保存历史最佳纪录
要实现保存历史最佳纪录那么要使用本地存储localStorage对象。在这儿我们主要使用该对象的
localStorage.setItem(“键名”,”值”)，将值以键值对的形式存储到本地。localStorage.getItem(“键名”)；通过键名获得值。
在这里我们只需将利用var preScore = localStorage.getItem(“键名”)获得历史的最佳记录，然后与当前的count进行对比，如果preScore大于当前的count，则不更新历史最佳记录。如果preScore小于了当前的count，那么使preScore=count；再本轮游戏结束后进行存储。
添加功能三、设置倒计时器，控制游戏结束
那么本轮游戏什么时候可以结束，那么就要设置一个计时器。在这里我写了一个一分钟的倒计时器。当sencond等于0，时游戏结束，然后再对
localStorage.setItem(“bestScore”,preScore)，进行更新。
添加功能二和三的代码如下：
function die(){
try{
image[ranK].src = "./images/shang.gif";
image[ranK].removeAttribute("onclick");
image[ranK].style.marginTop = "3px";
count++;
score.innerHTML =count;
if( count > preScore)
{
score1.innerHTML = count;
preScore = count;
}
localStorage.setItem("bestScore",preScore);
}catch(ex){
}
}
//设置一个定时器
var seconds = 59;
var speed = 1000;
function countDown(seconds,speed){
var txt = "剩余时间：" + ((seconds < 10) ? "0" + seconds : seconds) +"秒";
div.innerHTML = txt;
var timeId = setTimeout("countDown(seconds--,speed)",speed);
//如果时间到了
if(seconds == 0){
//对最佳记录进行存储，不管当前有没有打破记录
localStorage.setItem("bestScore",preScore);
clearTimeout(timeId);
if(cover.style.display == "none"){
cover.style.display = "block";
//当没有打到一只老鼠的话显示该信息
if(count === undefined)
text.innerHTML = "当前成绩为："+0+"分"+"<br/>"+"游戏结束！";
//超越了历史记录，此时localStorage.getItem("bestScore")保存的值时当前的count值。显示该信息
else if(count == localStorage.getItem("bestScore"))
{
text.innerHTML = "当前成绩为："+count+"分"+"<br/>"+"恭喜您打破纪录"+"<br/>"+"游戏结束！";
}
else
text.innerHTML = "当前成绩为："+count+"分"+"<br/>"+"游戏结束！";
}
}
}
countDown(seconds,speed);
</div>
效果图如下：
最后附上完整的源代码
<!DOCTYPE html>
<html>
<head>
<mata charset = "utf-8" />
<title>打地鼠</title>
<script src = "http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#background{
background: url(./images/beijing.jpg);
}
h2{
font-family: "微软雅黑";
font-size: 30px;
padding-left: 100px;
}
table td{
width: 100px;
height: 100px;
}
img{
margin-top: 31px;
}
#content{
z-index: 1;
margin-left: 40%;
}
#count{
width: 320px;