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 デバッグ

推薦する

今日、私は非常に奇妙なクリックの問題に遭遇し、自分で解決しました

...こんな感じで、今日はポップアップウィンドウを作ろうと思ったのですが、バックエンド PHP によ...

JavaScript ECharts の使用方法の説明

以前、プロジェクトを行う際に ECharts を使用しました。今日はそれをメモとして整理し、より多く...

{{ }} で関数を直接使用する WeChat アプレットの例

序文WeChat アプレット開発 (ネイティブ wxml、wxcss) で、{{ }} 内で直接メソ...

Linux で MySQL データベースのインポートおよびエクスポート コマンドを実装する方法

1. mysqldump コマンドを使用してデータベースをエクスポートします (このコマンドのパスで...

CSS3 のメディアクエリと rem レイアウトを組み合わせてモバイル画面に適応

CSS3 構文: (750 ピクセルのデザインの場合、1rem = 100 ピクセル) @media...

Linux システムでログを手動でスクロールする方法

ログローテーションは、Linux システムでは非常に一般的な機能です。ログローテーションは、システム...

React+tsは二次リンク効果を実現します

この記事では、二次リンク効果を実現するためのReact+tsの具体的なコードを参考までに共有します。...

CSS3 の Flex レイアウトの詳細な分析

Flexbox レイアウト モジュールは、コンテナー内のスペースをより効率的に配分する方法を提供する...

Vueカスタムディレクティブの詳細

目次1. 背景2. ローカルカスタム指示3. グローバルカスタム指示4.1 カスタムコマンドフック関...

MYSQL row_number() および over() 関数の詳細な使用方法

構文フォーマット: row_number() over(partition by grouping ...

CSSは親要素の下の最初の子要素を選択します(:first-child)

序文最近、プロジェクトで :first-child を使用したのですが、すぐに思いつきました。これは...

Linux カーネルの copy_{to, from}_user() に関する考察

目次1. copy_{to,from}_user() とは何か1. copy_{to,from}_u...

MySQLでテーブル名を変更する方法と注意すべき点

目次1. テーブル名を変更する方法2. 注記要約: 1. テーブル名を変更する方法RENAME TA...

ReactのEffectListの簡単な分析

目次EffectList コレクション最初のレンダリング時のEffectList EffectLis...

Navicat が MySql サーバーにリモート接続できない問題の解決策

Navicat が MySql サーバーにリモート接続できない問題の解決策は、先頭に書かれています:...