JavaScript实现打地鼠小游戏


Posted in Javascript onApril 23, 2020

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

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

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样式后,就可以完美的执行了。效果图如下。

JavaScript实现打地鼠小游戏

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

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

如果想要添加计数功能,那么在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;
 }

效果图如下:

JavaScript实现打地鼠小游戏

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

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

效果图如下:

JavaScript实现打地鼠小游戏

最后附上完整的源代码

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
简单实现jQuery弹幕效果
May 06 #jQuery
javascript编写简易计算器
May 06 #Javascript
JavaScript实现无穷滚动加载数据
May 06 #Javascript
Angularjs2不同组件间的通信实例代码
May 06 #Javascript
jquery实现提示语淡入效果
May 05 #jQuery
Jquery获取radio选中的值
May 05 #jQuery
详解node HTTP请求客户端 - Request
May 05 #Javascript
You might like
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
ExtJS下grid的一些属性说明
2009/12/13 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
Python随机生成带特殊字符的密码
2016/03/02 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
python 多个参数不为空校验方法
2019/02/14 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
教育实习生的自我评价分享
2013/11/21 职场文书
部队学习十八大感言
2014/01/11 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
质量主管工作职责
2014/09/26 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
物业接待员岗位职责
2015/04/15 职场文书
面试复试通知单
2015/04/24 职场文书
红与黑读书笔记
2015/06/29 职场文书
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL
Golang连接并操作MySQL
2022/04/14 MySQL
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android