一、遊戲說明
1、簡要說明
打地鼠是我們非常熟悉的一款小遊戲，它的遊戲結構和規則也都比較簡單。那麼如果能夠親自徒手開發這樣的一款經典小遊戲呢？接下來筆者将使用H5+CSS3+JS+jQuery的組合實作完整的打地鼠小遊戲，過程中會對所有代碼進行詳細的說明及注釋。以確定對JS和jQuery不是很熟悉的朋友也能夠看懂。（我們并不需要學完所有的JS和jQuery的技術再來進行實踐，事實上我們應該多結合實踐，把學到的技能應用在實戰中，并且在實戰不斷擴充自己的技能，修煉自己的思維）。
2、效果示範
下面對我們最終實作的打地鼠遊戲進行一個簡單的示範：
事實上最終的效果是帶有背景音效跟擊中目标音效的，由于無法添加視訊類檔案而無法展示。
二、功能分析
我們從遊戲的流程開始進行分析，分為進行遊戲以前，遊戲進行過程中，遊戲結束後。每個階段都有不同的效果，我們将針對每一個不同階段的功能進行分析和說明，并探讨其實作方式。
1、進行遊戲之前
進入遊戲，我們首先看到的是一個選擇界面，其中有三個選項：
（1）開始遊戲：點選進入遊戲。
（2）背景音樂：點選之後開啟背景音樂，預設為選中狀态
（3）遊戲音效：選中之後開啟遊戲中的擊打音效，打中地鼠時發出擊打的聲音。
2、遊戲進行中
遊戲運作的過程是我們主要實作的效果，包括三個部分。
（1）遊戲的主界面：老鼠出沒的洞，以及随機出現的老鼠，這是最為關鍵的部分
（2）剩餘時間及當期得分：剩餘時間執行倒計時，打開一個目标當期得分加1
（3）擊打的錘子：用于擊打目前。（截屏時無法擷取）
3、遊戲結束
（1）遊戲結束提示：螢幕正中央出現“遊戲結束”提示
（2）剩餘時間和目前得分：剩餘時間顯示為0，目前得分正常顯示，且不再變動
（3）鼠洞及老鼠消失。
要說明的是，遊戲進行的順序并不一定是我們代碼設計的順序，進行編碼時，如果是獨立開發，那我們應當首先實作遊戲的主體功能，然後再完善和添加次要或輔助功能。
三、開發前規劃
1、目錄結構規劃
在進行正式的開發之前，我們首先要進行目錄結構的設計。首先要有一個主要的界面，是以我們加入一個
index.html
作為主要的展示頁面；為了實作樣式的分離，我們專門建立一個
index.css
樣式檔案；
除此之外，我們還分别需要一個專門放置圖檔和音效的檔案夾，分别命名為：image和audio
2、開發順序規劃
（1）遊戲首頁面鋪設：遊戲的主體頁面是我們首先要鋪設的
（2）鼠洞及老鼠填入：在界面上增加16個鼠洞，每個鼠洞有一個老鼠
（3）老鼠“随機出現”效果實作：其實我們是用設定“隐藏”和“出現”的方式來實作老鼠“随機出現”的效果，是以上面需要在每個鼠洞的位置出現一個老鼠。
（4）打擊效果及分數增加：當我們每次擊中目标，分數加1
（5）倒計時設定：設定倒計時，并在倒計時結束時遊戲結束
（6）“制作”錘子：将光标變為錘子對老鼠進行擊打。
（7）添加遊戲音效及遊戲開始前的選擇界面。
四、代碼實作
1、主體頁面布局
我們首先鋪設遊戲的主體背景，通過“背景圖”方式來實作：
這裡出現一個問題，我們以什麼樣的方式實作背景圖？是用一個
div
？還是在
body
上加一個背景圖？考慮到背景圖是為整個界面鋪設，需要鋪滿整個螢幕，是以我們采用第二種方式。
此時的
index.html
檔案為：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打地鼠遊戲</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
</html>
此時的i
ndex.css
檔案為：
*{
margin:0px;
padding:0px;
}
body{
background-image: url(./image/gress9.jpg);
}
此時在浏覽器中打開
index.html
顯示效果為：
說明：大家可以找到足夠大的圖來鋪設界面，而不必平鋪。
2、16個鼠洞的鋪設
（1）确定遊戲主區域
首先我們在遊戲界面中選中一塊區域作為鼠洞鋪設的位置：
<!--添加一個空的div，并再css檔案中添加樣式-->
<div class="area">
</div>
/*area為遊戲主區域*/
.area{
width:800px;
height:640px;
border:1px solid red;
margin:0px auto;
}
此時在浏覽器中打開
index.html
顯示效果為：
加邊框的區域即為我們要放置鼠洞的位置
·
我們計劃加入16個鼠洞，沒行四個。有兩種方式可以添加，一種是手動建16個
div
，但明顯這種方式是低效的。是以我們将利用JS循環來添加16個鼠洞，在這裡我們将引入jQuery，友善我們的操作。引入jQuery也同樣有兩種方式，一種是本地下載下傳引入，另一種是網絡引入。我們選擇第二種，建議選取百度的下載下傳位址，因為國外的不太穩定。
引入後，為了測試是否引入成功，我們進行測試：
alert($)
如果出現下面的效果，則說明顯示成功：
接下來我們用js循環實作鼠洞添加：
<script>
var hole = "<div class='hole'><img src='./image/mouse2.jpg' alt='' /></div>"
var holenum = 16;
//利用循環将16個洞添加到遊戲主區域中
for(var i=0;i<holenum;i++){
$(".area").append(hole);
}
alert($)
</script>
給鼠洞添加樣式：
.hole{
width:180px;
height:130px;
background-color: #ccc;
border:1px solid red;
}
此時在浏覽器中打開
index.html
顯示效果為：
很明顯我們需要對
.hole
繼續添加樣式：
此時在浏覽器中打開
index.html
顯示效果為：
這是由于邊框的緣故，我們去除邊框：
這樣排列就整齊了，但是看上去“小黃人”并不是在洞裡面的，而且洞的形狀應該是橢圓形，是以我們繼續對
.hole
添加樣式：
此時在浏覽器中打開
index.html
顯示效果為：
發現小黃人并不在洞的中間，是以還要對每張圖檔進行定位：
此時在浏覽器中打開
index.html
顯示效果為：
這樣就将小黃人的位置放到了洞的中間。到這裡可能大家就明白我們要做什麼的了：首先我們将小黃人全部設定為隐藏，然後利用JS設定随機出現。實際上老鼠随機出現的效果，就是我們控制了圖檔的隐藏和消失。
到目前為止，我們所有的編寫的代碼内容為：
（1）
index.html
檔案
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打地鼠遊戲</title>
<link rel="stylesheet" href="index.css">
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="area">
</div>
<script>
var hole = "<div class='hole'><img src='./image/mouse2.jpg' alt='' /></div>"
var holenum = 16;
//利用循環将16個洞添加到遊戲主區域中
for(var i=0;i<holenum;i++){
$(".area").append(hole);
}
// alert($)
</script>
</body>
</html>
(2)
css.index
檔案
*{
margin:0px;
padding:0px;
}
body{
background-image: url(./image/gress9.jpg);
}
.area{
width:800px;
height:640px;
/*border:1px solid red;*/
margin:0px auto;
}
.hole{
width:180px;
height:130px;
margin-top:30px;
margin-right:20px;
background-color: #ccc;
/*border:1px solid red;*/
float: left;
border-radius:50%;
box-shadow: 10px 10px 5px green inset;
position: relative;
}
.hole img{
position: absolute;
bottom:20px;
left:20px;
}
下面的問題是：我們如何設定老鼠的随機出現，并且擊中後分數增加，同時倒計時在進行呢？這是我們這個打地鼠小遊戲要實作的主要功能。毫無問題這些動态效果的實作是要用JS及jQuery來實作的，我們将在下一節進行代碼實作。下面是第二節的位址連結：
“打地鼠”遊戲開發（2）—超詳細遊戲主體功能代碼實作（基于H5+CSS3+JS+jQuery實作）
https://blog.csdn.net/qq_32925031/article/details/88638411