勇闯掘金-第一关之找掘金
我正在参加掘金社区游戏创意投稿大赛团队赛，详情请看：游戏创意投稿大赛
基本介绍：
参与此项目的开发首先感谢掘金的活动，其次感谢组内成员相互帮助！当然最主要的还是感谢我们的小组长 十里青山。不畏艰苦，不怕繁琐😂的带领我们完成此游戏的开发。
此游戏名为勇闯掘金，游戏分为五道关卡，游戏难度递增。分别为第一关🂱-找掘金、第二关🂲-石头剪刀布、第三关🂳-寻找宝藏、第四关🂴-打地鼠、第五关🂵-幸运抽奖。分别由组内不同成员完成。整体框架搭建及公用组件开发均由组长完成👏。本人有幸参与其中并且开发了本游戏第一关找掘金，此关相对后面几关比较简单，也是为了让各位玩家有一个好的心理铺垫，带着逢关必过的信心去接受后面的挑战🫵🏻！
成员介绍：
组员：村头小二黑 也就是俺
本关介绍：
本关为第一关，名为找掘金。此关简单易上手，老少皆宜。玩法只需要从众多“倔金”中找到“掘金”二字。经本人实测，并且摘到我那361度的眼镜过此关也毫不费力。各位玩家只需要把本关当成本游戏的开胃小菜，带着胜利的喜悦去挑战后面的各个关卡！在此祝君逢关必胜！！！！！
玩法：从屏幕中的备选词中找出【掘金】，并点击它，本关卡共有5轮，每轮您有10秒钟的时间去选择，找到得四分， 没找到不得分。
代码展示：
组件介绍：
游戏的规则介绍以及游戏的结果都被封装在公共组件之内，当不同关卡会传入不同的值来判断显示内容。
<!-- 规则及守关运营区 -->
<rule-wrap :stage="1" @begin="begin"></rule-wrap>
<!-- 结果弹窗 -->
<result-log :status="status" :isEnd="round >= 5" @goOn="goOn"></result-log>
内容介绍：
此部分是记录第几轮和倒计时展示区域； round值是轮数。 resultList数组内的元素分别是0和1，如果本轮赢则push到resultList一个1，相反则push到resultList内一个。1为得分并且显示绿色圆圈，0为不得分显示红色圆圈，数组的个数和round的值是一致的。
<!-- 成绩及倒计时 -->
<div class="progress-bar" v-show="round > 0">
<div class="result-list">
<div
class="result-item"
:class="{active: item}"
v-for="(item, key) in resultList"
:key="key"
></div>
</div>
<div class="count-time">{{ countText }}</div>
</div>
此部分是游戏区域； blockList是一个装有25个元素的数组，其中25个元素中24个是“倔金”，1个是“掘金”。“掘金”的位置是用随机数来判断的。
<!-- 游戏区域 -->
<div class="game-wrap">
<div class="block-list">
<div
class="block-item"
:class="{
active: item,
right: item === '掘金',
error: item === '倔金',
}"
v-for="(item, key) in blockList"
:key="key"
@click="countEnd(item)"
></div>
</div>
</div>
相应的方法； countEnd(item)方法； 点击此方法会传一个参数停止倒计时，并会调check()方法。
// 倒计时结束
countEnd (val = '倔金') {
clearInterval(this.countInterval)
this.check(val)
}
check (val)方法； check (val)方法参数则是由countEnd()方法传值。这个值也就是所选择的答案，如果选择正确则会向resultList数组内push一个1，错误则会push一个0，并且会调用结果组件，结果组件根据传回的status值来显示相应的结果。
check (val) {
if (val !== '掘金' && val !== '倔金') return
this.blockList = []
if (val === '掘金') {
this.status = 'success'
this.$emit('add', {
name: 'stage1',
val: 4
})
this.resultList.push(1)
} else {
this.status = 'fail'
this.resultList.push(0)
}
}
reset ()方法; reset ()方法也是游戏的主要方法，此方法会给blockList数组赋25个空值，也就是创建出25个小格子，然后使用fill() 方法填充数组，把25个空值全部填充成“倔金”，并且生成一个25以内的随机数，用此随机数为数组的下标修改相对应元素的值为“掘金”。这个时候页面也就渲染完成了。
// 重置表格
reset () {
this.blockList = new Array(25)
let index = 0
let interval = setInterval(() => {
if (index < 25) {
this.$set(this.blockList, index, '6')
index++
} else {
clearInterval(interval)
this.round++
let newArr = new Array(25).fill('倔金')
let random = Math.floor(Math.random() * 25)
newArr[random] = '掘金'
this.blockList = newArr
this.startCount()
}
}, 50)
},
本篇文章只对部分关键代码简单进行介绍。本关卡简单易过，本关的代码逻辑也是简单易懂！其余的部分我想各位混迹掘金的大佬也无须我逼逼赖赖一顿讲解了😂，如果想要深入了解此关卡代码或项目整体逻辑只需去看看源代码便可。
组长大佬也会发出来项目整体的文章进行讲解。如在有不懂请在评论区留言，本人会请组长大人亲自为您解答，如果组长大人解答的不满意本组内还有美女大佬为您服务🙈，她可谓是刀枪剑戟样样精通，打人之疼不亲身经历无法理解，劝君慎重选择，如君要一意孤行祝君平安🙏🏻
总结归纳：
通过本次活动可以说受益颇丰，在开发过程中学习大佬的开发逻辑，也进一步学会团队之间的配合。开发期间组长和其余小伙伴之间相互帮助，优化各个部分代码，相互分享自己开发心得。不仅长知识还能交朋友。希望掘金多多搞搞类似的活动，让我们每个人认识更多志同道合的伙伴。
