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 をデプロイする

推薦する

Docker クリーニングキラー/Docker オーバーレイ ファイルがディスク領域を大量に占有する

[インターネット上の移行ファイルをすべて見ると、信頼性が低く、症状のみを治療し、根本的な原因を治療し...

Nginx ログ管理の概要

Nginx ログの説明アクセス ログを通じて、ユーザーの地理的起源、ジャンプ元、使用端末、特定の U...

MySQL 8.0.11 のインストールと設定方法のグラフィック チュートリアル (win10)

この記事ではMySQL 8.0.11のインストールと設定方法を参考までに記録します。具体的な内容は以...

CSS3 で画像ドロワー効果を実装するためのサンプル コード

いつものように、まずは画像効果を投稿しましょう: このエフェクトの原理は非常にシンプルです。CSS3...

コードをセマンティックにする HTML のヒント

HTML のセマンティクスはありふれた問題のようです。Google で検索すると、セマンティクスに関...

要素を中央に配置するための配置方法 (Web ページ レイアウトのヒント)

ブラウザウィンドウの中央に要素を配置する方法まず、コード ブロックを示します。すでにコードを理解して...

html+vue+element-ui のスムーズさを 1 分で体験

テクノロジーファンHTMLウェブページ、知っておくべきYouyou が開発した vue フロントエン...

Maven モードで Tomcat ソースコードを実行する方法

序文最近、Tomcat の起動プロセスを分析していました。Tomcat のソース コードはアイデア次...

mysql binlog ログを正しくクリーンアップする 2 つの方法

mysqlはbinlogログを正しくクリーンアップします序文: MySQL の binlog はデー...

Linux userdel コマンドの使用法

1. コマンドの紹介userdel (ユーザー削除) コマンドは、ユーザー アカウントと関連ファイル...

MySQL インデックスの一般的な問題の概要

Q1: データベースにはどのようなインデックスがありますか?メリットとデメリットは何ですか? 1. ...

Windows での MySQL の詳細なインストール手順と基本的な使用方法

目次1. MySQLをダウンロードする2. MySQLをインストールする3. MySQL の基本的な...

MySQL ユーザー権限管理の分析例

この記事では、MySQL ユーザー権限管理の例について説明します。ご参考までに、詳細は以下の通りです...

Mysql テーブル、列、データベースの追加、削除、変更、クエリの問題の概要

以下は私がまとめた基本的なSQL知識です。主に参考資料として、また将来の他の初心者の助けとして、私自...

フレックスレイアウトが子要素によって引き伸ばされたときに、コンテンツをコンテナ内に保持する方法

モバイル デバイスでは、フレックス レイアウトが非常に便利です。デバイスの幅に応じてコンテナーの幅を...