ふるい抽選を実施するミニプログラム

<!--pages/shaizi/index.wxml-->
<ビュークラス="コンテナ">
  <view class="shaizi_box {{activeTrue}}" style="transform: rotateX({{rotateX}}deg) rotateY({{rotateY}}deg) rotateZ({{rotateZ}}deg);">
    <view class="shaizi">1</view>
    <view class="shaizi">2</view>
    <view class="shaizi">3</view>
    <view class="shaizi">4</view>
    <view class="shaizi">5</view>
    <view class="shaizi">6</view>
  </ビュー>
  <text class="view"></text>
  <button bindtap="gamePlay">プレイ</button>
</ビュー>

// ページ/シャイジ/index.js
var dingshiqi1 = 0;
var dingshiqi2 = 0;
var dingshiqi3 = 0;
ページ（{
 
  /**
   * ページの初期データ */
  データ： {
    アクティブTrue:"アクティブ1",
    回転X:0,
    回転Y:0,
    回転Z:0,
  },
 
  /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
  onLoad: 関数 (オプション) {
    
  },
  ゲームプレイ:関数(){
    _that = this とします。
    this.setData({
      アクティブTrue:"アクティブ2",
      回転X:0,
      回転Y:0,
      回転Z:0,
    })
    クリア間隔(dingshiqi3)
    _possible = [ とします。
      { 値: 1、x: 0、y: 0 },
      { 値: 6、x: 180、y: 0 },
      { 値: 3、x: 0、y: -90 },
      { 値: 4、x: 0、y: 90 },
      { 値: 5、x: -90、y: 0 },
      { 値: 2、x: 90、y: 0 },
     ]
    // 乱数を抽出する準備をする let _random = Math.floor(Math.random() * 6);
    dingshiqi1 = setTimeout(() => {
      _that.setData({
        回転X:360,
        回転Y:250,
        回転Z:0,
      })
     }, 0);
     dingshiqi2 = setTimeout(() => {
      _that.setData({
        回転X:_可能[_ランダム].x、
        rotateY:_posible[_random].y、
      })
      dingshiqi3 = setTimeout(() => {
        _that.setData({
          アクティブTrue:"アクティブ1",
        })
      }, 4500);
     }, 800);
  },
  /**
   * ライフサイクル関数 - ページの初期レンダリングの完了を待機します*/
  onReady: 関数 () {
 
  },
 
  /**
   * ライフサイクル機能 - モニターページ表示 */
  onShow: 関数() {
 
  },
 
  /**
   * ライフサイクル機能 - ページの非表示を監視する*/
  onHide: 関数 () {
 
  },
 
  /**
   * ライフサイクル機能 - ページのアンインストールを監視する*/
  onUnload: 関数 () {
 
  },
 
  /**
   * ページ関連のイベント処理関数 - ユーザーのプルダウンアクションをリッスンする */
  onPullDownRefresh: 関数 () {
 
  },
 
  /**
   * ページ上のボトムイベントを処理する関数*/
  onReachBottom: 関数 () {
 
  },
 
  /**
   * ユーザーは右上隅をクリックして共有します*/
  onShareAppMessage: 関数 () {
 
  }
})
/* ページ/shaizi/index.wxss */
@keyframes 回転 {
  に {
   変換: 回転X(360度) 回転Y(250度);
  }
 }
 @keyframes shaiziCss{
  20%
   変換: rotateX(20deg);
  }
  60%
   変換: 回転X(20度) 回転Y(200度);
  }
  100%{
   変換: rotateX(100deg) rotateY(1000deg) rotateZ(-100deg);
  }
 }
 .shaizi_box {
  幅: 200rpx;
  高さ: 200rpx;
  マージン: 200rpx 自動;
  位置: 相対的;
  変換スタイル: 3D を保持します。
  アニメーション期間: 3秒;
  アニメーションタイミング関数: linear;
  遷移: すべて 1;
 }
.shaizi_box.active1{
  アニメーション: 5 秒回転、線形 0 秒、無限交互 !important;
}
.shaizi_box.active2{
  アニメーション: shaiziCss 2s !important;
}
.shaizi_box .shaizi {
  幅: 200rpx;
  高さ: 200rpx;
  ディスプレイ: フレックス;
  位置: 絶対;
  左: 0;
  上: 0;
  境界線: 1px実線 #000;
  背景: rgb(253, 250, 250);
  境界線の半径: 20rpx;
  フォントサイズ: 100rpx;
  色: 赤;
  テキスト配置: 中央;
 }
 .shaizi:n番目の子(1) {
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  変換: translateZ(100rpx);
 }
 .shaizi:n番目の子(2) {
  コンテンツの両端揃え: スペースを空ける;
  アイテムの位置を中央揃えにします。
  変換: 回転X(-90度) 移動Z(100rpx);
 }
 .shaizi:n番目の子(3) {
  コンテンツの両端揃え: スペースを空ける;
  アイテムの位置を中央揃えにします。
  flex-wrap: ラップ;
  変換: 回転Y(90度) 移動Z(100rpx);
 }
 .shaizi:n番目の子(4) {
  flex-wrap: ラップ;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  変換: 回転Y(-90度) 移動Z(100rpx);
 }
 .shaizi:n番目の子(5) {
  flex-wrap: ラップ;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  変換: rotateX(90deg) translateZ(100rpx);
 }
 .shaizi:n番目の子(6) {
  flex-wrap: ラップ;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  変換: rotateX(-180deg) translateZ(100rpx);
}