首页 前端知识 JavaScript之jQuery番外篇【打地鼠游戏的制作讲解】,一个合格的初级前端工程师需要掌握的模块笔记

JavaScript之jQuery番外篇【打地鼠游戏的制作讲解】,一个合格的初级前端工程师需要掌握的模块笔记

2024-05-18 18:05:28 前端知识 前端哥 268 709 我要收藏

其中用到了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 = $(“”).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”

});

( " b o d y " ) . a p p e n d ( ("body").append( ("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. 可优化角度


最后聊一聊其他的可优化的角度

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

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

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

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

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

如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
img

最后

==
就答题情况而言,第一问100%都可以回答正确,第二问大概只有50%正确率,第三问能回答正确的就不多了,第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法,都是一些可能会遇到的场景,而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了,希望大家通过此文了解js一些特性。

了95%以上前端开发知识点,真正体系化!**

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

如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
[外链图片转存中…(img-BM9oOfgQ-1711747444968)]

最后

==
就答题情况而言,第一问100%都可以回答正确,第二问大概只有50%正确率,第三问能回答正确的就不多了,第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法,都是一些可能会遇到的场景,而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了,希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细,发挥出最好的水平,找到一份理想的工作。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8744.html
标签
评论
发布的文章

video 自定义视频播放控件

2024-05-26 01:05:25

HTML5 画布绘制海报

2024-05-26 01:05:13

HTML5学习(三)

2024-05-26 01:05:43

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!