JavaScript实现打地鼠小游戏

前端之家收集整理的这篇文章主要介绍了JavaScript实现打地鼠小游戏前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

1.创建table三行三列,用来存放坑(图片) 2.获得所有的图片标签 3.老鼠的动作有①.冒出来 4.②. 老鼠跑了 5.③.老鼠被打死了 6.完善功能

一、首先实现第一步,用table创建一个三行三列的坑

打地鼠
<tr>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

接下来就是写js函数

二、首先获得所有的坑的集合

var image = document.getElementsByTagName(‘img');

三、老鼠的动作有:

①.冒出来

老鼠冒出来的坑得获得一个随机的坑,然后将坑的图片替换成地鼠的图片 再将每个老鼠绑定click事件。然后要么打死触发die()函数。要么隔一段时间触发paole()函数

四、老鼠的动作:

②.老鼠很幸运的跑了 如果执行老鼠跑了的这个函数,那么得做一些改变。首先图片得换成默认的坑的图片。然后移除掉绑定到它身上的click事件。最后再继续调用老鼠出来的函数,chulai();

五、老鼠的动作:

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

在写完了上面这些代码后,貌似有了完整的功能,实际上却不能执行。因为少了一个入口的函数,即老鼠出来的函数应该被调用,当然,这个函数也应该在Math.random()的随机时间中被调用,即整合后的代码如下。

//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",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";

}

在通过设置css样式后,就可以完美的执行了。效果图如下。

上面的主体代码已经完成了。接下来就添加功能

添加功能一、记录当前打死的老鼠数

如果想要添加计数功能,那么在body中定义一个div块,用来显示当前打死多少只老鼠的字符串。在这里我们设置为id为score。再定义一个变量count,记录当前打死的老鼠数。在die()函数中进行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),进行更新。 添加功能二和三的代码如下:

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+"分"+"
"+"游戏结束!";

//超越了历史记录,此时localStorage.getItem("bestscore")保存的值时当前的count值。显示该信息
else if(count == localStorage.getItem("bestscore"))
{
text.innerHTML = "当前成绩为:"+count+"分"+"
"+"恭喜您打破纪录"+"
"+"游戏结束!";
}
else
text.innerHTML = "当前成绩为:"+count+"分"+"
"+"游戏结束!";
}
}
}

countDown(seconds,speed);

效果图如下:

这里写图片描述

最后附上完整的源代码

打地鼠

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

猜你在找的JavaScript相关文章