创意小游戏——抓住掘金酱，好多好多掘金酱，快来抓住TA
游戏体验地址： https://ihope_top.gitee.io/bamboo-pole/
游戏也提供了代码块版本哦，就是可能体验不怎么好(#^.^#)
https://code.juejin.cn/pen/7089842400729759747
推荐一下近期的其他文章
貂蝉回城： https://cloud.tencent.com/developer/article/2078693 吕布回城： https://cloud.tencent.com/developer/article/2078692 勇闯掘金： https://juejin.cn/post/7085758458657505288
前言
很高兴又给大家带来了一款休闲小游戏，抓住掘金酱，游戏适配了pc和手机端，不用拼运气，不用动脑子，也不用赶时间，轻轻松松动动小手就能玩，希望大家喜欢，下面开始介绍游戏的制作及玩法，老规矩，简单的布局之类的就不讲了，只讲核心部分。
游戏背景介绍
由于春天来了，掘金技术社区最近有大量掘金酱出逃游玩，不好好工作，所以需要你来帮助社区将这些掘金酱抓回岗位
游戏规则
我们已经提前在掘金酱路过的地方布置了捕捉光环，你只需要在掘金酱进入光环的时候按下捕捉按钮即可，离捕捉按钮中心距离越近，你获得的分数就越高，但如果你在掘金酱距离中心距离大于90的时候按下按钮，游戏将直接失败
游戏制作
捕捉光环
捕捉光环我们就简单的制作一个空心圆环就行了，可以直接用css画一个圆，然后来一个边框，再加上内外阴影，营造一个发光的效果就行了。位置我们就给他固定到屏幕中央，后续抓掘金酱的时候，只需要判断掘金酱距离屏幕中央的距离就行了。
<div class="center-box"></div>.jjj-item {
position: absolute;
width: 140px;
height: 140px;
background: url(./assets/img/tangyuan.png);
background-size: 100%;
top: 50%;
margin-top: -70px;
border-radius: 50%;
}
掘金酱的生成
掘金酱的样式方面没什么好说的，就是一个圆球而已，我们给它一个比捕捉环稍小一些的宽高，让它可以刚好被套进去，另外现在疫情严重，我们再给它戴上个口罩。
生成掘金酱可以用一个定时器来做，等游戏结束的时候我们也好控制
至于位置方面，刚生成的掘金酱，我们会给它一个距离屏幕左边一个负的自身的距离，以便它出现的时候可以慢慢的从左侧屏幕出现。后面我们基于位置的判断也基本基于屏幕左侧，因为js没有offsetRight属性
这里需要注意的点是我们生成掘金酱的时候，给它了一个jjj-item-active类名，这是因为我们按下捕捉键的时候，判断的应该是捕捉器左侧第一个的掘金酱的位置，而不是已经路过的，所以我们判断距离的时候可以根据这个类名来获取，而已经经过的掘金酱则给它移除这个类名，至于其他的地方，下面的代码中已经做出了详细的备注
// 生成掘金酱
createJuejinjia () {
this.jjjCount++
let jjj = document.createElement('div')
jjj.className = ['jjj-item', 'jjj-item-active'].join(' ')
jjj.style.left = '-160px'
this.$refs.wrap.appendChild(jjj)
// 掘金酱移动
let jjjMove = () => {
if (this.status !== 'start') {
return
}
jjj.style.left = jjj.offsetLeft + this.jjjSpeed + 'px'
// 如果超出捕捉器范围，则移除class
if (jjj.offsetLeft > (this.screenWidth / 2 + 90)) {
jjj.classList.remove('jjj-item-active')
}
// 如果掘金酱距离左侧距离大于等于屏幕宽度，则移除掘金酱
if (jjj.offsetLeft > this.screenWidth) {
this.$refs.wrap.removeChild(jjj)
// 如果没有掘金酱生成，则游戏结束
let _jjj = document.querySelectorAll('.jjj-item-active')[0]
if (!_jjj) {
this.gameOver()
}
} else {
requestAnimationFrame(jjjMove)
}
}
jjjMove()
},
捕捉掘金酱
上面我们刚刚也提到了，我们要获取还没有经过捕捉环的第一个掘金酱的位置进行判断，我们可以根据上面的jjj-item-active类名去获取，因为我们垂直的距离时不变的，所以只用获取它水平方向上的距离即可，之后我们拿它圆心的水平距离和屏幕中心的水平距离进行对比，再取绝对值，就可以得到当前掘金酱和捕捉环位置的偏差了，之后根绝偏差的大小给予不同的分数
// 捕捉掘金酱
catchJuejinjia () {
// 获取第一个掘金酱
let jjj = document.querySelectorAll('.jjj-item-active')[0]
// 判断它距离屏幕水平中心的距离
let jjjLeft = this.screenWidth / 2 - jjj.offsetLeft - jjj.offsetWidth / 2
let abs = Math.abs(jjjLeft)
console.log(abs);
if (abs < 20) {
this.$alert.showText('profect', 500)
this.profect++
} else if (abs < 50){
this.$alert.showText('better', 500)
this.better++
} else if (abs < 90){
this.$alert.showText('good', 500)
this.good++
} else {
this.gameOver()
return
}
jjj.classList.add('opacity')
},
这样这个游戏的主要玩法就已经完成了，是不是很简单，哈哈，然后我们再加上一些其他的辅助元素，比如开始按钮啊，游戏规则啊，重新开始啊之类的，这个小游戏接结束啦。