今天看到一個類似于砸地鼠的遊戲 感覺很有趣 于是在網上找了一些圖檔資源 也做了一個 接下來上代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/狂拍灰太狼.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<title>狂拍灰太狼小遊戲</title>
</head>
<body>
<div class="container">
<h1 class="score">0</h1>
<div class="progress"></div>
<button class="start big">開始遊戲</button>
<div class="rules">遊戲規則</div>
<!-- 遊戲規則 -->
<div class="rule">
<p>遊戲規則</p>
<p>1:遊戲時間60s</p>
<p>2:拼手速 毆打灰太狼+10分</p>
<p>3:毆打小灰灰-10分</p>
<a href="#" id="close">[關閉]</a>
</div>
<!-- 重新開始 -->
<div class="mask">
<h1>GAME OVER</h1>
<button class="big" id="reStart">重新開始</button>
<!-- jq -->
<script>
$(function() {
// 監聽遊戲規則
$(".rules").click(function() {
$(".rule").stop().fadeIn(100);
})
// 監聽關閉按鈕
$("#close").click(function() {
$(".rule").stop().fadeOut(100);
// 監聽開始按鈕
$(".start").click(function() {
$(".start").stop().fadeOut(100)
// 調用處理進度條的方法
ProgressHandler();
// 調用灰太狼動畫的方法
wolfAnimation()
// 監聽重新開始事件
$("#reStart").click(function() {
$(".mask").stop().fadeOut(100)
// 調用進度條
ProgressHandler()
// 點選重新開始後 調用動畫
// 分數重置為0分
$(".score").text(0)
window.progressWidth;
// 定義一個專門處理進度條的方法
function ProgressHandler() {
// 重新設定進度條寬度
$(".progress").css({
width: 180,
// 開啟一個進度條定時器
var timer = setInterval(function() {
// 擷取目前的進度條長度
progressWidth = $(".progress").width()
// 每次減少的寬度重新指派
progressWidth -= 20
// 将目前的長度指派給進度條
width: progressWidth,
// 監聽是否走完
if (progressWidth <= 0) {
// 清除定時器
clearInterval(timer);
// 顯示重新開始界面
$(".mask").stop().fadeIn(100)
// 顯示重新開始 動畫不顯示
stopWolfAnmation();
}
}, 2000)
// 狼動畫的定時器 拿出 不然之後的停止動畫通路不到
var wolfTimer;
// 停止動畫
function stopWolfAnmation() {
$(".ig").remove()
clearInterval(wolfTimer)
// 灰太狼開始動畫
function wolfAnimation() {
// 定義兩個數組儲存所有的動畫圖檔
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']
// 定義一個數組儲存所有可能出現的位置
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",
}];
// console.log(posIndex)
// 建立一個随機圖檔
var $wolfImage = $("<img src='' class='ig'>")
// 随機擷取圖檔的位置 随即生成0-8
var posIndex = Math.round(Math.random() * 8);
// 設定圖檔顯示的位置
$wolfImage.css({
position: "absolute",
top: arrPos[posIndex].top,
left: arrPos[posIndex].left,
});
// 随機擷取數組類型 即灰太狼小灰灰 0-1
var wolfType = Math.round(Math.random()) == 0 ? wolf_1 : wolf_2
// 設定圖檔
window.wolfIndex = 0;
window.wolfIndexEnd = 5;
wolfTimer = setInterval(function() {
// 加入判斷隻進行到第五張圖
if (wolfIndex > wolfIndexEnd) {
$wolfImage.remove()
clearInterval(wolfTimer);
// 循環進行圖檔動畫 引入
$wolfImage.attr("src", wolfType[wolfIndex])
wolfIndex++;
}, 300)
// 将圖檔添加到頁面
$(".container").append($wolfImage);
// 添加遊戲規則 傳入添加的圖檔
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
// console.log(flag)
if (flag) {
// +10
$(".score").text(parseInt($(".score").text()) + 10)
console.log(progressWidth)
width: progressWidth + 30,
} else {
// -10
$(".score").text(parseInt($(".score").text()) - 10)
</script>
</body>
</html>
其實整體來說這個遊戲實作并不是很難 遊戲邏輯清楚之後很好實作各個功能，但是還有一些缺點 比如每次出現的動畫比較卡頓，拍打時的音效
不過作為一個jq的練手還是不錯的
![門戶通專訪草根站長九天狼：做站貴在堅持[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)