我正在参加掘金社区游戏创意投稿大赛团队赛,详情请看:游戏创意投稿大赛
游戏地址: ihope_top.gitee.io/juejin-king
gitee地址:gitee.com/ihope_top/j…
团队成员:村头小二黑、MonicaWoo
写在最前:
Hello啊大兄弟们🤭,能够参加本次掘金活动真的是非常开心啊,也非常感谢组内成员相互帮助!当然最主要的还是感谢我们的小组长十里青山, 能够不畏艰苦,不怕繁琐的带领我们完成此游戏的开发✌。
游戏基本介绍
此游戏名为勇闯掘金,游戏分为五道关卡,游戏难度递增。
分别为:
- 第一关:找掘金
- 第二关:石头剪刀布
- 第三关:寻找宝藏
- 第四关:打地鼠
- 第五关:(抽奖)
分别由组内不同成员完成。整体框架搭建及公用组建开发均由组长完成👏。本人有幸并参与了本游戏的第四关-打地鼠,此关相对前三关会比较繁琐,也是承接着从简单到复杂的一个转折点哈,而这一关,玩家需要高度集中注意力,来完成此关的挑战!
成员介绍:
组长:十里青山 组长文章 勇闯掘金,你就是头号玩家!
组员:MonicaWoo (我就是小白~)组员文章勇闯掘金之----一起来打地鼠吧~~
组员:村头小二黑 渣渣黑😇 组员文章 勇闯掘金,你就是头号玩家!
本关介绍:
本关为第四关,名为打地鼠。这一关,讲究眼疾手快,玩家需要在地鼠出现的时候以最快的速度消灭它!
本关规则:
每只地鼠出现0.7s,总共20只,打中一只得一分,没有打中不得分
本关逻辑详解:
-
步骤一
由于此项目是依据vue框架构建的,先循环创建9格地鼠出没范围,附上代码:
<div class="susliks-list"> <div class="susliks-item" v-for="item in 9" :key="item"> <div class="hole" v-show="active !== item"></div> <div class="hamster" v-show="active === item" @click="countEnd"> <img src="../assets/img/hamster.png" alt=""> </div> </div> </div>
-
步骤二
在之前创建的9格范围,设置出现20次随机地鼠, 同样附上代码(代码注释则为思路):
// 刷新地鼠d refreshHamster () { // 如果回合为20次,则直接状态变成通关,跳转至下一关 if (this.round >= 20) { //不可进行点击 this.canClick = false // 样式初始化 this.active = 0 setTimeout(() => { this.status = 'success' }, 2000) return } // 回合数逐级递增 this.round++ // 从1-9之间随机取一个数,不和active相同 let active = Math.floor(Math.random() * 9) + 1 while (active === this.active) { active = Math.floor(Math.random() * 9) + 1 } this.active = active // this.active = Math.floor(Math.random() * 9) + 1 // 设置地鼠出现的时间,规定时间为0.7s this.refreshTimer = setTimeout(() => { this.resultList.push(0) this.refreshHamster() }, 700) },
-
步骤三
接下来,就是我们熟悉的打地鼠环节,依旧附上代码:
// 打中得分 countEnd () { // 不可进行点击 if (!this.canClick) { return } // 得分数组集合 this.resultList.push(1) // 清除刷新地鼠定时器 clearTimeout(this.refreshTimer) // 刷新地鼠随机出现区域 this.refreshHamster() this.$emit('add', { name: 'stage4', val: 1 }) }
本关卡简单易过,本关的代码在我的注释之下也应该能大致能理解😂,与此同时,我们的组长大佬也会发出来项目整体的文章进行讲解。大家如果有什么不明白的地方可以在评论区留言。我会请组长大人亲自为您解答,如果组长大人解答的不满意本组内还有顶级大佬在线为您排忧解难,相信我,童叟无欺🙏🏻
总结归纳:
通过本次活动可以说受益颇丰,在开发过程中学习大佬的开发逻辑,也进一步学会团队之间的配合。开发期间组长和其余小伙伴之间相互帮助,优化各个部分代码,相互分享自己开发心得。不仅长知识还能交朋友。希望掘金多多搞搞类似的活动,让我们每个人认识更多志同道合的伙伴。再次感谢!!比心️!!!