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 相关文章推荐
js 纯数字不重复排列的另类方法
Jul 17 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
vue实现购物车选择功能
Jan 10 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 Javascript
js动态生成表格(节点操作)
Jan 12 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+oracle 分页类
2006/10/09 PHP
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
go和python变量赋值遇到的一个问题
2017/08/31 Python
Python tkinter label 更新方法
2018/10/11 Python
详解Python 正则表达式模块
2018/11/05 Python
python实现五子棋小程序
2019/06/18 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
自我评价怎么写正确呢?
2013/12/02 职场文书
中专自我鉴定
2014/02/05 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
2014年营业员工作总结
2014/11/18 职场文书
2014年销售经理工作总结
2014/12/01 职场文书