掘金周边版打地鼠，“愚”乐一下午🤣

一条会coding的Shark
1,700 阅读7分钟

前言

码上掘金第二期开始了，必须支持一波。对于这次的两个赛题，我毫不犹豫地选择了赛题一整蛊小能手。虽然关于ChatGPT的话题很火热，但是我并没有去研究或者体验过它，仅仅是云体验过ChatGPT罢了。

image.png

不过虽然选择了赛题一，但并不意味着我已经对此赛题有思路。关于整蛊小能手，我一时半会也没想出该如何构思以及动手。直到最后看到打地鼠这款游戏，就决定是它了。

经典游戏打地鼠

打地鼠这款游戏想必大部分人都玩过吧，它是一款训练眼手协调能力和反应迅捷度的经典游戏。地鼠会从地洞中随机地探出一个脑袋，或者一双眼睛，企图躲过游戏者的视线。我们需要做的就是抡起手中的大锤，拍掌下去，力求一次一个准，来一个砸一个，来两个砸一双。

在打地鼠游戏里的原型是地鼠，而我们今天要做的则是以掘金周边为原型的掘金周边版打地鼠，也可以称为掘金版打周边。接下来就跟随我来一步一步实现它吧。

效果预览

注意：如果在文章中的代码块里试玩，随机出现的内容不会显示出来，所以为了有更好的游戏体验，可以点进代码块里或者前往比赛入口查看。

具体实现

打地鼠.png

现在我们来具体实现一下这个过程。整个小游戏是由HTML、CSS、JS三件套实现的。

HTML 搭建骨架

我们首先来搭建一下此项目的基本骨架。此游戏由三部分组成，分别是地洞，锤子以及YOYO抱枕。

地洞锤子YOYO抱枕
image.png锤子 42C08466.pngyoyo

地洞由div盒子实现，剩下的使用在线图片即可。

相关代码如下：

<div class="box">
	<div class="head">掘金版打周边
		<div class="rule" onclick="rule()">游戏规则></div>
	</div>
	<label>分数:<input type="text" id="score"></label>
	<label>倒计时:<input type="text" id="timeout"></label>
	<div class="cursor">
		<div class="_box"></div>
		<div class="_box"></div>
		<div class="_box"></div>
		<div class="_box"></div>
		<div class="_box"></div>
		<div class="_box"></div>
		<div class="_box"></div>
		<div class="_box"></div>
		<div class="_box"></div>
	</div>
	<button id="start">开始游戏</button><button id="finish">结束游戏</button>
	<br><br>
</div>

从代码中我们可以看到还有例如标题、规则、分数、倒计时以及相关按钮等内容，以此来丰富整个界面。地洞的布局是九宫格式，关于如何实现九宫格布局，后续CSS里会介绍。至此，这一部分就算是完成了。

披上 CSS 外衣

现在我们来通过CSS来稍微美化一下界面。关于CSS这部分主要介绍一下如何实现九宫格式布局。

相关代码如下：

.box{
	overflow: hidden;
	width:390px;
	border-radius: 10px;
	margin: 0 auto;
	background-color: #e37815;
}
.cursor{
	width: 390px;
}
.cursor:hover{
	cursor:url("https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/946fe607edc9428f8db87c89a49e1820~tplv-k3u1fbpfcp-watermark.image?"),auto;
}
._box{
	width: 120px;
	height: 120px;
	border-radius: 10px;
	float: left;
	margin-right:5px;
	margin-left: 5px;
	margin-bottom: 10px;
	background-color: #fdf3f3;
}

这里附上部分代码，更详细的代码可以前往代码块查看。九宫格布局的实现方式有很多种，这里我用的是比较简单的方式。因为九宫格是3X3式的，首先我们将每个div盒子的宽度和高度计算好，即外部div的宽度 = 内部三个div的宽度 + marign值。由于div是块级元素，因此将宽度和高度计算好后它会呈现一列排列，这时候只需加上浮动即可，这样一个简易的九宫格布局就成功实现了。

实现了这个之后，我们将锤子加入代码中。按照设计而言，锤子是在地洞上出现，因此使用hover伪类来实现此效果。当鼠标移动到九宫格地洞的区域，将锤子显示出来。

hammer.gif 
.mouse{
	width: 100%;
	height: 100%; 
	background: url("https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f8e1b1a33c8c42829e87559b1595d2f0~tplv-k3u1fbpfcp-no-mark:0:0:0:0.image?") no-repeat
}
.mouse_change{
	width: 100%;
	height: 100%;
	background: url("https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f8e1b1a33c8c42829e87559b1595d2f0~tplv-k3u1fbpfcp-no-mark:0:0:0:0.image?") no-repeat
}

这段CSS代码是什么意思呢？可以看出在HTML部分并没有mouse以及mouse_change元素。其实这是为后续JS中添加的HTML部分做准备，这里放入的是之后会出现在地洞的YOYO抱枕。在JS部分会详细介绍。

最后，这是披上CSS外衣后最终的界面状态，虽然比较简陋单调，但是够用了🤣。

image.png

JS 实现动作

现在来到整个游戏实现的关键部分，如果说前面是搭好基建，那么这里就是打造核心。像开始游戏、结束游戏、随机出现周边等都是在此实现，下面来详细介绍。

开始游戏

