jQuery實現打地鼠遊戲
這是一個jQuery實現的簡單HTML打地鼠遊戲。地鼠是沒有的了，只有pop子和pip美。遊戲規則
- 遊戲時間爲60秒；
- 擊中pop子則獎勵10分；
- 擊中pip美則懲罰10分。
項目的目錄分級爲
- code文件夾
- css文件夾
- js文件夾
- images文件夾
- index.html
一、HTML部分
我這裏引用的jQuery版本是1.12.4版本，可以點擊這裏下載jQuery1.12.4版本（或者2.2.4版本或者3.1.1版本）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pop_pip</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="container">
<div class="timer">60</div>
<div class="score">0</div>
<button class="start">開始遊戲</button>
<div class="rules">遊戲規則</div>
<div class="rule">
<p>遊戲規則</p>
<p>1.遊戲時間爲60秒</p>
<p>2.擊中pop子獎勵10分</p>
<p>3.擊中pip美懲罰10分</p>
<a href="#" class="close">返回</a>
</div>
<div class="mask">
<h1>GAME OVER</h1>
<button class="restart">重新開始</button>
</div>
</div>
</body>
</html>二、CSS部分
背景圖是百度圖片裏的，然後修改了一下下，自己拿來當背景圖了。CSS部分就設置一下開始按鈕、重新開始按鈕、遊戲規則按鈕等頁面佈局。
*{
margin: 0;
padding: 0;
}
.container{
width: 1280px;
height: 720px;
background: url(../images/background.png) no-repeat 0 0;
margin: 50px auto;
}
.container>.timer{
font-size: 30px;
color: white;
margin-left: 500px;
padding-top: 25px;
display: inline-block;
}
.container>.score{
font-size: 30px;
color: white;
margin-left: 200px;
display: inline-block;
}
.container>.start{
width: 150px;;
line-height: 45px;
font-size: 20px;
text-align: center;
color: white;
background:linear-gradient(rgb(255,230,76), rgb(255,180,60));
border-radius: 17px;
border: none;
position: absolute;
top: 425px;
left: 50%;
margin-left: -75px;
display: block;
}
.container>.rules{
width: 150px;;
line-height: 45px;
font-size: 20px;
text-align: center;
color: white;
background:linear-gradient(rgb(255,230,76), rgb(255,180,60));
border-radius: 17px;
border: none;
position: absolute;
top: 500px;
left: 50%;
margin-left: -75px;
display: block;
}
.container>.rule{
width: 100%;
height: 100%;
text-align: center;
background: rgba(0,0,0,0.5);
position: absolute;
left: 0px;
top: 0px;
padding-top: 200px;
box-sizing: border-box;
display: none;
}
.rule>p{
font-size: 20px;
line-height: 200%;
color: white;
}
.rule>a{
color: yellow;
}
.container>.mask{
width: 100%;
height: 100%;
text-align: center;
background: rgba(0,0,0,0.5);
position: absolute;
left: 0px;
top: 0px;
padding-top: 200px;
box-sizing: border-box;
display: none;
}
.mask>h1{
font-size: 40px;
padding-top: 100px;
color:rgb(255,180,60);
text-shadow: 3px 3px 0 rgb(255,255,255);
}
.mask>button{
width: 150px;;
line-height: 45px;
font-size: 20px;
color: white;
background:linear-gradient(rgb(0,210,219), rgb(0,100,180));
border-radius: 17px;
border: none;
position: absolute;
top: 425px;
left: 50%;
margin-left: -75px;
}三、jQuery實現功能
1.監聽遊戲規則按鈕的點擊
先找到規則所在的div，如果監聽到點擊事件，那麼將原先隱藏（dispaly:none）的詳細規則淡入顯示出來。
$(function () {
//監聽遊戲規則的點擊
$(".rules").click(function () {
$(".rule").stop().fadeIn(100);
})點擊規則的關閉按鈕，同樣需要將詳細規則淡出。
2.監聽開始遊戲按鈕的點擊
點擊開始按鈕後，需要隱藏按鈕，並且遊戲時間開始倒計時且顯示動畫。
$(".start").click(function () {
$(this).stop().fadeOut(100);
$(".rules").stop().fadeOut(100);
progressHandler();
startpopAnimation();
})2.1 控制遊戲時間倒計時
function progressHandler() {
$(".timer").html(60);
var timer = setInterval(function () {
var t = $(".timer").text();
t --;
if(t<=0){
clearInterval(timer);
$(".mask").stop().fadeIn(100);
}
if(t < 10){
$(".timer").html('0'+t);
}
else{
$(".timer").html(t);
}
},1000)
}2.2 設置開始動畫的函數startpopAnimation()
首先存放pop子和pip美的動畫圖片，比如這種：
當然，這組圖我沒有用。
//建立一個數組存放pop子的圖片
var pop=['./images/pop_x0.png',
/*省略很多很多字*/
'./images/pop_x12.png'];
//建立一個數組存放pip美的圖片
//存放15個洞的位置
var arr=[
{left:"430px",top:"210px"},
//省略……
{left:"1152px",top:"508px"}
];然後就開始設置動畫出現的效果。生成[0，14]內的隨機數作爲pop子或者是pip美出沒的洞位置。當一組動畫顯示完後，當然要將原先的圖片remove一下，纔不會一直停留在頁面中。
//創建一個圖片
var image = $("<img src='' class='image'> ");
//隨機獲取圖片的位置
var pos = getRandom(0,14);
//設置圖片顯示的位置
image.css({
position:"absolute",
left:arr[pos].left,
top:arr[pos].top
});
//隨機獲取數組類型pop或者pip
var array = Math.round(Math.random()) == 0 ? pop : pip;
//設置圖片的內容
window.index = 0;
window.indexEnd = 6;
animationTimer = setInterval(function () {
if(index > indexEnd){
image.remove();
clearInterval(animationTimer);
startpopAnimation();
}
image.attr("src",array[index]);
index ++;
},300);
//將圖片添加到界面上
$(".container").append(image);
//調用處理遊戲規則方法
gameRules(image);2.3 獲取隨機數
因爲共有十五個洞，所以我們生成的隨機數需要在[0，14]這個區間內，用這個隨機數作爲出現圖片的洞的位置。具體實現代碼如下：
function getRandom(min, max) {
var num1 = Math.random() * (max - min);
var num2 = Math.round(num1 + min);
num2 = Math.max(Math.min(num2,max),min);
return num2;
}用Math.random函數隨機生成0，0.1，0.2，0.3，0.4，0.5，0.6，0.7，0.8，0.9，1之間的任一個數。Math.round是向上取整，即四捨五入。
2.4 設置停止動畫函數
弄完以上的步驟之後，遊戲還存在bug，當倒計時結束之後，彈出了GAME OVER之後，動畫還在繼續。所以我們需要在遊戲結束後停止動畫。即remove圖片，並且停掉動畫的定時器。在倒計時函數中，如果時間爲零，需要調用停止動畫函數。
2.5 設置遊戲規則
我們在開始有提到三個遊戲規則。遊戲時間已經設定好，現在需要設置一下得分規則，如果點擊pop子，加10分；如果擊中pip美，減10分。
“生氣了嗎？”“生氣了哦。”
而且點擊圖片之後，要將pop子或者pip美被打到的動畫顯示出來。這時需要修改動畫下標的索引。
function gameRules(image) {
image.one("click",function () {
//修改索引
window.index = 6;
window.indexEnd = 12;
//拿到當前點擊圖片的地址
var $src = $(this).attr("src");
//根據圖片地址判斷是否是pop
var flag = $src.indexOf("o") >= 0;
//根據點擊的圖片類型增減分數
if(flag){
$(".score").text(parseInt($(".score").text())+10);
}
else{
$(".score").text(parseInt($(".score").text())-10);
}
})
}3.監聽重新開始按鈕的點擊
淡出重新開始按鈕，將分數置零，重新調用倒計時函數以及開始動畫函數。
源代碼可在這裏下載。