The actual process of implementing the guessing number game in WeChat applet

<!--pages/index03/index03.wxml-->
<view class="box2">
//url is the page I want to jump to <navigator url="../index/index">
        <button type="primary">Start the game</button>
    </navigator>
</view>
<view class="box2">
    <navigator url="../index01/index01">
        <button type="warn">Game Rules</button>
    </navigator>
</view>
<view class="box3">
    <navigator url="../index02/index02">
        <button type="default">About Others</button>
    </navigator>
</view>

/* pages/index03/index03.wxss */
.box2{
  margin-top: 200rpx;
  width: 100%;
  height: 100rpx;
}
.box3{
  margin-top: 240rpx;
  width: 100%;
  height: 100rpx;
}

<!-- index.wxml -->
<view class="demo-box">
    <form>
        <block wx:if="{{isGameStart}}">
            <input type="number" placeholder="Please enter a number between 1-100" bindinput="getNumber"></input>
            <button type='primary' form-type="reset" bindtap='guess' class="btn">Submit</button>
        </block>
        <block wx:else>
            <button type="primary" bindtap='restartGame'>Restart</button>
        </block>
    </form>
    <text id="tip">{{tip}}</text>
</view>

/**index.wxss**/
input{
  border: 2rpx solid green;
  margin: 30rpx 0;
  height: 90rpx;
  /* Rounded border */
  border-radius: 20rpx; 
}
#tip{
  /* Fixed height */
  height: 800rpx;
}
.demo-box{
  height: 400rpx;
}
navigator{
  text-align: center;
}

// index.js
 
Page({
  data: {
  
  },
  initial:function(){
    this.setData({
      // Math.round to integer //Math.random() takes a random number that is just a decimal between 0 and 1, so here we * 100 to get a random number between 0 and 100 answer:Math.round(Math.random()*100),
      // Round count: 0,
      // Tip statement tip:'',
      // User guessed number x: -1,
      // The game has started isGameStart:true
    });
    //The console prints out the system random number answer console.log("The answer is "+this.data.answer);
  },
  // Get the number entered by the user getNumber:function(e){
    this.setData({
      x : e.detail.value
    });
  },
  // Start guessing numbers in this round guess:function(){
    // Get the number filled in by the user this round let x = this.data.x;
    // Reset x to the state of not getting a new number this.setData({x:-1});
    if(x<0){
      // prompt wx.showToast({
        title: 'Cannot be less than 0',
      });
    }else if(x>100){
      wx.showToast({
        title:'cannot be greater than 100',
      });
    }else{
      // The number of rounds increases let count = this.data.count + 1;
      // Get the current tip information let tip = this.data.tip;
      // Get the correct answer let answer = this.data.answer;
 
      if(x == answer){
        tip += '\n' + count + 'round:' + x + ', guessed right!';
        // Game ends this.setData({isGameStart:false});
      }else if(x > answer){
        tip += '\n' + count + 'round:' + x + ', big!';
      }else{
        tip += '\n' + count + 'round:' + x + ', too small!';
      }
        //Count the number of rounds. Here I set the user to only guess 5 times if (count == 5) {
        tip += '\nGame over';
        this.setData({isGameStart:false});
      }
      // Update the prompt statement and round number this.setData({
        tip:tip,
        count:count
      });
    }
  },
  // Restart the game restartGame:function(){
    this.initial();
  },
  //options(Object)
  onLoad: function(options) {
    this.initial();
  }

<!--pages/index01/index01.wxml-->
<view class="demo-box">
<text>
 1. The system randomly generates numbers from 1-100 for players to guess 2. Players have 5 chances 3. Players guess successfully within 5 times 4. Click Start Game to enter the interface 5. Players can start over if they guess correctly or not</text>
</view>

/* pages/index01/index01.wxss */
.demo-box{
  display: flex;
   //Vertical layout flex-direction: column;
  align-items: center;
  justify-content: space-around;
  /* width: 400rpx; */
  height: 100vh;
}
text{
  margin: 0 50rpx;
   //Line height line-height: 100rpx;
}

<!--pages/index02/index02.wxml-->
<view class="demo-box">
<text>
 1. The game is for entertainment only. 2. This game has many shortcomings. 3. Players can provide you with valuable suggestions. 4. Players can guess according to the hints, which will be of great help.
</view>

/* pages/index02/index02.wxss */
.demo-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  /* width: 400rpx; */
  height: 100vh;
}
text{
  margin: 0 50rpx;
  line-height: 100rpx;
}