去年为联通制作双十一活动，做四个小游戏：‘配对消消乐’、移动拼图、抓娃娃、倒计时。现在先做来分享一下制作抓娃娃游戏时的经验先上效果图

游戏规则：在指定时间内抓到上图四张卡片为挑战成功。现在直接说游戏主要内容：娃娃滚动、爪子向下抓取、抓到卡片废话不多说直接上代码！（此样式是根据需求而定）

<!--布局样式-->
<div class="game">
        <!--爪子-->
        <div class="paw">
          <div class="pawer"></div>
          <div class="pawerPic">
            <img src="./../assets/img/zhuashou.png" class="lose" />
            <div class="win" v-if="gzShow2">
              <img :src="t_img" />
            </div>
          </div>
        </div>
        <!--区域-->
        <div class="area">
          <!--娃娃滚动-->
          <div id="pack" ref="pack">
            <div id="sel1" class="father" ref="imgs">
              <img
                v-for="img in imgs"
                :class="img.isSuc ? 'yes' : 'no'"
                :src="img.img"
                :key="img.id"
                :alt="img.isSuc"
              />
            </div>
          </div>
        </div>
        <span class="button" @click="zhua"></span>
      </div>

// css 
.game {
      width: 80%;
      height: 730px;
      background: url(./../assets/img/interface_1.png) no-repeat;
      background-size: 100%;
      animation: bg infinite 0.6s;
      position: relative;
      top: -60px;
      left: 0;
      z-index: 2;
      .paw {
        position: relative;
        top: 10%;
      }
      .pawer {
        width: 20px;
        background: rgb(170, 219, 254);
        height: 10px;
        position: absolute;
        top: 20px;
        left: 51%;
        margin-left: -15px;
        border-left: 1px solid rgba(42, 59, 156, 0.7);
        border-right: 1px solid rgba(42, 59, 156, 0.7);
      }
      .pawerPic {
        width: 95px;
        // height:85px;
        position: absolute;
        top: 30px;
        left: 51%;
        margin-left: -55px;
        img {
          width: 100%;
        }
        .win {
          position: absolute;
          bottom: -60px;
        }
      }
      .area {
        width: 100%;
        height: 500px;
        // overflow:hidden;
        position: absolute;
        // top:40px;
        left: 0;
        bottom: 40px;
      }
      /*娃娃滚动*/
      #pack {
        width: 80%;
        white-space: nowrap;
        overflow: hidden;
        position: absolute;
        bottom: 60px;
        left: 10%;
        #sel1 {
          display: block;
          img {
            display: block;
            width: 130px;
            height: 150px;
            float: left;
            margin-left: 20px;
          }
        }
      }
      .button {
        display: block;
        width: 130px;
        height: 90px;
        background: url(./../assets/img/button.png) no-repeat;
        background-size: 100%;
        position: absolute;
        bottom: 20px;
        left: 40%;
      }
    }

接下来就是卡片滚动，设置定时器，给卡片模块设置transform 让卡片从右向左匀速移动。

 mounted() {
  this.wawa();
  this.talon = $(".pawerPic").offset().left + 100; // 首先获取爪子的位置(这里是固定的)
  }
wawa() {
      var pack = this.$refs.pack,
        width = $("#pack").width(),
        imgsWidth = (this.imgs.length * width) / 3,
        initLeft = 0;

      this.chatTimer = setInterval(function() {
        initLeft++;

        if (imgsWidth - initLeft < width + 60) {
          initLeft = 0;
        }
        $("#sel1").css({
          width: imgsWidth,
          transform: "translateX(-" + initLeft + "px)"
        });
      }, 15);
    },

再接着就是点击按钮控制爪子上下移动抓取卡片。首先固定爪子的位置，上图代码中mounted里面的talon，然后设置爪子到下面的终止距离（差不多能够到卡片），为爪子设置动画改变top值，拉长绳子改变height值（因为爪子和绳子是分开的）。当爪子到达下面时，获取每个卡片的位置，与爪子当前位置作比较，看爪子是否在某个卡片的指定抓取区域内来判断是否抓到卡片，然后上升。上代码！！！

zhua() {
        let that = this;
        that.t_img = "";
        that.gzShow2 = false;
        var long = $(".game").height() - 230; //爪子伸长的距离

        $(".pawer").animate(
          {
            height: long
          },
          1000
        ); //伸下去(绳子)
        $(".pawerPic").animate(
          {
            top: long + 10
          },
          1000
        ); //伸下去(爪子)

        setTimeout(function() {
          that.ok_no();
        }, 1000); /* 判断抓没抓到娃娃 */

        $(".pawer").animate(
          {
            height: 10
          },
          1000
        ); //伸上去(绳子)
        $(".pawerPic").animate(
          {
            top: 20
          },
          1000
        ); //伸上去(爪子)
    },
ok_no() {
      let that = this;
      /* 打印出此时此刻每个娃娃的位置 */
      let width = $("#sel1 img").width();
      console.log(width);
      for (let i = 0; i < $("#sel1 img").length; i++) {
        let l =
          $("#sel1 img").eq(i).offset().left +width / 2; // 此时此刻每个娃娃的位置

        if (l - 15 <= that.talon && that.talon <= l + 15) {  // 这里的15是用来控制爪子的位置到卡片的哪些区域算抓到，可自行修改
          that.gzShow2 = true;

          that.t_img = $("#pack img") .eq(i - 1).attr("src");
          let isSuc = $("#pack img").eq(i - 1).attr("alt");

          if (isSuc !== undefined) {
            switch (isSuc) {
              case "1":
                that.isE = false;
                break;
              case "2":
                that.isS = false;
                break;
              case "3":
                that.isI = false;
                break;
              case "4":
                that.isM = false;
                break;
              default:
                break;
            }
            that.isSuc.push(parseInt(isSuc));
          }
          let ok = that.isContained(that.isSuc, that.success);

          if (ok == true) {
             console.log('成功')
          } else {
            console.log("狗屎都没抓到");
          }
      }
    },
  // 判断抓到的数组是否中奖
    isContained(a, b) {
      if (!(a instanceof Array) || !(b instanceof Array)) return false;
      if (a.length < b.length) return false;
      var aStr = a.toString();
      for (var i = 0, len = b.length; i < len; i++) {
        if (aStr.indexOf(b[i]) == -1) return false;
      }
      return true;
    },

代码全部贴上了，很多功能都是因为自己的需求去加的。第一次写文章，可能具体的表述不清楚。

点个赞吧~~