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

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

Vueは宮殿グリッド回転抽選(CrossFireのxx転生に似ている)を実装しています。参考までに、具体的な内容は次のとおりです。

これ以上の説明はせずに、すぐにコードを見てみましょう。キーコードはコメント化されており、理解しやすいです。コピーして使用するだけ!
また、css部分はnode-sassとsass-loaderに依存しています。インストールしていない場合はインストールしてください。既にインストールされている場合はスキップしてください~~

"ノードサス": "^4.12.0",
"sass-loader": "^8.0.2",

<テンプレート>
  <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;}
}
</スタイル>

効果画像:

最後に、確率は完全にランダムであることを指摘しておきます。今のところ当選確率を調整するのに特にいいアイデアはありません。もっといいアイデアがあれば、ぜひ一緒に議論しましょう。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue3で宝くじテンプレート設定を実現
  • Vueは大きなターンテーブル抽選機能を実装しました
  • デジタルスクロール宝くじ効果を実現するVueコンポーネント
  • VUEがターンテーブル大抽選会を実施
  • Vue ターンテーブル抽選の簡単な実装
  • Vueコンポーネント、モバイル端末の9マスグリッドターンテーブル抽選を実現
  • Vue.js 大ターンテーブル抽選会の概要と実装アイデア
  • VUEに基づく九公閣抽選機能
  • Vueは携帯電話番号抽選の上下スクロールアニメーションの例を実装します
  • Vue が 9 マスの宝くじを実現

<<:  CSSはラジオをクリックして2つの画像スタイルを切り替えますが、複数のラジオのうち1つだけをチェックできます。

>>:  Docker で Confluence をデプロイする

推薦する

InnoDB エンジンの redo ファイルのメンテナンス方法

InnoDB REDO ログ ファイルのサイズと数を調整する場合は、次の手順に従います。 1. My...

HTMLページ作成に関する私の経験の簡単な要約

Word of Mouth に入社して 3 ~ 4 か月が経ちました。仕事の中で一番の収穫は、ビジュ...

MySQL 選択最適化ソリューションに関する簡単な説明

目次実生活からの例クエリが遅い最適化する方法カウント制限最大値と最小値 min&max実生活...

Vue Element UI カスタム説明リストコンポーネント

この記事の例では、Vue Element UIカスタム説明リストコンポーネントの具体的なコードを参考...

JavaScriptオブジェクトをマージするさまざまな方法の詳細な説明

目次オブジェクトをマージするさまざまな方法(インターフェースを通じてデータを取得し、それをローカル ...

JavaScriptはスライダーを介してWebページの色を変更することを実装します

みなさんこんにちは、今日はウェブフロントエンドのHTMLを見ていたら、inputタグのtype属性が...

CSSのoutline-offsetプロパティを使用してプラス記号を実装する

次のような初期コードがあると仮定します。 <!DOCTYPE html> <htm...

MySQL における制限関数と合計関数の混在使用の問題の詳細な説明

序文今日、注文データを同期した後、同僚は、合計注文金額とデータソースの合計金額に差があったため、LI...

CSS3で作成した画像スクロール効果

成果を達成する実装コードhtml <base href="https://s3-us...

MySQLの使い方の詳細な説明

目次1. はじめに2. 本文2.1 Where句の位置2.2 演算子2.3 NULL値1. はじめに...

Dockerコンテナがホストポートにアクセスできない場合の解決策

最近、仕事中に問題が発生しました。Docker コンテナがホストの redis にアクセスできず、t...

innerHTML アプリケーション

ブランクのブログ: http://www.planabc.net/ innerHTML プロパティは...

MySQLログシステムの使い方に関する簡単なチュートリアル

目次序文1. エラーログ2. バイナリログ1. バイナリログを有効にする2. バイナリログ形式3. ...

MySQL 5.7.23 解凍バージョンのインストールチュートリアル(画像とテキスト付き)

毎回インストールチュートリアルを探すのは面倒なので、後で確認できるように手順をバックアップします。解...

Docker プルタイムアウトの解決策

最近、Docker イメージのプルが非常に不安定です。遅く、タイムアウトすることがよくあります。 x...