今天看到一个类似于砸地鼠的游戏 感觉很有趣 于是在网上找了一些图片资源 也做了一个 接下来上代码
<!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>
</div>
</div>
<!-- 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()
// 点击重新开始后 调用动画
wolfAnimation()
})
window.progressWidth;
// 定义一个专门处理进度条的方法
function ProgressHandler() {
// 重新设置进度条宽度
$(".progress").css({
width: 180,
})
// 开启一个进度条定时器
var timer = setInterval(function() {
// 获取当前的进度条长度
progressWidth = $(".progress").width()
// 每次减少的宽度重新赋值
progressWidth -= 20
// 将当前的长度赋值给进度条
$(".progress").css({
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);
// 循环进行图片动画 引入
wolfAnimation()
}
$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)
$(".progress").css({
width: progressWidth + 30,
})
} else {
// -10
$(".score").text(parseInt($(".score").text()) - 10)
}
})
}
})
</script>
</body>
</html>
其实整体来说这个游戏实现并不是很难 游戏逻辑清楚之后很好实现各个功能，但是还有一些缺点 比如每次出现的动画比较卡顿，拍打时的音效
不过作为一个jq的练手还是不错的
图片资源 百度网盘链接：https://pan.baidu.com/s/1LMLHkMqbU1dVYESq5loVaA
提取码：2468