狂拍灰太狼
使用
jQuery語法實現的新浪微博頁面我要實現的功能：
- 點擊開始遊戲按鈕，開始遊戲
- 遊戲有時間進度條
- 遊戲結束以後可以點擊重新開始按鈕，重新開始遊戲
- 有遊戲規則
- 點擊灰太狼加 10 分，點擊小灰灰減 10 分，並且只能點擊一次，以防用戶一直點
- 點擊之前顯示沒有被平底鍋打擊的圖片，點擊之後顯示被平底鍋打擊的圖片
- 遊戲結束，動畫結束
- 首先，佈局HTML頁面
<!--
* @Author: 碼小余
* @Date: 2020-06-18 14:32:44
* @LastEditTime: 2020-06-18 17:35:16
* @FilePath: \代碼\56-狂拍灰太狼\index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>狂拍灰太狼</title>
<link rel="stylesheet" href="css/index.css" />
<script src="js/jquery-1.12.4.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="container">
<h1 class="score">0</h1>
<div class="progress"></div>
<button class="start">開始遊戲</button>
<div class="rules">遊戲規則</div>
<div class="rule">
<p>遊戲規則</p>
<p>1.遊戲時間:60s</p>
<p>2.拼手速，毆打灰太狼+10分</p>
<p>3.毆打小灰灰-10分</p>
<a href="#" class="close">[關閉]</a>
</div>
<div class="mask">
<h1>GAME OVER</h1>
<button class="reStart">重新開始</button>
</div>
</div>
</body>
</html>
- 編寫css樣式代碼
* {
margin: 0;
padding: 0;
}
.container {
width: 320px;
height: 480px;
background: url("../images/game_bg.jpg") no-repeat 0 0;
margin: 50px auto;
position: relative;
}
.container > h1 {
color: #fff;
margin-left: 60px;
}
.container > .progress {
width: 180px;
height: 16px;
background: url("../images/progress.png") no-repeat 0 0;
position: absolute;
top: 66px;
left: 63px;
}
.container > .start {
width: 150px;
line-height: 35px;
text-align: center;
color: #fff;
background: linear-gradient(#e55c3d, #c50000);
border-radius: 20px;
border: none;
outline: none;
font-size: 20px;
position: absolute;
top: 320px;
left: 50%;
margin-left: -75px;
}
.container > .rules {
width: 100%;
height: 20px;
background: #ccc;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}
.container > .rule {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
top: 0;
padding-top: 100px;
box-sizing: border-box;
text-align: center;
display: none;
}
.rule > p {
line-height: 50px;
color: #fff;
}
.rule > a {
text-decoration: none;
color: red;
}
.container > .mask {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
top: 0;
padding-top: 200px;
box-sizing: border-box;
text-align: center;
display: none;
}
.mask > h1 {
color: #ff4500;
text-shadow: 3px 3px 0 #fff;
font-size: 40px;
}
.mask > button {
width: 150px;
line-height: 35px;
text-align: center;
color: #fff;
background: linear-gradient(#74accf, #007ddc);
border-radius: 20px;
border: none;
outline: none;
font-size: 20px;
position: absolute;
top: 320px;
left: 50%;
margin-left: -75px;
}
- 編寫js代碼
/*
* @Author: 碼小余
* @Date: 2020-06-18 14:32:18
* @LastEditTime: 2020-06-18 18:38:53
* @FilePath: \代碼\56-狂拍灰太狼\js\index.js
*/
$(function () {
// 1. 監聽遊戲規則的點擊
$(".rules").click(function (e) {
$(".rule").stop().fadeIn(100);
});
// 2. 監聽關閉按鈕的點擊
$(".close").click(function (e) {
$(".rule").stop().fadeOut(100);
});
// 3. 監聽開始按鈕的點擊
$(".start").click(function (e) {
$(this).stop().fadeOut(100);
// 調用處理進度條的方法
progressHandler();
// 調用處理灰太狼動畫的方法
startWolfAnimation();
});
// 4. 監聽重新開始按鈕的點擊
$(".reStart").click(function () {
// 得分重置爲0
$(".score").text(0);
$(".mask").stop().fadeOut(100);
// 調用處理進度條的方法
progressHandler();
// 調用開始灰太狼動畫的方法
startWolfAnimation();
});
// 定義一個專門處理進度條的方法
function progressHandler() {
// 重新設置進度條的寬度
$(".progress").css({
width: 180,
});
// 開啓定時器處理進度條
var timer = setInterval(function () {
// 拿到進度條當前的寬度
var progressWidth = $(".progress").width();
// 減少當前的寬度
progressWidth -= 1;
// 重新給進度條賦值寬度
$(".progress").css({
width: progressWidth,
});
// 監聽進度條是否走完
if (progressWidth <= 0) {
// 關閉定時器
clearInterval(timer);
// 顯示重新開始界面
$(".mask").stop().fadeIn(100);
// 停止灰太狼的動畫
stopWolfAnimation();
}
}, 100);
return timer;
}
var wolfTimer;
// 定義一個專門處理灰太狼動畫的方法
function startWolfAnimation() {
// 1.定義兩個數組保存所有灰太狼和小灰灰的圖片
var wolf_1 = [
"./images/h0.png",
"./images/h1.png",
"./images/h2.png",
"./images/h3.png",
"./images/h4.png",
"./images/h5.png",
"./images/h6.png",
"./images/h7.png",
"./images/h8.png",
"./images/h9.png",
];
var wolf_2 = [
"./images/x0.png",
"./images/x1.png",
"./images/x2.png",
"./images/x3.png",
"./images/x4.png",
"./images/x5.png",
"./images/x6.png",
"./images/x7.png",
"./images/x8.png",
"./images/x9.png",
];
// 2.定義一個數組保存所有可能出現的位置
var arrPos = [
{ left: "100px", top: "115px" },
{ left: "20px", top: "160px" },
{ left: "190px", top: "142px" },
{ left: "105px", top: "193px" },
{ left: "19px", top: "221px" },
{ left: "202px", top: "212px" },
{ left: "120px", top: "275px" },
{ left: "30px", top: "295px" },
{ left: "209px", top: "297px" },
];
// 3. 創建一個圖片
var $wolfImage = $("<img src='' class='wolfImage'>");
// 隨機獲取圖片的位置
var posIndex = Math.round(Math.random() * 8);
// 4. 設置圖片顯示的位置
$wolfImage.css({
position: "absolute",
left: arrPos[posIndex].left,
top: arrPos[posIndex].top,
});
// 隨機獲取數組的類型
var wolfType = Math.round(Math.random()) == 0 ? wolf_1 : wolf_2;
// 5. 設置圖片的內容
window.wolfIndex = 0;
window.wolfIndexEnd = 5;
wolfTimer = setInterval(function () {
if (wolfIndex > wolfIndexEnd) {
$wolfImage.remove();
clearInterval(wolfTimer);
startWolfAnimation();
}
$wolfImage.attr("src", wolfType[wolfIndex]);
wolfIndex++;
}, 300);
// 6. 將圖片添加到界面上
$(".container").append($wolfImage);
// 7. 調用處理遊戲規則的方法
gameRules($wolfImage);
}
// 處理遊戲規則的方法
function gameRules(wolfImage) {
wolfImage.one("click", function () {
// 修改索引
window.wolfIndex = 5;
window.wolfIndexEnd = 9;
// 拿到當前點擊土拍你的地址
var $src = $(this).attr("src");
// 根據圖片地址判斷是否是灰太狼
var flag = $src.indexOf("h") >= 0;
// 根據點擊的圖片類型增減分數
if (flag) {
// +10
$(".score").text(parseInt($(".score").text()) + 10);
} else {
// -10
$(".score").text(parseInt($(".score").text()) - 10);
}
});
}
// 定義停止動畫方法
function stopWolfAnimation() {
$(".wolfImage").remove();
clearInterval(wolfTimer);
}
});
實現效果如下：
