WeChatアプレットでラッキーホイールゲームを実装する方法

WeChatアプレットでラッキーホイールゲームを実装する方法

ここでは主に、WeChat アプレットでラッキーホイール ゲームを開発する方法を紹介します。主に JavaScript と CSS 構文を使用し、シンプルなラッキーホイール (6 つの賞品エリアを例に挙げます) を簡単に実現できます。

序文

このチュートリアルでは、JavaScript と CSS に関するある程度の基礎知識と、小規模なプログラムの開発経験が必要です。習得する必要がある具体的な知識ポイントは次のとおりです。

  • CSS 位置、変換、遷移、オーバーフロー
  • JavaScript 基本ランダムアルゴリズム
  • wxs構文
  • ミニプログラム組み込みアニメーションAPI

レンダリング

ミニプログラム開発のアイデア

開発のアイデアは 3 つの部分から構成されています。最初の部分は、CSS を使用してターンテーブルの背景を描画することです。2 番目の部分は、wxs 構文を使用してレスポンシブ スタイルを実装することです。3 番目の部分は、アプレットの組み込みアニメーション API を使用して、JS を通じてターンテーブルの回転と回転のランダム性を実現することです。

主に執筆のアイデアを紹介し、これから説明を始めます。

三角形の描き方

まず、基本的な wxml フレームワークを記述します。

<view class="ターンテーブル">
  <ビュークラス="ラッパー">
    <view class="item">
	  <view class="item-inner">
		<text>10 ポイント</text>
	  </ビュー>
	</ビュー>
  </ビュー>
</ビュー>

長さと幅がそれぞれ 300rpx と 600rpx の同じサイズの 2 つの長方形を描き、position CSS 属性を使用して 2 つの長方形を結合しました。

.ターンテーブル{
  表示: ブロック;
  幅: 100%;
  高さ: 600rpx;
}
.ターンテーブル .ラッパー{
  位置: 相対的;
  変換の原点: 中心;
  幅: 100%;
  高さ: 600rpx;
}

結合後、2 つの長方形を分離し、赤い長方形を半円にし、青い長方形を時計回りに 60 度回転させ、赤い長方形を反時計回りに 30 度回転させます。なぜこのように回転させる必要があるのでしょうか。これは、青はもともと赤とともに反時計回りに 30 度回転し、三角形の内角は 60 度であるためです。この 60 度の角度を形成するには、赤を回転させた後、青を時計回りに 60 度動かして、60 度の角度を形成する必要があります。

.ターンテーブル .ラッパー .アイテム {
  位置: 絶対;
  左: 50%;
  幅: 300rpx;
  高さ: 600rpx;
  境界線の半径: 0px 300rpx 300rpx 0;
  変換の原点: 左中央;
  変換: 回転(-30度);
}
.ターンテーブル .ラッパー .item .item-inner {
  テキスト配置: 中央;
  幅: 300rpx;
  高さ: 600rpx;
  変換: translateX(-300rpx) rotate(60deg); 
  変換の原点: 右中央;
  境界線の半径: 300rpx 0 0 300rpx;
  フォントサイズ: 32rpx;
}

次の重要なステップは、アイテムに overflow: hidden 属性を追加することです。これにより、三角形が表示され、フォントの位置が調整されます。

.ターンテーブル .ラッパー .アイテム {
  位置: 絶対;
  左: 50%;
  幅: 300rpx;
  高さ: 600rpx;
  境界線の半径: 0px 300rpx 300rpx 0;
  オーバーフロー: 非表示;
  変換の原点: 左中央;
}
.turntable .wrapper .item .item-inner テキスト {
  表示: ブロック;
  変換の原点: 中心;
  変換: translateY(100rpx) translateX(43rpx) 回転(-30deg);
}

三角形を描いた後、同じ大きさの 6 つの三角形を結合して円盤を形成できます。各三角形の回転角度を変更するだけです。

.turntable .wrapper .item:nth-child(1) {
  変換: 回転(-30度);
}

.turntable .wrapper .item:nth-child(2) {
  変換: 回転(-90度);
}

.turntable .wrapper .item:nth-child(3) {
  変換: 回転(-150度);
}

.turntable .wrapper .item:nth-child(4) {
  変換: 回転(-210度);
}

.turntable .wrapper .item:nth-child(5) {
  変換: 回転(-270度);
}

.turntable .wrapper .item:nth-child(6) {
  変換: 回転(-330度);
}

レスポンシブスタイルの実装

