勇闯掘金之----一起来打地鼠吧~~

751 阅读3分钟

我正在参加掘金社区游戏创意投稿大赛团队赛,详情请看:游戏创意投稿大赛

游戏地址: 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
        })
      }
    

本关卡简单易过,本关的代码在我的注释之下也应该能大致能理解😂,与此同时,我们的组长大佬也会发出来项目整体的文章进行讲解。大家如果有什么不明白的地方可以在评论区留言。我会请组长大人亲自为您解答,如果组长大人解答的不满意本组内还有顶级大佬在线为您排忧解难,相信我,童叟无欺🙏🏻

总结归纳:

通过本次活动可以说受益颇丰,在开发过程中学习大佬的开发逻辑,也进一步学会团队之间的配合。开发期间组长和其余小伙伴之间相互帮助,优化各个部分代码,相互分享自己开发心得。不仅长知识还能交朋友。希望掘金多多搞搞类似的活动,让我们每个人认识更多志同道合的伙伴。再次感谢!!比心️!!!