Vue ターンテーブル抽選の簡単な実装

Vue ターンテーブル抽選の簡単な実装

この記事では、ホイール抽選を簡単に実装するためのVueの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

1.0 考察

ホイール宝くじは非常に一般的です。私はこれまでこれについて書いたことはありませんでした。今、それについて書く時間があります。分析は次のとおりです。

1.1 ターンテーブルの回転 ----- 変換の回転を使用して解決できます
1.2 回転アニメーション-----トランジションはトランジションを処理するために使用されます
1.3 ターゲットの場所と勝利の秘訣は何ですか? ------ 回転角度を制御して停止位置を制御し、プロンプトを獲得し、コールバックの追加を検討します

1.1 はじめに

上記の考え方から、実行すべき手順がわかります。まずは写真を撮りましょう。

このディスクには 10 個の部分があり、各部分は 360/10 = 36 度です。2 番目の ----> 20 枚の金貨に留まりたい場合、時計回り (最初の位置を含めて 1 としてカウント) に、合計(2 - 1)* 36 = 36回転する必要があります。このようにして、停止位置まで回転するために必要な角度は、(ターゲット - 1)*36 であると結論付けることができます。

1.2 勝利コールバック

上記の手順から、目標位置への制御方法がわかったので、次のステップはイベント通知です。最初は、回転時間を固定してからタイマーを開始することを考えました。明らかに、これは信頼できません。アニメーションが終了した後に通知する方法はありますか? transitionend、要素アニメーションの終了イベントを監視できるこのイベントを見つけましたが、互換性の問題で処理するのは簡単ではありません

/**
アニメーション終了イベント対応**/
どの遷移イベント(){
 el = document.createElement('span') とします。
 遷移 = {
 '遷移':'遷移終了',
 'OTransition':'oTransitionEnd',
 'MozTransition':'遷移終了',
 'WebkitTransition':'webkitTransitionEnd'
 };
 for(let t in transitions){
 if(el.style[t] !== 未定義){
  transitions[t]を返します。
 }
 }
 el = null;
}

2.0 完全な例

回転位置とイベント通知を制御する方法がわかったので、始めましょう。

栗:

完全なコード

<テンプレート>
 <div>
 <h3>ロータリードロー</h3>
 <div class="round_box">
  <img class="img_rotate" ref="rotImg" src="../assets/zhuan.png" alt="">
  <div class="center">
  <div class="ポインタ" ></div>
  </div>
 </div>
 <button @click="toDraw" >クリックして描画</button>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前:'rotaryDraw',
 データ() {
 戻る {
  回転: 0,
  リセット回転: 0,
  ヒットID: 1, // 1-10
  描画ステータス: false
 }
 },
 非同期マウント() {
 これを待ちます。$nextTick();
 evenTransition = this.whichTransitionEvent(); とします。
 img = this.$refs.rotImg; とします。
 that = this とする;
 const hitAre = ['30M トラフィック パッケージ','20 ゴールド コイン','20M トラフィック パッケージ','10M トラフィック パッケージ','5 ゴールド コイン',
    「ご参加ありがとうございました」、「ゴールドコイン10枚」、「50Mトラフィックパッケージ」、「ゴールドコイン2枚」、「100Mトラフィックパッケージ」
   ];
 // アニメーションの終了を監視します。img.addEventListener(evenTransition,tranHand,false);

 関数tranHand() {
  // リセット that.resetRotate = that.rotate > 360 ? that.rotate % 360 : 0;
  img.style.transition = "なし 0秒 遷移 0秒";
  img.style.transform = `rotate(${that.resetRotate}deg)`; 
  alert(`抽選結果 [ ${hitAre[that.hitId - 1]} ]`);
  that.drawStatus = false
 }
 },
 メソッド: {
 始める() {
  this.$refs.rotImg.style.transition = "すべて 3 秒、0 秒で遷移";
  this.$refs.rotImg.style.transform = `rotate(${this.rotate}deg)`;
 },
 描画する() {
  if(this.drawStatus){
  console.log('抽選進行中');
  戻る
  }
  // ステータスをマーク this.drawStatus = true
  /**
  * ディスクは全部で10枚あり、それぞれ36度、停止位置(id)度(id - 1)* 36 
  * ベース3円360*4
  * this.rotate 現在の角度* **/ 
  リセット = 360 * 4;
  idx = this.getRandomInt(1,11); とします。
  // ヒットを設定 this.hitId = idx;
  // さらに角度を回転させる必要がある let addRotate = this.resetRotate > 0 ? 360 - this.resetRotate : 0;
  // 合計角度 let allRotate = this.rotate + (idx - 1) * 36 + reset + addRotate;
  // 角度制限 this.rotate = this.setRotate(allRotate);

  this.start()
 },
 // 再帰計算角度は360*6を超えません
 回転角度を設定します。
  休止状態を deg - 360 とします。
  残りが 360*6 より大きい場合は、 this.setRotate(rest) : deg; を返します。
 },
 getRandomInt(最小値, 最大値) {
  // 上向きに集める min = Math.ceil(min);
  // 下向きに収集 max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //最大値は含まず、最小値を含む},
 // アニメーション対応 whichTransitionEvent(){
  el = document.createElement('span') とします。
  遷移 = {
  '遷移':'遷移終了',
  'OTransition':'oTransitionEnd',
  'MozTransition':'遷移終了',
  'WebkitTransition':'webkitTransitionEnd'
  };
  for(let t in transitions){
  if(el.style[t] !== 未定義){
   transitions[t]を返します。
  }
  }
  el = null;
 }
 }

}
</スクリプト>

