JavaScript實現(xiàn)打地鼠小游戲

更新時間：2020年04月23日 11:43:33 作者：畫一生情入顏容

這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)打地鼠小游戲的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在寫這個打地鼠的游戲開始首先要清楚每一步該做什么

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

1.創(chuàng)建table三行三列，用來存放坑（圖片）
2.獲得所有的圖片標(biāo)簽
3.老鼠的動作有①.冒出來
4.②. 老鼠跑了
5.③.老鼠被打死了
6.完善功能

一、首先實現(xiàn)第一步，用table創(chuàng)建一個三行三列的坑

<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函數(shù)。

二、首先獲得所有的坑的集合

var image = document.getElementsByTagName(‘img');

三、老鼠的動作有：①.冒出來

老鼠冒出來的坑得獲得一個隨機的坑，然后將坑的圖片替換成地鼠的圖片
再將每個老鼠綁定click事件。然后要么打死觸發(fā)die()函數(shù)。要么隔一段時間觸發(fā)paole()函數(shù)

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);
}

四、老鼠的動作： ②.老鼠很幸運的跑了
如果執(zhí)行老鼠跑了的這個函數(shù)，那么得做一些改變。首先圖片得換成默認(rèn)的坑的圖片。然后移除掉綁定到它身上的click事件。最后再繼續(xù)調(diào)用老鼠出來的函數(shù)，chulai();

function paole(){
 image[ranK].src = "./images/keng.gif";
 image[ranK].style.marginTop = "31px";
 image[ranK].removeAttribute("onclick");
 setTimeout("chulai()", Math.random()*400+800);
}

五、老鼠的動作： ③.老鼠很不幸的被我們打死了
老鼠執(zhí)行該事件得進行以下改變，同樣也得移除它身上的click事件，將它的圖片換成受傷的圖片。

function die(){
 image[ranK].src = "./images/shang.gif";
 image[ranK].removeAttribute("onclick");
 image[ranK].style.marginTop = "3px";
 }

在寫完了上面這些代碼后，貌似有了完整的功能，實際上卻不能執(zhí)行。因為少了一個入口的函數(shù)，即老鼠出來的函數(shù)應(yīng)該被調(diào)用，當(dāng)然，這個函數(shù)也應(yīng)該在Math.random()的隨機時間中被調(diào)用，即整合后的代碼如下。

<script type="text/javascript">

//1 先獲取到所有的坑(圖片)
var image = document.getElementsByTagName('img');
var ranK;

//隨機時間調(diào)用入口函數(shù)
setTimeout("chulai()",Math.random()*400+800);
//讓老鼠隨機出現(xiàn)在一個坑里
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>

在通過設(shè)置css樣式后，就可以完美的執(zhí)行了。效果圖如下。

上面的主體代碼已經(jīng)完成了。接下來就添加功能。

添加功能一、記錄當(dāng)前打死的老鼠數(shù)

如果想要添加計數(shù)功能，那么在body中定義一個div塊，用來顯示當(dāng)前打死多少只老鼠的字符串。在這里我們設(shè)置為id為score。再定義一個變量count，記錄當(dāng)前打死的老鼠數(shù)。在die()函數(shù)中進行count++。
部分代碼如下：

function die(){
 image[ranK].src = "./images/shang.gif";
 image[ranK].removeAttribute("onclick");
 image[ranK].style.marginTop = "3px";
 count++;
 score.innerHTML =count;
 }

效果圖如下：

添加功能二、保存歷史最佳紀(jì)錄

要實現(xiàn)保存歷史最佳紀(jì)錄那么要使用本地存儲localStorage對象。在這兒我們主要使用該對象的
localStorage.setItem(“鍵名”,”值”)，將值以鍵值對的形式存儲到本地。localStorage.getItem(“鍵名”)；通過鍵名獲得值。

在這里我們只需將利用var preScore = localStorage.getItem(“鍵名”)獲得歷史的最佳記錄，然后與當(dāng)前的count進行對比，如果preScore大于當(dāng)前的count，則不更新歷史最佳記錄。如果preScore小于了當(dāng)前的count，那么使preScore=count；再本輪游戲結(jié)束后進行存儲。

添加功能三、設(shè)置倒計時器，控制游戲結(jié)束

那么本輪游戲什么時候可以結(jié)束，那么就要設(shè)置一個計時器。在這里我寫了一個一分鐘的倒計時器。當(dāng)sencond等于0，時游戲結(jié)束，然后再對
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){

 }
}

//設(shè)置一個定時器
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){
 //對最佳記錄進行存儲，不管當(dāng)前有沒有打破記錄
 localStorage.setItem("bestScore",preScore);
 clearTimeout(timeId);
 if(cover.style.display == "none"){
 cover.style.display = "block";

 //當(dāng)沒有打到一只老鼠的話顯示該信息
 if(count === undefined)
 text.innerHTML = "當(dāng)前成績?yōu)椋?+0+"分"+"<br/>"+"游戲結(jié)束！";

 //超越了歷史記錄，此時localStorage.getItem("bestScore")保存的值時當(dāng)前的count值。顯示該信息
 else if(count == localStorage.getItem("bestScore"))
 {
 text.innerHTML = "當(dāng)前成績?yōu)椋?+count+"分"+"<br/>"+"恭喜您打破紀(jì)錄"+"<br/>"+"游戲結(jié)束！";
 }
 else
 text.innerHTML = "當(dāng)前成績?yōu)椋?+count+"分"+"<br/>"+"游戲結(jié)束！"; 
 }
 }
}

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">當(dāng)前得分 ：<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;

//讓老鼠隨機出現(xiàn)在一個坑里
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){

 }
}

//設(shè)置一個定時器
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 = "當(dāng)前成績?yōu)椋?+0+"分"+"<br/>"+"游戲結(jié)束！";

 else if(count == localStorage.getItem("bestScore")){
 text.innerHTML = "當(dāng)前成績?yōu)椋?+count+"分"+"<br/>"+"恭喜您打破紀(jì)錄"+"<br/>"+"游戲結(jié)束！";
 }
 else
 text.innerHTML = "當(dāng)前成績?yōu)椋?+count+"分"+"<br/>"+"游戲結(jié)束！";
 } 
 }

}

countDown(seconds,speed);

</script>
</body>
</html>

更多有趣的經(jīng)典小游戲?qū)崿F(xiàn)專題，分享給大家：

C++經(jīng)典小游戲匯總

python經(jīng)典小游戲匯總

python俄羅斯方塊游戲集合

JavaScript經(jīng)典游戲玩不停

java經(jīng)典小游戲匯總

javascript經(jīng)典小游戲匯總

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: