当前位置 :
js打地鼠游戏源码
0粉丝/0关注
举报原因：
&&垃圾广告
&&淫秽色情
&&虚假中奖
&&敏感信息
&&人身攻击
&&骚扰他人
下载该资源用户也下载了
使用邮箱登录17素材网站已改版，请使用新地址访问：
mousehit 一款由html5以及纯js编写的打地鼠游戏，简单易懂，界面友好 WEB(ASP,PHP,...) 238万源代码下载-
&文件名称: mousehit
& & & & &&]
&&所属分类:
&&开发工具: HTML
&&文件大小: 3361 KB
&&上传时间:
&&下载次数: 5
&&提 供 者:
&详细说明：一款由html5以及纯js编写的打地鼠游戏，简单易懂，界面友好-Offered by html5 and js prepared pure play hamster game, easy to understand, user-friendly
文件列表(点击判断是否您需要的文件，如果是垃圾请在下面评价投诉):
&&mousehit\audio\begin_music.ogg&&........\.....\game_music.ogg&&........\.....\game_pass.ogg&&........\.....\no_hit.ogg&&........\.....\over_music.ogg&&........\.....\second_music.ogg&&........\css\main.css&&........\...\main.css.bak&&........\images\bg_canvas.png&&........\......\bg_gameover.png&&........\......\bg_hole.png&&........\......\hammer.png&&........\......\help.png&&........\......\icon.png&&........\......\mouse.png&&........\......\mouse2.png&&........\......\next.png&&........\......\set_board.png&&........\......\star.png&&........\......\time_roller.png&&........\js\classes\Animation.js&&........\..\.......\Audio.js&&........\..\.......\hammer.js&&........\..\.......\mouse.js&&........\..\.......\MouseHit.js&&........\..\.......\MouseHit.js.bak&&........\..\.......\score.js&&........\..\.......\score.js.bak&&........\..\.......\star.js&&........\..\.......\UI.js&&........\..\.......\UI.js.bak&&........\..\frames\mouse.js&&........\..\......\score.js&&........\..\......\star.js&&........\..\main.js&&........\..\resources\audios.js&&........\..\.........\images.js&&........\miao.html&&........\miao.html.bak&&........\.yEngine\component\Bitmap.js&&........\........\.........\Component.js&&........\........\.........\DisplayObject.js&&........\........\..re\my.js&&........\........\utils\buzz.js&&........\........\.....\DOM.js&&........\........\.....\ImageManager.js&&........\........\.....\Math.js&&........\js\classes&&........\..\frames&&........\..\resources&&........\myEngine\component&&........\........\core&&........\........\utils&&........\audio&&........\css&&........\images&&........\js&&........\myEngine&&mousehit
&输入关键字，在本站238万海量源码库中尽情搜索：分享一个html+js实现打地鼠游戏的实例代码-html教程 -PHP中文网QQ群微信公众号还没有收藏分享一个html+js实现打地鼠游戏的实例代码本文主要分享了实现打地鼠小游戏的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧话不多说，请看代码：&!doctype html&
&meta charset=&utf-8&&
&title&打地鼠&/title&
&style type=&text/css&&
#content {
text-align:
margin-top:40
margin:20px 0;
cursor:url(),
background:#00ff33;
&script type=&text/javascript&&
var td = new Array(),
//保存每个格子的地鼠
playing = false,
//游戏是否开始
score = 0, //分数
beat = 0, //鼠标点击次数
success = 0, //命中率
knock = 0, //鼠标点中老鼠图片的次数
countDown = 30, //倒计时
interId = null, //指定 setInterval()的变量
timeId = //指定 setTimeout()的变量
//游戏结束
function GameOver(){
timeStop();
clearMouse();
alert(&游戏结束！\n 你获得的分数为：&+score+&\n 命中率为：&+success);
success = 0;
score = 0;
knock = 0;
countDown = 30;
//显示当前倒计时所剩时间
function timeShow(){
document.form1.remtime.value = countD
if(countDown == 0){
GameOver();
countDown = countDown-1;
timeId = setTimeout(&timeShow()&,1000);
//主动停止所有计时
function timeStop() {
clearInterval(interId);
clearTimeout(timeId);
//随机循环显示老鼠图片
function show(){
if(playing){
var current = Math.floor(Math.random()*25);
document.getElementById(&td[&+current+&]&).innerHTML = '&img src=&http://cdn./notes/pics//tluu1gq8l1b54h.png&&';
setTimeout(&document.getElementById('td[&+current+&]').innerHtml=''&,3000); //使用 setTimeout()实现3秒后隐藏老鼠图片
//清除所有老鼠图片
function clearMouse(){
for(var i=0;i&25;i++){
document.getElementById(&td[&+i+&]&).innerHTML=&&;
//点击事件函数，判断是否点中老鼠
function hit(id){
if(playing == false){
alert(&请点击开始游戏!&);
beat += 1;
if(document.getElementById(&td[&+id+&]&).innerHTML != &&){
score += 1;
knock += 1;
success = knock/
document.form1.success.value =
document.form1.score.value =
document.getElementById(&td[&+id+&]&).innerHTML = &&;
score += -1;
success = knock/
document.form1.success.value =
document.form1.score.value =
//游戏开始
function GameStart(){
interId = setInterval(&show()&,1000);
document.form1.score.value =
document.form1.success.value =
timeShow();
&p id=&content&&
&input type=&button& value=&开始游戏& onclick=&GameStart()& /&
&input type=&button& value=&结束游戏& onclick=&GameOver()& /&
&form name=&form1& id=&form1&&
&label&分数：&/label&
&input type=&text& name=&score& size=&5&&
&label&命中率：&/label&
&input type=&text& name=&success& size=&10&&
&label&倒计时：&/label&
&input type=&text& name=&remtime& size=&5&&
&td id=&td[0]& onclick=&hit(0)&&&/td&
&td id=&td[1]& onclick=&hit(1)&&&/td&
&td id=&td[2]& onclick=&hit(2)&&&/td&
&td id=&td[3]& onclick=&hit(3)&&&/td&
&td id=&td[4]& onclick=&hit(4)&&&/td&
&td id=&td[5]& onclick=&hit(5)&&&/td&
&td id=&td[6]& onclick=&hit(6)&&&/td&
&td id=&td[7]& onclick=&hit(7)&&&/td&
&td id=&td[8]& onclick=&hit(8)&&&/td&
&td id=&td[9]& onclick=&hit(9)&&&/td&
&td id=&td[10]& onclick=&hit(10)&&&/td&
&td id=&td[11]& onclick=&hit(11)&&&/td&
&td id=&td[12]& onclick=&hit(12)&&&/td&
&td id=&td[13]& onclick=&hit(13)&&&/td&
&td id=&td[14]& onclick=&hit(14)&&&/td&
&td id=&td[15]& onclick=&hit(15)&&&/td&
&td id=&td[16]& onclick=&hit(16)&&&/td&
&td id=&td[17]& onclick=&hit(17)&&&/td&
&td id=&td[18]& onclick=&hit(18)&&&/td&
&td id=&td[19]& onclick=&hit(19)&&&/td&
&td id=&td[20]& onclick=&hit(20)&&&/td&
&td id=&td[21]& onclick=&hit(21)&&&/td&
&td id=&td[22]& onclick=&hit(22)&&&/td&
&td id=&td[23]& onclick=&hit(23)&&&/td&
&td id=&td[24]& onclick=&hit(24)&&&/td&
&/html&流程设计：点击“开始游戏”游戏开始，否则将提示“请点击开始游戏”字样分数、命中率显示重置为“0”，倒计时开始（默认为30秒）老鼠图片不断显示、隐藏，玩家可点击鼠标左键进行游戏当30秒倒计时结束或者玩家主动点击“结束按钮”时，游戏结束并显示游戏结果【相关推荐】1. 2. 3. 以上就是分享一个html+js实现打地鼠游戏的实例代码的详细内容，更多请关注php中文网其它相关文章！共3篇937点赞收藏分享：.&猜你喜欢PHP中文网：独家原创，永久免费的在线，php技术学习阵地！
All Rights Reserved | 皖B2-QQ群:关注微信公众号JavaScript实现打地鼠小游戏
作者：画一生情入颜容
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了JavaScript实现打地鼠小游戏的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在写这个打地鼠的游戏开始首先要清楚每一步该做什么
然后再一步一步搭好框架再完善功能。
1.创建table三行三列，用来存放坑（图片）
2.获得所有的图片标签
3.老鼠的动作有①.冒出来
4.②. 老鼠跑了
5.③.老鼠被打死了
6.完善功能
一、首先实现第一步，用table创建一个三行三列的坑
&div id = "content"&
&h2&打地鼠&/h2&&br/&
&table id = "background"&
&td&&img src="./images/keng.gif" &&/td&
&td&&img src="./images/keng.gif" &&/td&
&td&&img src="./images/keng.gif" &&/td&
&td&&img src="./images/keng.gif" &&/td&
&td&&img src="./images/keng.gif" &&/td&
&td&&img src="./images/keng.gif" &&/td&
&td&&img src="./images/keng.gif" &&/td&
&td&&img src="./images/keng.gif" &&/td&
&td&&img src="./images/keng.gif" &&/td&
接下来就是写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');
//随机时间调用入口函数
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";
在通过设置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";
score.innerHTML =
效果图如下：
添加功能二、保存历史最佳纪录
要实现保存历史最佳纪录那么要使用本地存储localStorage对象。在这儿我们主要使用该对象的
localStorage.setItem(“键名”,”值”)，将值以键值对的形式存储到本地。localStorage.getItem(“键名”)；通过键名获得值。
在这里我们只需将利用var preScore = localStorage.getItem(“键名”)获得历史的最佳记录，然后与当前的count进行对比，如果preScore大于当前的count，则不更新历史最佳记录。如果preScore小于了当前的count，那么使preScore=count；再本轮游戏结束后进行存储。
添加功能三、设置倒计时器，控制游戏结束
那么本轮游戏什么时候可以结束，那么就要设置一个计时器。在这里我写了一个一分钟的倒计时器。当sencond等于0，时游戏结束，然后再对
localStorage.setItem(“bestScore”,preScore)，进行更新。
添加功能二和三的代码如下：
function die(){
image[ranK].src = "./images/shang.gif";
image[ranK].removeAttribute("onclick");
image[ranK].style.marginTop = "3px";
score.innerHTML =
if( count & preScore)
score1.innerHTML =
preScore =
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 =
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/&"+"游戏结束！";
text.innerHTML = "当前成绩为："+count+"分"+"&br/&"+"游戏结束！";
countDown(seconds,speed);
效果图如下：
最后附上完整的源代码
&!DOCTYPE html&
&mata charset = "utf-8" /&
&title&打地鼠&/title&
&script src = "/jquery/1.10.2/jquery.min.js"&&/script&
&style type="text/css"&
padding: 0
#background{
background: url(./images/beijing.jpg);
font-family: "微软雅黑";
font-size: 30
padding-left: 100
width: 100
height: 100
margin-top: 31
z-index: 1;
margin-left: 40%;
width: 320
height: 40
background-color:#E8E8E8;
padding-left: 0
text-align:
font-size: 18
line-height: 30
font-family: "微软雅黑";
#count .score{
text-align:
font-size: 20
line-height: 30
font-family: "微软雅黑";
#history #id{
text-align:
font-size: 20
line-height: 30
font-family: "微软雅黑";
width: 180
height: 90
background-color: #E8E8E8;
font-size:20
line-height: 80
text-align:
width: 180
height: 60
background-color:
font-size: 20
text-align:
line-height: 60
margin-top: 0
z-index: 2;
width: 800
height: 600
background :rgba(128,128,128,0.5);
font-size: 30
text-align:
vertical-align:
&div id = "content"&
&h2&打地鼠&/h2&&br/&
&table id = "background"&
&td&&img src="./images/keng.gif" &&/td&
&td&&img src="./images/keng.gif" &&/td&
&td&&img src="./images/keng.gif" &&/td&
&td&&img src="./images/keng.gif" &&/td&
&td&&img src="./images/keng.gif" &&/td&
&td&&img src="./images/keng.gif" &&/td&
&td&&img src="./images/keng.gif" &&/td&
&td&&img src="./images/keng.gif" &&/td&
&td&&img src="./images/keng.gif" &&/td&
&div id = "count"&当前得分 ：&span class = "score"& 0 &/span&分&/div&
&div id = "history"&最佳记录: &span id = "score1"& 0 &/span&分&/div&
&div class = "clock"&&/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 count = 0;
// localStorage.removeItem("bestScore");
// localStorage.removeItem("scoreshow");
preScore = localStorage.getItem("bestScore");
console.log(preScore);
score1.innerHTML = preS
//让老鼠随机出现在一个坑里
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);
}catch(ex){}
//2 老鼠回去了
function paole(){
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(){
image[ranK].src = "./images/shang.gif";
image[ranK].removeAttribute("onclick");
image[ranK].style.marginTop = "3px";
score.innerHTML =
if( count & preScore)
score1.innerHTML =
preScore =
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 =
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/&"+"游戏结束！";
text.innerHTML = "当前成绩为："+count+"分"+"&br/&"+"游戏结束！";
countDown(seconds,speed);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}