目录
高质量前端博主,点个关注不迷路🌸🌸🌸!
本篇是继本人原创博客jQuery学习【三部曲】后的番外续作篇,主要内容是用jQuery从0做一个完整的打地鼠小游戏,同时,与其他同类型的做打地鼠游戏博客对比,个人认为本文具有以下特点:
(1) 详细的写法教学。我会用大篇幅给大家讲述每一个实现的重点和难点,以便大家能够学到东西,同时有些同学可能拿来当作业的话,也方便大家接受老师的质询。
(2) 完整的源码和素材。我会提供全部的源码和素材。
(3) 双游戏模式。增加了困难模式,设置了误伤扣分效果,提高了游戏的趣味性。
在阅读本文并开始跟着做之前,我认为你需要有:
jQuery的基础知识、setInterval()与setTimeout()函数的相关知识,值得一提的是,这些知识都可以从本人的原创博客中获取,大家如果没有掌握的可以先去掌握一些预备知识,有助于阅读本文!(注意,完整的源码和素材都在评论区置顶,大家在评论区自取即可)
I. 打地鼠游戏介绍
首先,我们看一段游戏的文字说明:
打地鼠游戏:
游戏分为两个模式:简单和困难模式,玩家可自行选择游戏的模式,其中:
(1) 简单模式:玩家会遇到从洞中随机钻出的地鼠,成功击打地鼠获得100得分。
(2) 困难模式:洞中偶尔会出现顽皮的孩童,如果误击儿童,扣除100得分,其他规则同上。
游戏支持弹窗展示本轮得分,同时具有保存历史最高战绩的功能!
然后我们点这里可以在线试玩一下(请用电脑端,手机端未开发):【点我试玩】
接下来是两种模式的GIF图:
1️⃣ 简单模式:
2️⃣ 困难模式:
II. 实现思路与难点讲解
📖 素材制作
首先,尽管素材我会提供给大家,但是由于大家也可以自己再去制作更精致的素材,所以还是要注意以下几个细节:
1️⃣ 素材的名称
修改素材之后,尽量按原素材的名称命名,如果一定要修改命名,请同时也在源码中相应位置修改对应的名称。
2️⃣ 素材的大小
由于布局的时候,素材的尺寸已经固定:洞、老鼠和小孩儿都是240px × 240px,因此大家注意换素材时,尺寸尽量按照该尺寸,如一定要修改,则在源码中一并修改布局代码。
注意,完整的源码和素材都在评论区置顶,大家在评论区自取即可。
📖 总体思路
总体思路是这样的:
1️⃣ 首先,布局上,由于我们制作的重点不在动画,因此可以用几张不同的图片代替有地鼠、有孩子和空洞三种情况,通过图片的切换实现,因此布局时,可以用div嵌套img,img默认设置为空洞。(一些其他布局细节我放在下面说)
2️⃣ 其次,我们先实现简单模式:即只普通的地鼠出没,那么又有几个步骤:实现地鼠随机出没、消失;实现地鼠击打和得分;计时,例如60s;计分,统计最高分。
3️⃣ 最后,我们添加困难模式,此时并不复杂,只需要素材中添加小孩出没的素材图,之后生成地鼠和小孩用随机函数随机一下,并把点击小孩设置为扣分即可。
于是,下面的部分按照这几个点逐一克服!
📖 布局注意事项
首先,强调一下布局注意事项:
所有的id和class起名要规范,另外在坑洞部分同时注意每一个坑都要按照不同的class,这样我们才能用js监听和控制不同的坑的事件,因此布局代码部分是这样的:
<div class="gameLayout">
<div class="row">
<div class="grid dig1">
<img src="../src/img/坑.png" alt="">
</div>
<div class="grid dig2">
<img src="../src/img/坑.png" alt="">
</div>
<div class="grid dig3">
<img src="../src/img/坑.png" alt="">
</div>
</div>
<div class="row">
<div class="grid dig4">
<img src="../src/img/坑.png" alt="">
</div>
<div class="grid dig5">
<img src="../src/img/坑.png" alt="">
</div>
<div class="grid dig6">
<img src="../src/img/坑.png" alt="">
</div>
</div>
<div class="row">
<div class="grid dig7">
<img src="../src/img/坑.png" alt="">
</div>
<div class="grid dig8">
<img src="../src/img/坑.png" alt="">
</div>
<div class="grid dig9">
<img src="../src/img/坑.png" alt="">
</div>
</div>
</div>
📖 地鼠随机出没与计时实现原理
地鼠随机出没,我们可以封装一个简单的随机函数,由于我们有9个坑,于是随机数卡在1-9:
function getRandomValue() {
var random_value = Math.floor(Math.random() * 9) + 1
return random_value
}
其中用到了Math.floor()函数和Math.random()函数,后面乘上n,代表[0 - n-1]的范围,由于我们需要1-9,因此是乘9再加1。
接下来是计时的原理,我们分为两个函数实现:setInterval()和setTimeout():
1️⃣ 首先,我们需要每隔一段时间,出现一只地鼠,于是setInterval()函数就是我们需要的,因为该函数可以实现每隔一段时间自动调用函数内设置的回调函数,于是我们可以这样写:
timer = setInterval(function () {
var random_value = getRandomValue()
var $dig = $('.dig' + random_value)
var $img = $dig.children("img")
$img.attr("src", "../src/img/地鼠.png");
},1000}
上面的设置里,我们设置了每隔1000ms(1s),就产生一只老鼠。
2️⃣ 其次,我们需要让老鼠停留一会儿,这是自然的,否则怎么打地鼠,于是我们需要setTimeOut()函数:
setTimeout(function () {
$img.attr("src", "../src/img/坑.png");
}, 800)
上面的代码实现了每只老鼠停留800ms(0.8s)后消失,替换成坑洞的图片。
然后我要强调一下:我们设置给setTimeout()函数的时间一定要小于等于setInterval()函数的时间,因为如果大于,那么可能出现某个坑的老鼠还没消失的同时生成一个新老鼠的bug!!!
3️⃣ 最后是实现整体的计时,这个仍然是setInterval(),我们在函数体内声明一个计时变量,取值60,之后在setInterval()中每次减去1即可,当数值为0时,解除计时器:
var count = 60
var timer = null
timer = setInterval(function () {
count--;
if (count < 0) {
clearInterval(timer);
}
📖 计分实现原理
计分这部分其实不难实现,我们用一个循环,把每个img元素设置点击事件监听即可,但要注意判读img元素的src属性是"坑洞"、"地鼠" 还是 "小孩儿",因为涉及到不同的分数机制:
for (let i = 1; i <= 9; i++) {
$(".dig" + i).children("img").bind("click", function () {
if ($(".dig" + i).children("img").attr("src") == "../src/img/地鼠.png") {
$(".dig" + i).children("img").attr("src", "../src/img/坑.png");
current_score += 100;
$score.html("当前得分:" + current_score)
}
else if ($(".dig" + i).children("img").attr("src") == "../src/img/小孩子.png") {
$(".dig" + i).children("img").attr("src", "../src/img/坑.png");
current_score -= 100;
$score.html("当前得分:" + current_score)
}
})
}
最高得分就更不是问题了,我们设置一个全局变量,每一次在setInterval()的60s结束之后,把当前的分数与历史最高分数比较,并把较大的值赋值给历史最高分数即可:
var current_score = 0
var highest_score = 0
if (current_score > highest_score) {
highest_score = current_score;
}
current_score = 0
$score.html("历史最高战绩:" + highest_score + "!")
📖 双模式实现原理
最后是双模式,在用户点击开始游戏按钮时,我们加一个promp弹出框:
if ($btn.html() == "点我开始游戏") {
var mode = prompt("请选择游戏模式:简单/困难,\n其中困难模式有顽皮的孩子,不要误伤了他们!", "简单")
if (mode == "简单") {
gameEasyMode();
$btn.html("进行中...");
}
else if (mode == "困难") {
gameHardMode();
$btn.html("进行中...");
}
else {
alert("请输入正确的游戏模式!")
}
}
根据玩家输入的内容,我们调用不同的模式即可,我们提前要封装好两个模式的游戏函数。
📖 两项小优化:地鼠受击切换状态与鼠标点击特效
以上基础版完成之后,我们可以适当的做一些优化,使得游戏更加精致,这里我从两个角度开始优化:
首先,可以给地鼠受击后添加一个新的状态,例如哭泣的图片,并让其维持一小段时间,注意维持的时间不能太长,否则会影响该坑位下一次刷新老鼠,代码可以这么实现:
if ($(".dig" + i).children("img").attr("src") == "../src/img/地鼠.png") {
current_score += 100;
$(".dig" + i).children("img").attr("src", "../src/img/地鼠受击.png");
setTimeout(function () {
$(".dig" + i).children("img").attr("src", "../src/img/坑.png");
}, 300)
$score.html("当前得分:" + current_score)
}
通过每一次点击到老鼠后切换到受击图片,并用setTimeout函数对受击图片设置一段小延迟即可。
其次是给鼠标添加点击特效,这一块可以通过jQuery的animate自定义动画函数实现:
jQuery(document).ready(function ($) {
$("body").click(function (e) {
var $i = $("<img>").attr("src", "../src/img/锤子.png");
var x = e.pageX,
y = e.pageY;
$i.css({
transition: "200ms",
transform: "rotate(0deg)",
"z-index": 1,
"top": y + 0,
"left": x - 35,
"position": "absolute"
});
$("body").append($i);
$i.animate({
"top": y - 0,
}, 50,
function () {
$i.css({ 'transform': 'rotate(-60deg)' });
setTimeout(function () {
$i.css({ "opacity": 0 });
$i.remove();
}, 150)
});
});
});
当然了,这个优化角度对很多人来说有点难,如果太难,那就先不优化这个角度,后面我专门出一期关于jQuery的animate动画函数的使用,大家届时再进行优化!(优化后,鼠标点击时有一个锤子会砸下来!)
III. 可优化角度
最后聊一聊其他的可优化的角度:
1️⃣ 素材方面:
大家可以选择更精致的素材。
2️⃣ 游戏方面:
首先,可以加入更多有趣的元素,丰富游戏体验;
其次,可以优化鼠标的点击效果,目前的点击是简单的元素绑定,可以进一步优化点击的效果,防止一些失灵的点击。
以上是本期的全部内容,喜欢的小伙伴们可以三连支持一下!💓💓💓!
另外本期博客参与了【新星计划】,还请大家支持一下🌟🌟🌟!