<スタイル lang="scss" >
.img_rotate{
 変換: 回転(0度);
}
.ラウンドボックス{
 幅: 100%;
 最大幅: 375px;
 位置: 相対的;
 オーバーフロー: 非表示;
 画像{
 幅: 100%;
 }
 。中心{
 位置: 絶対;
 上位: 50%;
 左: 50%;
 変換: translate(-50%,-50%);
 .ポインタ{
  幅: 5px;
  高さ: 90px;
  背景色: #f40;
  位置: 絶対;
  上: -90px;
 }
 .ポインタ::before{
  コンテンツ:'';
  幅: 0;
  高さ: 0;
  border-top: 15px 透明の実線;
  border-right: 15px 透明の実線;
  下境界線: 15px 実線 #f40;
  border-left: 15px 透明の実線;
  位置: 絶対;
  上: -20px;
  左: 50%;
  変換: translateX(-50%);
 }
 }
}

</スタイル>

3.0 ヒント

一般的に、注意すべき点がいくつかあります

1. アニメーションが始まる前にロックする

2.アニメーション終了後に通知し、ステータスをリセットする

/**
例えば:
ベース3円リセット360*3
2番目の停止位置は(2 - 1)* 36 = 36です
合計角度 360*3 + 36
アニメーションが停止した後は、回転し続けるため角度を増やし続けることは不可能なので、360*3 + 36 をリセットする必要があります。実際には、36 度回転してから必要な角度を増やすことを検討できます**/

3. 回転を続けます。計算は初期値の 30M フローに基づいているため、回転は依然として 30M から開始する必要があります。このとき、現在の停止位置が 300 度であると仮定すると、つまり、60 度回転すると初期位置に戻ります。私もこの考えに従ってリセットしました。

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

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

<<:  Mac での MySql の詳細なインストールと構成

>>:  Centos7 で crontab + シェル スクリプトによる定期的な自動ファイル削除の問題を解決する

推薦する

反応自動構築ルーティングの実装

目次順序1. 集中ルーティング2. ファイルディレクトリ3. CompileRouterを作成する4...

Windows 10 の仮想マシンに Mac システムをインストールするグラフィック チュートリアル

1. 仮想マシンバージョン15.5.1をダウンロードする公式サイトから直接最新バージョンをダウンロー...

Taobao ストアでズームインする効果は、スライドショーを使用する原理に似ています。

今日は、スライドを使用する原理に似た、Taobao のフロントエンドのマウス ズーム効果に慣れました...

CCS におけるマージン: トップ崩壊問題を解決する

HTML 構造は次のとおりです。 CCS 構造は次のとおりです。 ページ効果図は次のとおりです。 こ...

MySQL テーブルをコピーする 3 つの方法 (要約)

テーブル構造とそのデータをコピーする次のステートメントは、データを新しいテーブルにコピーします。注:...

Tomcatはスレッドプールを使用してリモート同時リクエストを処理します。

Tomcatが同時リクエストを処理する方法を理解することで、スレッドプール、ロック、キュー、および...

登録ページを実装するためのJS、CSS、HTML

HTML と CSS で実装された登録ページ テンプレート。早速、コードを見てみましょう。更新: ...

React クラスコンポーネントのライフサイクルと実行順序

1. Reactコンポーネントを定義する2つの方法1. 関数コンポーネント。単純な関数コンポーネント...

あなたが知らない Linux KDE アプリケーション 11 選

翻訳Kool Desktop Environment の略称。 Linux、Unix、FreeBSD...

データページング効果を実現する js オブジェクト

この記事の例では、データのページング効果を実現するためのjsオブジェクトの具体的なコードを参考までに...

MySQL 5.7.18 アーカイブ圧縮版のインストールチュートリアル

この記事では、MySQL 5.7.18アーカイブ圧縮版をインストールする具体的な方法を参考までに紹介...

CSS3 3Dクールキューブ変形アニメーションの実装

私はコーディングが大好きです。コーディングすると幸せになります!みなさんこんにちは、Counterで...

CSS3で実装された水平ヘッダーメニュー

結果:実装コードhtml <nav class="dropdownmenu"...

Mysql の一般的なベンチマーク コマンドの概要

mysqlslap共通パラメータの説明–auto-generate-sql システムはテスト用のSQ...

Dockerはjenkins+mavenコード構築および展開プラットフォームを構築します

目次Docker の基本概念Docker インストール プロセス (Centos6.9)カーネルのア...