JavaScript之jQuery番外篇【打地鼠游戏的制作讲解】，CSS标准文档流

首先，尽管素材我会提供给大家，但是由于大家也可以自己再去制作更精致的素材，所以还是要注意以下几个细节：

1️⃣ 素材的名称

修改素材之后，尽量按原素材的名称命名 ，如果一定 要修改命名 ， 请同时也在源码中相应位置修改对应的名称。

2️⃣ 素材的大小

由于布局的时候，素材的尺寸已经固定：洞、老鼠和小孩儿都是 240px × 240px，因此大家注意 换素材时，尺寸尽量按照该尺寸，如一定要修改，则在源码中一并修改布局代码。

注意，完整的源码和素材都在评论区置顶，大家在评论区自取即可。

📖 总体思路

总体思路是这样的：

1️⃣ 首先，布局上 ，由于我们制作的重点不在动画，因此可以用几张不同的图片代替有地鼠、有孩子和空洞三种情况，通过图片的切换实现，因此 布局时，可以用 div 嵌套 img，img 默认设置为空洞。(一些其他布局细节我放在下面说)

2️⃣ 其次，我们先实现简单模式 ：即只普通的地鼠出没，那么又有几个步骤： 实现地鼠随机出没、消失；实现地鼠击打和得分；计时，例如 60s；计分，统计最高分。

3️⃣ 最后，我们添加困难模式，此时并不复杂，只需要素材中添加小孩出没的素材图，之后生成地鼠和小孩用随机函数随机一下，并把点击小孩设置为扣分即可。

于是，下面的部分按照这几个点逐一克服！

📖 布局注意事项

首先，强调一下 布局注意事项：

所有的 id 和 class 起名要规范 ，另外在 坑洞部分同时注意每一个坑都要按照不同的 class，这样我们 才能用 js 监听和控制不同的坑的事件 ，因此 布局代码部分 是这样的：

📖 地鼠随机出没与计时实现原理

地鼠 随机出没 ，我们可以 封装一个简单的随机函数，由于我们有 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

clearInterval(timer);

}

📖 计分实现原理

计分 这部分其实 不难实现 ，我们 用一个循环，把每个 img 元素设置点击事件监听即可 ，但 要注意判读 img 元素的 src 属性是 ” 坑洞 ”、“地鼠”还是“小孩儿”，因为涉及到不同的分数机制：

for (let i = 1; 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 +“!”)

自我介绍一下，小编 13 年上海交大毕业，曾经在小公司待过，也去过华为、OPPO 等大厂，18 年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024 年 Web 前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合 3 年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了 95% 以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加 V 获取：vip1024c（备注前端）

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

一个人可以走的很快，但一群人才能走的更远。不论你是正从事 IT 行业的老鸟或是对 IT 行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

续更新 **

如果你觉得这些内容对你有帮助，可以添加 V 获取：vip1024c（备注前端）
[外链图片转存中…(img-EKb5FC5c-1712676532852)]

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

[外链图片转存中…(img-aU8Kk4mt-1712676532852)]

一个人可以走的很快，但一群人才能走的更远。不论你是正从事 IT 行业的老鸟或是对 IT 行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-RucrpNyY-1712676532852)]