在写这个打地鼠的游戏开始首先要清楚每一步该做什么

然后再一步一步搭好框架再完善功能。

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/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>

在通过设置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; }

效果图如下：

添加功能二、保存历史最佳纪录

要实现保存历史最佳纪录那么要使用本地存储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);

效果图如下：

最后附上完整的源代码

<!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; height: 40px; background-color:#E8E8E8; padding-left: 0px; text-align: center; color: red; font-size: 18px; line-height: 30px; font-family: "微软雅黑"; } #count .score{ text-align: center; color: lightgreen; font-size: 20px; line-height: 30px; font-family: "微软雅黑"; } #history #id{ text-align: center; color: lightgreen; font-size: 20px; line-height: 30px; font-family: "微软雅黑"; } #history{ position: absolute; top:60px; right:240px; width: 180px; height: 90px; background-color: #E8E8E8; color: lightblue; font-size:20px; line-height: 80px; text-align: center; } .clock{ position: absolute; top:0px; right:240px; width: 180px; height: 60px; background-color: lightblue; color: red; font-size: 20px; text-align: center; line-height: 60px; } #cover{ margin-top: 0px; position: absolute; z-index: 2; width: 800px; height: 600px; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; background :rgba(128,128,128,0.5); color: red; font-size: 30px; text-align: center; vertical-align: middle; } </style></head><body><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 id = "count">当前得分 ：<span class = "score"> 0 </span>分</div><div id = "history">最佳记录: <span id = "score1"> 0 </span>分</div><div class = "clock"></div></div><div id = "cover" style="display:none"> <span id = "text"></span></div><script type="text/javascript">//1 先获取到所有的坑(图片)var content = document.getElementById('content');var cover = document.getElementById('cover');var image = document.getElementsByTagName('img');var countMouse = document.getElementById('count');var score = countMouse.querySelector(".score");var history = document.getElementById("history");var score1 = document.getElementById("score1");var div = document.querySelector(".clock");var text = document.getElementById("text");var preScore = 0;var ranK;var count = 0;// localStorage.removeItem("bestScore");// localStorage.removeItem("scoreshow");preScore = localStorage.getItem("bestScore");console.log(preScore);score1.innerHTML = preScore;//让老鼠随机出现在一个坑里setTimeout("chulai()",Math.random()*400+800);function chulai(){ try{ 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); }catch(ex){}}//2 老鼠回去了function paole(){ try{ image[ranK].src = "./images/keng.gif"; image[ranK].style.marginTop = "31px"; image[ranK].removeAttribute("onclick"); setTimeout("chulai()", Math.random()*400+800); }catch(ex){}}//3 老鼠被打死了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("scoreshow",count); localStorage.setItem("bestScore",preScore); clearTimeout(timeId); if(cover.style.display == "none"){ cover.style.display = "block"; if(count === undefined) text.innerHTML = "当前成绩为："+0+"分"+"<br/>"+"游戏结束！"; else if(count == localStorage.getItem("bestScore")){ text.innerHTML = "当前成绩为："+count+"分"+"<br/>"+"恭喜您打破纪录"+"<br/>"+"游戏结束！"; } else text.innerHTML = "当前成绩为："+count+"分"+"<br/>"+"游戏结束！"; } }}countDown(seconds,speed);</script></body></html>

更多有趣的经典小游戏实现专题，分享给大家：

C++经典小游戏汇总

python经典小游戏汇总

python俄罗斯方块游戏集合

JavaScript经典游戏 玩不停

java经典小游戏汇总

javascript经典小游戏汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。