さまざまなビジネスニーズにうまく適応するために、ターンテーブルスタイルをレスポンシブにして、外部から渡される賞品データの長さに応じてさまざまなスタイルを簡単に設定できるようにしました。このステップの判断をwxsモジュールに配置しました。

<wxs モジュール="計算済み">
	var rotate = 関数 (インデックス, 長さ) {
		var 初期値 = - (360 / 長さ / 2)
		var averageRotate = 360 / 長さ
		var deg = 初期値 - 平均回転 * インデックス
		'transform: rotate(' + deg + 'deg);' を返します。
	}
	var inner = 関数 (長さ) {
		var averageRotate = 360 / 長さ
		'transform: translateX(-300rpx) rotate(' + averageRotate + 'deg);' を返します。
	}
	var テキスト = 関数 (長さ) {
		変数距離 = 0
		var回転 = 0
		スイッチ(長さ){
			ケース6:
				距離 = 43
				回転 = 30
				壊す
			ケース8:
				距離 = 72
				回転 = 30
				壊す
			ケース4:
				距離 = -20
				回転 = 40
				壊す
		}
		'transform: translateY(100rpx) translateX(' + distance + 'rpx) rotate(-45deg);' を返します。
	}
	モジュール.エクスポート = {
		回転: 回転、
		内側:内側、
		テキスト: テキスト
	}
</wxs>

アニメーションシステムと勝利システム

勝率を設定し、360度の円で計算すると、0〜360の勝率範囲が得られます。ランダムに取得した数字がどの区間に属するかを判断し、区間値報酬を使用してディスクを回転させる必要がある角度を決定します。大まかなアイデアはこんな感じです。では、主なアイデアについて説明していきましょう。

ディスクが回転する必要がある角度 = 報酬 * 円の6つのピースの平均値 + 3 * 360

まず、6 つの賞品エリアの当選率を設定する必要があります。当選率の合計は 1 にする必要があります。次に、初期化されたデータを 6 桁の配列に結合し、コンポーネントの外部からコンポーネントに渡します。

賞: [{
        '名前': '1 ポイント',
        '勝利': 0.2,
        'カウント': 1
      },
      {
        'name': 'ご参加ありがとうございました',
        '勝利': 0.5,
        'カウント': 0
      }, {
        '名前': '5 ポイント',
        '勝利': 0.05,
        'カウント': 5
      }, {
        '名前': '7 ポイント',
        '勝利': 0.05,
        'カウント': 7
      }, 
      {
        '名前': '3 ポイント',
        '勝利': 0.1,
        'カウント': 3
      }, 
      {
        '名前': '4 ポイント',
        '勝利': 0.1,
        'カウント': 4
      }
    ]、

0~360の当選範囲は、円を360度として計算されます。

getRange(勝利) {
   temp = [] とします
     勝利.forEach((アイテム、インデックス) => {
       (インデックス === 0)の場合{
         temp.push(item['winnning'] * 360)
       } それ以外 {
         temp.push(parseInt(temp.slice(-1)) + アイテム['winnning'] * 360)
       }
      })
      戻り温度
    },

ランダムな整数を生成します。もちろん、この数値は 0 から 360 までの範囲でなければなりません。それ以外の場合、360 を超えたり 0 未満になったりすると意味がありません。

ランダム = Math.round(Math.random() * 360) とします。

乱数を取得したら、それがどの賞品範囲に含まれるかを決定し、対応する間隔値を応答番号報酬に割り当てます。

for (let i in 勝利範囲) {
    let currentwinning = winnerRange[i] // 現在の値if (random < currentwinning) {
          this.setData({
            報酬: 私
          })
          壊す
      } それ以外 {
        (i == 0) の場合 {
           続く
        }
        if (ランダム >= 勝利範囲[i - 1] && ランダム <= 現在の勝利) {
           this.setData({
              報酬: 私
           })
           壊す
       }
     }
}

クリックして開始するメイン関数を onPoint() に配置します。関数が開始すると、賞品を獲得するチャンスがまだあるかどうかを判断し、アニメーションの実行中に関数をクリックしてアニメーションを実行できないようにする必要があります。必要な角度を計算し、WeChat アプレットのアニメーション API アニメーションを使用してディスクを回転させます。アニメーションが終了すると、カスタム コンポーネントを通じて当選情報がトリガーされ、外部のリスナーが受信できるようになります。

