Vueは宮殿のグリッド回転抽選を実現します

<テンプレート>
  <div class="home">
    <div class="ホームコンテナ">
      <div class="home-container-line">
        <div
          クラス="ホームコンテナラインボックス"
          v-for="リスト内の項目.slice(0, 5)"
          :key="アイテム.インデックス"
          :class="{ 選択: item.active }"
        >
          {{item.label}}
        </div>
      </div>
      <div class="home-container-line">
        <div
          クラス="ホームコンテナラインボックス"
          v-for="リスト内の項目.スライス(11, 12)"
          :key="アイテム.インデックス"
          :class="{ 選択: item.active }"
        >
          {{item.label}}
        </div>
        <div class="home-container-line-btn" @click="handleClick" :disable="isAnimate"></div>
        <div
          クラス="ホームコンテナラインボックス"
          v-for="リスト内の項目.スライス(5, 6)"
          :key="アイテム.インデックス"
          :class="{ 選択: item.active }"
        >
          {{item.label}}
        </div>
      </div>
      <div class="home-container-line">
        <div
          クラス="ホームコンテナラインボックス"
          v-for="Array.prototype.reverse.call(list.slice(6, 11)) 内の項目"
          :key="アイテム.インデックス"
          :class="{ 選択: item.active }"
        >
          {{item.label}}
        </div>
      </div>
    </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 「ラッキー」
  データ（） {
    戻る {
      リスト: [
        { ラベル: "勝てない", 値: 1, 画像: "", インデックス: 0, アクティブ: false },
        { ラベル: "ヘルスケア", 値: 2, 画像: "", インデックス: 1, アクティブ: false },
        { ラベル: "iPhone13", 値: 3, 画像: "", インデックス: 2, アクティブ: false },
        { ラベル: "MacBook Pro", 値: 4, 画像: "", インデックス: 3, アクティブ: false },
        { ラベル: "MacBook Air", 値: 5, 画像: "", インデックス: 4, アクティブ: false },
        { ラベル: "1 ポイント", 値: 6, 画像: "", インデックス: 5, アクティブ: false },
        { ラベル: "5 ポイント", 値: 7, 画像: "", インデックス: 6, アクティブ: false },
        { ラベル: "10 ポイント", 値: 8, 画像: "", インデックス: 7, アクティブ: false },
        { ラベル: "シャオアイ", 値: 9, 画像: "", インデックス: 8, アクティブ: false },
        { ラベル: "安木西ヨーグルト", 値: 10, 画像: "", インデックス: 9, アクティブ: false },
        { ラベル: "ショッピングカートをクリア"、値: 11、画像: ""、インデックス: 10、アクティブ: false }、
        { label: "50元の電話代", val: 12, img: "", index: 11, active: false },
      ]、
      isAnimate: false, // true は抽選が進行中であることを意味します。現在の抽選が終了する前に抽選ボタンをクリックすることは無効です jumpIndex: Math.floor(Math.random() * 12), // 抽選ジャンプのインデックス jumpingTime: 0, // ジャンプの時間 jumpingTotalTime: 0, // ジャンプの合計時間。duration 変数に 0 から 1000 までの乱数を足した値に基づきます jumpingChange: 0, // ピークジャンプ速度。velocity 変数に 0 から 3 までの乱数を足した値に基づきます duration: 4500, // 期間 velocity: 300, // 速度};
  },
  メソッド: {
    ハンドルクリック() {
      if(this.isAnimate) 戻り値:
      this.jumpingTime = 0;
      this.jumpingTotalTime = Math.random() * 1000 + this.duration;
      this.jumpingChange = Math.random() * 3 + this.velocity;
      this.animateRound(this.jumpIndex);
    },

    アニメーションラウンド(インデックス) {
      this.isAnimate = true; 
      this.jumpIndex が this.list.length - 1 の場合、 this.jumpIndex ++ になります。
      this.jumpIndex >= this.list.length - 1 の場合、 this.jumpIndex = 0;

      this.jumpingTime += 100; // 各フレームで setTimeout メソッドを実行するのに費やされた時間 // 現在の時間が合計時間よりも大きい場合は、アニメーションを終了して賞品をクリアします if (this.jumpingTime >= this.jumpingTotalTime) {
        this.isAnimate = false; 
        if(インデックス == 0) {
          alert(`賞を取れなかったのは残念ですが、これからも頑張ってくださいね〜`);
        }
        それ以外{
          alert(`おめでとうございます。${this.list[index].label} を描きました`)
        }
        戻る
      }

      // 回転アニメーション if (index >= this.list.length-1) {
        インデックス = 0;
        this.list[11].active = false;
        this.list[インデックス].active = true;
        インデックス -= 1;
      } それ以外 {
        this.list[インデックス].active = false;
        this.list[インデックス + 1].active = true;
      }

      タイムアウトを設定する(() => {
        this.animateRound(インデックス + 1);
      }, this.easeOut(this.jumpingTime, 0, this.jumpingChange, this.jumpingTotalTime));
    },

    /**
     * 速いものから遅いものへのイージング関数* @param {Num} t 現在の時間* @param {Num} b 初期値* @param {Num} c 変更値* @param {Num} d 期間*/
    イーズアウト(t, b, c, d) {
      ((t /= d / 2) < 1) の場合、(c / 2) * t * t + b を返します。
      (-c / 2) * (--t * (t - 2) - 1) + b を返します。
    },
  },
};
</スクリプト>
<style lang="scss" スコープ>
。中心 {
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
}
。家 {
  パディング: 0;
  マージン: 0;
  幅: 100%;
  高さ: calc(100vh - 16px);
  背景画像: 線形グラデーション(25度, #30007c, #464995, #4d83ad, #41bfc4);
  .center を拡張します。
  ＆-容器 {
    幅: 1000ピクセル;
    高さ: 600px;
    ＆-ライン {
      幅: 100%;
      高さ: 198px;
      ディスプレイ: フレックス;
      ＆-箱 {
        フレックス: 1;
        オーバーフロー: 非表示;
        マージン: 5px 3px 5px 3px;
        .center を拡張します。
        背景: #fff;
        遷移: すべて .3;
      }
      &-btn {
        位置: 相対的;
        フレックス: 3;
        オーバーフロー: 非表示;
        マージン: 5px 3px 3px 3px;
        .center を拡張します。
        ボックスの影: 0 1px 10px 0px #cf5531;
        背景画像: 線形グラデーション(
          25度、
          #cf5531、
          #d0853a,
          #cdaf43,
          #c4d84d
        );
        カーソル: ポインタ;
        ＆：アクティブ {
          背景画像: 線形グラデーション(
            25度、
            #3f3e41,
            #6d6340,
            #9a8b39,
            #c9b629
          );
        }
        ＆：：前に {
          位置: 絶対;
          内容: 「クリックして賞品を獲得」
          フォントサイズ: 2.5rem;
          色: #fff;
          フォントの太さ: 太字;
        }
      }
    }
  }
}
.選択された{
  背景: rgba($color: #f6e58d, $alpha: 0.5);
  アニメーション名: twinkle;
  アニメーション期間: 3秒;
  アニメーションの反復回数: 無限;
}
@keyframes きらめき {
  0% {背景:#ffbe76;}
 100% {背景:#f6e58d;}
}
</スタイル>