开始游戏也可以称为随机出现周边，当点击开始游戏后，周边开始随机出现，并且开始倒计时，游戏正式开始。

相关代码如下：

var start = document.getElementById('start');
var finish = document.getElementById('finish');
var _boxs = document.getElementsByClassName('_box');
var score = document.getElementById('score');
var timeout = document.getElementById('timeout');
var time,flag=true;
var count = 0,mouse = 0;
function selectFrom(x,y){
	var choice = y-x;
	return Math.floor(Math.random()*choice+x);
};
start.onclick = function(){
	score.value = 0;
	timeout.value = 25;
	if(flag){
		time = setInterval(function(){
			count++;//周边个数
			var i = selectFrom(0,9);//随机获取第几个格子
			if(_boxs[i ].innerHTML == ''){
				_boxs[i ].innerHTML = '<div class="mouse"></div>';
				setTimeout(function(){
					_boxs[i ].innerHTML = '';
				},3000)
			}
			timeout.value = parseInt(timeout.value)-1;//倒计时
			if(timeout.value == 0){
				alert('时间到,您得分为：'+score.value+'分！');
				if(score.value<15){
					alert('这么低的分，请 V 我五十，我传授你通过秘籍🤣')
				}
				if(score.value>=15&&score.value<=20){
					alert('恭喜你，完成挑战，可以找优弧大大领一份贴纸😏');
					alert('骗你的🤣')
				}
				if(score.value>20){
					alert('太优秀了，这里送你一份惊喜😏')
					window.location.href='https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b84419b5268f45ce9bb96376c83f69ae~tplv-k3u1fbpfcp-no-mark:320:320:320:320.awebp?'
				}
				finishGame();
			}
		},1000);
	}
	flag = false;
};

关于JS获取相关元素这里我就不多介绍了，看上述代码即可。在这一部分有两个函数，一个selectFrom随机函数，一个控制开始的函数。selectFrom是用来随机获取第几个格子的，在整段代码中是比较关键的存在。关于它的实现也比较简单，通过调用内置函数Math.random() 即可。

在开始游戏中，设置好定时器随机出现周边，这时候前面提到的CSS代码体现作用了。通过innerHTML将名为mouse的div分配给地洞，这样就可以在地洞上随机出现抱枕周边。

boxs[i ].innerHTML = '<div class="mouse"></div>';

初始化时间为25s，通过减一实现倒计时。

timeout.value = parseInt(timeout.value)-1;

除此之外，通过条件判断设置不同的内容，某种程度上丰富了游戏过程。关于最终惊喜，这里透露一些，是掘金经典原图《你小子》。因此大伙快去获得高分，来查收这份惊喜🤣。

你小子

结束游戏

其实一开始是不想设计结束游戏的，不过后面仔细一想如果不设计它有些许不合理，因此最终还是将它放了上去。

相关代码如下：

function finishGame(){
	clearInterval(time);
	for(var i=0;i<_boxs.length;i++){
		_boxs[i ].innerHTML = '';
	}
	flag = true;
}
finish.onclick = function(){
	finishGame();
	timeout.value = 0;
	alert('提前结束，您得分为：'+score.value+'分！');
	if(score.value<5){
		alert('分太低了，给我重新再来🤣')
	}
	if(score.value>=5&&score.value<=10){
		alert('你小子，摸鱼有两下子');
	}
	if(score.value>10){
		alert('你小子，这里送你一份惊喜😏')
		window.location.href='https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/154106c862ce441e8d30a704fbb8ace8~tplv-k3u1fbpfcp-watermark.image?'
	}
};

结束游戏的逻辑比较简单，将相关数据置为0即可，然后再使用innerHTML将空内容分配给地洞，即清除页面上的周边。同理，如果正常玩游戏，需要在时间为0后调用finishGame()函数。

由于提前结束，因此这里弹出的内容也需做一些修改，如上述代码所示，当然大家也可自行随意发挥里面的内容。

经典语录

最后，代码中当然少不了经典语录哇。这是优弧大大的一些经典语录。如果还有语录，欢迎在评论区补充🤣。在这些语录中，还得是你小子最为经典。

相关代码如下：

var lan = ['优弧：你小子','优弧：尊贵的超级会员','优弧：各位臭弟弟','优弧：。。。反正你不会亏','优弧：肯定不是贴纸。我送你贴纸。我不被骂死']
		if(score.value==4){
			alert(lan[Math.floor(Math.random()*5)])
		}
		if(score.value==8){
			alert(lan[Math.floor(Math.random()*4)])
		}
		if(score.value==12){
			alert(lan[Math.floor(Math.random()*5)])
		}
		if(score.value==16){
			alert(lan[Math.floor(Math.random()*5)])
		}
		if(score.value==20){
			alert(lan[Math.floor(Math.random()*5)])
		}

这里的语录也是设置成随机出现。将语录放进数组中，然后到达相应分数后，通过Math.random() 函数随机生成0~4的数字，从而随机获得不同语录。

image.pngimage.pngimage.png

码上掘金地址

欢迎各位来体验一下~

总结

以上就是相关内容的介绍了，后续会还会继续优化它。如果大家有什么建议，欢迎各位在评论区告诉我~

最后，这个小游戏玩起来也不难，大家快去试试吧，顺便给我来个一键三连🤣~

游戏地址：掘金周边版打地鼠

本文正在参加「金石计划」

avatar
文章
阅读
粉丝