WeChatアプレットで数字当てゲームを実装する実際のプロセス

<!--pages/index03/index03.wxml-->
<ビュークラス="box2">
//url はジャンプ先のページです <navigator url="../index/index">
        <button type="primary">ゲームを開始</button>
    </ナビゲーター>
</ビュー>
<ビュークラス="box2">
    <ナビゲーター url="../index01/index01">
        <button type="warn">ゲームルール</button>
    </ナビゲーター>
</ビュー>
<ビュークラス="box3">
    <ナビゲーター url="../index02/index02">
        <button type="default">その他について</button>
    </ナビゲーター>
</ビュー>

/* ページ/index03/index03.wxss */
.box2{
  上マージン: 200rpx;
  幅: 100%;
  高さ: 100rpx;
}
.box3{
  上マージン: 240rpx;
  幅: 100%;
  高さ: 100rpx;
}

<!-- index.wxml -->
<view class="demo-box">
    <フォーム>
        <block wx:if="{{isGameStart}}">
            <input type="number" placeholder="1～100 の数字を入力してください" bindinput="getNumber"></input>
            <button type='primary' form-type="reset" bindtap='guess' class="btn">送信</button>
        </ブロック>
        <ブロック wx:else>
            <button type="primary" bindtap='restartGame'>再起動</button>
        </ブロック>
    </フォーム>
    <text id="tip">{{tip}}</text>
</ビュー>

/**index.wxss**/
入力{
  境界線: 2rpx 緑;
  マージン: 30rpx 0;
  高さ: 90rpx;
  /* 丸い境界線 */
  境界線の半径: 20rpx; 
}
＃ヒント{
  /* 高さを固定 */
  高さ: 800rpx;
}
.デモボックス{
  高さ: 400rpx;
}
ナビゲーター{
  テキスト配置: 中央;
}

// インデックス.js
 
ページ（{
  データ： {
  
  },
  初期:関数(){
    this.setData({
      // Math.round to integer //Math.random() は 0 から 1 の間の小数点以下の乱数を受け取ります。ここでは 100 を掛けて 0 から 100 の間の乱数を取得します。答え:Math.round(Math.random()*100)、
      // ラウンド数: 0,
      // ヒントステートメント tip:''、
      // ユーザーが推測した数値 x: -1,
      // ゲームが開始されました isGameStart:true
    });
    //コンソールはシステムの乱数の答えを出力します console.log("答えは "+this.data.answer);
  },
  // ユーザーが入力した番号を取得する getNumber:function(e){
    this.setData({
      x : e.詳細値
    });
  },
  // このラウンドで数字を推測し始めます guess:function(){
    // このラウンドでユーザーが入力した数字を取得します。let x = this.data.x;
    // x を新しい数値を取得しない状態にリセットします。this.setData({x:-1});
    x<0の場合{
      // プロンプト wx.showToast({
        タイトル: '0 未満にすることはできません'、
      });
    }そうでない場合(x>100){
      wx.showToast({
        タイトル:'100 を超えることはできません'、
      });
    }それ以外{
      // ラウンド数が増加します let count = this.data.count + 1;
      // 現在のヒント情報を取得します。let tip = this.data.tip;
      // 正しい答えを取得します。let answer = this.data.answer;
 
      if(x == 答え){
        tip += '\n' + count + 'round:' + x + '、正解です!';
        // ゲーム終了 this.setData({isGameStart:false});
      }そうでなければ(x > 答え){
        tip += '\n' + count + 'round:' + x + ', big!';
      }それ以外{
        tip += '\n' + count + 'round:' + x + '、小さすぎます!';
      }
        //ラウンド数をカウントします。ここでは、ユーザーが5回だけ推測するように設定しています。if (count == 5) {
        tip += '\nゲームオーバー';
        this.setData({isGameStart:false});
      }
      // プロンプト文と丸め数を更新します this.setData({
        ヒント:ヒント、
        カウント:カウント
      });
    }
  },
  // ゲームを再開する restartGame:function(){
    これを初期値として設定します。
  },
  //オプション(オブジェクト)
  onLoad: 関数(オプション) {
    これを初期値として設定します。
  }

<!--pages/index01/index01.wxml-->
<view class="demo-box">
<テキスト>
 1. システムは 1 ～ 100 の数字をランダムに生成し、プレイヤーはそれを推測します 2. プレイヤーには 5 回のチャンスがあります 3. プレイヤーは 5 回以内に推測に成功します 4. [ゲームの開始] をクリックしてインターフェイスに入ります 5. 推測が正しかったかどうかにかかわらず、プレイヤーは最初からやり直すことができます</text>
</ビュー>

/* ページ/index01/index01.wxss */
.デモボックス{
  ディスプレイ: フレックス;
   //垂直レイアウト flex-direction: column;
  アイテムの位置を中央揃えにします。
  コンテンツの両端揃え: スペースを空ける;
  /* 幅: 400rpx; */
  高さ：100vh;
}
文章{
  マージン: 0 50rpx;
   //行の高さ line-height: 100rpx;
}

<!--pages/index02/index02.wxml-->
<view class="demo-box">
<テキスト>
 1. このゲームは娯楽目的のみです。 2. このゲームには多くの欠点があります。 3. プレイヤーは貴重な提案を提供することができます。 4. プレイヤーはヒントに従って推測することができ、非常に役立ちます。
</ビュー>

/* ページ/index02/index02.wxss */
.デモボックス{
  ディスプレイ: フレックス;
  flex-direction: 列;
  アイテムの位置を中央揃えにします。
  コンテンツの両端揃え: スペースを空ける;
  /* 幅: 400rpx; */
  高さ：100vh;
}
文章{
  マージン: 0 50rpx;
  行の高さ: 100rpx;
}