オンポイント() {
      // 平均値 const averageRotate = 360 / this.properties.prize.length
      // 宝くじに当たる可能性はありますか if (this.properties.chance === 0) {
        this.triggerEvent('なし')
        戻る
      }
      // 回転中にスタートボタンがクリックされないようにする if (!this.data.onRotation) {
        this.setData({
          回転時: true
        })
        this.getReward()
        let deg = this.data.reward * averageRotate + 3 * 360 // 少なくとも3回転 this.animate('.wrapper', [{
            回転: 0,
            イージー: 'イーズインアウト'
          },
          {
            回転: 度、
            イージー: 'イーズインアウト'
          }
        ], 5000, 関数() {
          this.setData({
            回転時: false
          })
          //独自の抽選情報を送信します this.triggerEvent('onResult', this.properties.prize[this.data.reward])
        }.bind(これ)
      }
    },

最後に、次回アニメーションが正しい角度に回転するように、毎回実行する前にアニメーションをリセットすることを忘れないでください。もちろん、コンポーネント外でも使用できるように関数内に配置しました。

onClear(){
   this.clearAnimation('.wrapper')
}

やっと

それが全体のアイデアです。どうですか?とてもシンプルだと思いませんか?これを実現するための重要なステップは、ディスクを描画することです。このステップが適切に実行されていれば、WeChat アプレットがアニメーション実装部分のすべてをすでに実行しているため、残りははるかに簡単になります。最後に、もっと良い方法があれば、コメント欄でお気軽に議論してください。
特に、このターンテーブル プロジェクトは、私の WeChat アプレット インスタンスで実行されていることに注意してください。コードをスキャンしてアプレットに入り、ホームページの下部にあるエントリ ポートを確認できます。

ターンテーブルコードリポジトリ: ターンテーブル

WeChatミニプログラムでラッキーホイールゲームを実装する方法に関するこの記事はこれで終わりです。より関連性の高いミニプログラムラッキーホイールゲームのコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き閲覧してください。今後も123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません:
  • フリップカードゲームのWeChatミニプログラムバージョン
  • WeChatアプレットがパズルゲームを実装
  • WeChatアプレットに2048ミニゲームを実装する詳細なプロセス

<<:  MySQLをインストールして設定し、ルートパスワードを変更する方法

>>:  Linux のロード vmlinux デバッグ

推薦する

RabbitMQ の Docker インストールと設定手順

目次単一マシンの展開オンラインプルミラーを見るRabbitMQを作成して実行するMQコンテナを正常に...

Dockerの急速な拡張の高度な方法

1. コマンド方式作成された Swarm クラスターで nginx サービスを実行し、--repli...

HTMLファイルで外部CSSファイルを導入する場合のパスの書き方について簡単にまとめます

1. 外部CSSファイルの基本スタイルをインポートする<link> タグを使用して外部ス...

MySQLはパスワードなしでログインする例を実装しています

具体的な方法:ステップ1: mysqlサービスを停止する /etc/init.d/mysqld を停...

開発をスピードアップできる VueUse ライブラリ 5 つ (まとめ)

目次VueUse にはどのようなユーティリティがありますか? VueUseをVueプロジェクトにイン...

タブ切り替えを実装するための HTML サンプル コード

タブ切り替えもプロジェクトではよく使われる技術です。一般的にタブ切り替えはjsやjqを使って実装され...

フロントエンド開発者は毎日HTMLタグの理解を学ばなければならない(1)

2.1 セマンティクス化により、Webページが検索エンジンに理解されやすくなりますこの章では、We...

Nginx バージョンのスムーズなアップグレードソリューションの詳細説明

目次背景: Nginx スムーズ アップグレード ソリューションフォールバック手順要約する背景:負荷...

lastInfdexOf 関数の MySQL 実装例

MySQL では lastIndexOf に似た関数を使用する必要がある場合もありますが、すぐに使用...

Vue router-viewとrouter-linkの実装原理

使用 <div id="アプリ"> <router-link ...

RedisとMySQLの違いを簡単に説明してください

MySQL はディスクに保存される永続的なストレージであり、取得には一定の IO が伴うことはご存じ...

docker compose を使用して consul クラスタ環境を構築する例

領事の基本概念サーバーモードとクライアントモードサーバー モードとクライアント モードは、consu...

ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント

<br />ウェブサイトのアクセス速度はウェブサイトのトラフィックに直接影響を及ぼし、ウ...

MySql でメモリ使用量を削減する方法の詳細な説明

序文デフォルトでは、MySQL はデータベース クエリ データをキャッシュするために大きなメモリ ブ...

vsCodeはワンクリックでvueテンプレートを生成します

1. ショートカットCtrl + Shift + Pを使用してコンソールを呼び出します 2、「スニペ...