JavaScript

超轻量级php框架startmvc

首页 JavaScript JavaScript实现打地鼠小游戏

JavaScript实现打地鼠小游戏

更新时间：2020-05-10 08:42:01 作者：startmvc
在写这个打地鼠的游戏开始首先要清楚每一步该做什么然后再一步一步搭好框架再完善功能

在写这个打地鼠的游戏开始首先要清楚每一步该做什么 然后再一步一步搭好框架再完善功能。

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

js 打地鼠 小游戏
文章分类
相关文章

js判断在哪个浏览器打开项目的方法

JS面向对象之单选框实现

JS面向对象之多选框实现

JavaScript简易计算器制作

javascript实现简易的计算器

js实现轮播图效果 z-index实现轮播图

js滚轮事件 js自定义滚动条的实现

JS数组方法join()用法实例分析

JS数组方法push()、pop()用法实例分析

JavaScript实现滑动门效果

JS数组方法shift()、unshift()用法实例分析

JS实现横向轮播图（初级版）

JS数组方法reverse()用法实例分析

JS实现纵向轮播图（初级版）

JS数组方法concat()用法实例分析

JS实现横向轮播图（中级版）

JS数组方法slice()用法实例分析

如何通过Django使用本地css/js文件

ES6如何用一句代码实现函数的柯里化

JS基础之逻辑结构与循环操作示例