案例六 、打地鼠的小游戏

在写这个打地鼠的游戏开始首先要清楚每一步该做什么
然后再一步一步搭好框架再完善功能。

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>

接下来就是写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);
}

四、老鼠的动作：②.老鼠很幸运的跑了
如果执行老鼠跑了的这个函数，那么得做一些改变。首先图片得换成默认的坑的图片。然后移除掉绑定到它身上的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);
}

五、老鼠的动作：③.老鼠很不幸的被我们打死了
老鼠执行该事件得进行以下改变，同样也得移除它身上的click事件，将它的图片换成受伤的图片。

function die(){
        image[ranK].src = "./images/shang.gif";
        image[ranK].removeAttribute("onclick");
        image[ranK].style.marginTop = "3px";
    }

在写完了上面这些代码后，貌似有了完整的功能，实际上却不能执行。因为少了一个入口的函数，即老鼠出来的函数应该被调用，当然，这个函数也应该在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/dish