创意小游戏——抓住掘金酱，好多好多掘金酱，快来抓住TA

十里青山

发布于 2022-08-22 09:56:35

2650

发布于 2022-08-22 09:56:35

文章被收录于专栏：我的前端之路

游戏体验地址： 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')
    },