JavaScript实现打地鼠小游戏
在写这个打地鼠的游戏开始首先要清楚每一步该做什么
然后再一步一步搭好框架再完善功能。
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办,不知道具体解决办法的下面跟小编一起来看看。 因项目需要,需要Node.js与PHP做接口调用,发现nod...2017-07-06
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20