vue製做抓娃娃機

去年爲聯通製做雙十一活動，作四個小遊戲：‘配對消消樂’、移動拼圖、抓娃娃、倒計時。 如今先作來分享一下製做抓娃娃遊戲時的經驗 先上效果圖

遊戲規則：在指定時間內抓到上圖四張卡片爲挑戰成功。 如今直接說遊戲主要內容：娃娃滾動、爪子向下抓取、抓到卡片 廢話很少說直接上代碼！（此樣式是根據需求而定）

<!--佈局樣式-->
<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;
    },
複製代碼

代碼所有貼上了，不少功能都是由於本身的需求去加的。 第一次寫文章，可能具體的表述不清楚。

點個贊吧~~