JavaScript實現打地鼠小游戲
更新時間：2020年04月23日 11:43:33 作者：畫一生情入顏容
這篇文章主要為大家詳細介紹了JavaScript實現打地鼠小游戲的相關代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在寫這個打地鼠的游戲開始首先要清楚每一步該做什么
然后再一步一步搭好框架再完善功能。
1.創(chuàng)建table三行三列，用來存放坑（圖片）
2.獲得所有的圖片標簽
3.老鼠的動作有①.冒出來
4.②. 老鼠跑了
5.③.老鼠被打死了
6.完善功能
一、首先實現第一步，用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函數。
二、首先獲得所有的坑的集合
var image = document.getElementsByTagName(‘img');
三、老鼠的動作有：①.冒出來
老鼠冒出來的坑得獲得一個隨機的坑，然后將坑的圖片替換成地鼠的圖片
再將每個老鼠綁定click事件。然后要么打死觸發(fā)die()函數。要么隔一段時間觸發(fā)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);
}
四、老鼠的動作： ②.老鼠很幸運的跑了
如果執(zhí)行老鼠跑了的這個函數，那么得做一些改變。首先圖片得換成默認的坑的圖片。然后移除掉綁定到它身上的click事件。最后再繼續(xù)調用老鼠出來的函數，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í)行。因為少了一個入口的函數，即老鼠出來的函數應該被調用，當然，這個函數也應該在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樣式后，就可以完美的執(zhí)行了。效果圖如下。
上面的主體代碼已經完成了。接下來就添加功能。
添加功能一、記錄當前打死的老鼠數
如果想要添加計數功能，那么在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 = "當前成績?yōu)椋?+0+"分"+"<br/>"+"游戲結束！";
//超越了歷史記錄，此時localStorage.getItem("bestScore")保存的值時當前的count值。顯示該信息
else if(count == localStorage.getItem("bestScore"))
{
text.innerHTML = "當前成績?yōu)椋?+count+"分"+"<br/>"+"恭喜您打破紀錄"+"<br/>"+"游戲結束！";
}
else
text.innerHTML = "當前成績?yōu)椋?+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 = "當前成績?yōu)椋?+0+"分"+"<br/>"+"游戲結束！";
else if(count == localStorage.getItem("bestScore")){
text.innerHTML = "當前成績?yōu)椋?+count+"分"+"<br/>"+"恭喜您打破紀錄"+"<br/>"+"游戲結束！";
}
else
text.innerHTML = "當前成績?yōu)椋?+count+"分"+"<br/>"+"游戲結束！";
}
}
}
countDown(seconds,speed);
</script>
</body>
</html>
更多有趣的經典小游戲實現專題，分享給大家：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Chart.js功能與使用方法,結合實例形式分析了Chart.js功能、使用方法及操作注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了js實現屏幕自適應局部代碼分享,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了JS實現動態(tài)給標簽控件添加事件的方法,結合實例形式分析了javascript簡單實現動態(tài)添加事件的相關操作技巧,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了鼠標懸停小圖標顯示大圖標的相關資料,需要的朋友可以參考下2016-01-01
本文給大家介紹的是如何使用百度地圖的自定義控件，附上示例，分享給大家，小伙伴們根據自己的需求稍微改動下即可使用。2015-03-03
Flappy?Bird是13年紅極一時的小游戲，即摁上鍵控制鳥的位置穿過管道間的縫隙。本文將用JS實現這一經典的游戲，需要的可以參考一下2022-04-04
微信小程序開發(fā)中var that =this的用法詳解
這篇文章主要介紹了微信小程序開發(fā)中var that =this的用法詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
調用innerHTML之后，onclick失效了，這也是在意料之中的，因為innerHTML是以文本形式插入的button，所以無法識別onclick事件2014-01-01
這篇文章主要介紹了使用js動態(tài)移動滾動條至底部,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了微信小程序如何獲取openid及用戶信息，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01