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 相关文章推荐
验证javascript中Object和Function的关系的三段简单代码
Jun 27 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
Javascript基础教程之argument 详解
Jan 18 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
vue实现输入一位数字转汉字功能
Dec 13 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更新mysql后获取改变行数的方法
2014/12/25 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
JavaScript的Function详细
2006/11/14 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
axios学习教程全攻略
2017/03/26 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
Python 除法小技巧
2008/09/06 Python
Python判断操作系统类型代码分享
2014/11/22 Python
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
python实现Decorator模式实例代码
2018/02/09 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
python画折线图的程序
2018/07/26 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
庆七一活动方案
2014/01/25 职场文书
安全第一课观后感
2015/06/18 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers