Complete solution of small program Guessing Number Game 04 "wechat of programmer's realization Guide & QQ small program really zero foundation development treasure book"

Required for tutorial

Since applet development requires a certain foundation, which needs to be mastered in advance, this tutorial only gives a zero foundation description of applet development.

Wechat applet development tool, download link: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
JavaScript Basics
HTML Basics

Continuous directory updates:

HelloWord 01 "programmer's realization Guide - wechat & QQ applet real zero foundation development treasure book" Get avatar of applet try water 02 "wechat of programmer's realization Guide & QQ applet real zero foundation development treasure book" The applet imitates wechat discovery page 03 "wechat & QQ applet real zero foundation development Treasure Book of programmers' realization guide" Small program Guessing Number Game 04 "programmer's realization Guide: wechat & qq small program really zero foundation development treasure book"

1, Multi page access

First, the demo has multiple pages. These pages can view each other after entering the home page:

First of all, there are two buttons on the page. It looks like a view. There are two buttons in it, isn't it? index. The code of wxml is as follows:

<view>
  <button>Start the game</button>
  <button>Rules of the game</button>
</view>

Then we found that there are two folders in my directory, one is game and the other is ru. It's not urgent. Let's add appropriate events to the home page first. We need to click the button to jump to other pages. At this time, we need to add an event. The event is a js function, which we use in the front-end index Bindmap is used in wxml to bind different buttons corresponding to the events to be executed:

<view>
  <button bindtap="startGame">Start the game</button>
  <button bindtap="toRules">Rules of the game</button>
</view>

At this time, we are in index JS, write the corresponding function response:

  startGame(){

  },
  toRules(){

  },

How do we jump to the page? This is when you need to use Wx Navigateto ({}), the code is written as:

  startGame(){
    wx.navigateTo({
      url: '/pages/game/game',
    })
  },
  toRules(){
    wx.navigateTo({
      url: '/pages/ru/ru',
    })
  },

At this time, you only need to pass in url parameters in navigateTo. These url parameters represent the page that needs to jump, and ru/ru will jump to the corresponding wxml file by default.

Then let's create folders ru and game:

Then add the basic json content to the json files of the two directories created, otherwise an error will occur:

{
  "usingComponents": {}
}

Next, you need another point, which is in app JSON to configure the corresponding file directory:

"pages": [
    "pages/index/index",
    "pages/game/game",
    "pages/ru/ru",
    "pages/logs/logs"
  ]

No configuration means no registration. You can't find it without registration. You must pay attention to this. Next, we can click the corresponding button to jump to the corresponding interface.

2, Start game page random value generation

Now that we can enter the game start page, we can start setting a random value, which is the answer users need to answer.

In the game interface game Before the wxml file responds, it executes some game Some js functions in js correspond to a state of the current page, for example:

At this point, you can see that there are corresponding comments in the page to explain when each event is called. Next, we need to create a random number when onload loads. At this point, you can write a js function as follows:

inital(){
    this.setData({
      answei:Math.round(Math.random()*100),
      count:0,
      tip:'',
      x:0,
      isGame:true
    });
  },

The setData method of the current page is called in the code, this.setData() sets the value required for the current page. You need to put the corresponding value in curly braces and add it to SetData for setting:

{
      answei:Math.round(Math.random()*100),
      count:0,
      tip:'',
      x:0,
      isGame:true
    }

Where the value of answei is equal to math Round (Math.random() * 100), where math Random () will get a decimal greater than 1 and less than 0. If you want to take a number from 0 to 100, you need to multiply 100, and then math The function of round () is to round, and then you can get an integer from 0 to 100. In the init method, count is also set to accumulate the number of guesses. tip is the current prompt, x is the guess value, and isGame indicates whether the game is over.

3, Judge whether the guessed number is correct or not

Next, in the game interface game Enter the following code writing interface in wxml:

<view>
  <text>Figure guessing game</text>
  <form>
    <input type="number" placeholder="Please enter 1-100 The number you want to guess"></input>
    <button form-type="reset">determine</button>
  </form>
</view>

Input = "number" indicates that the current input receives digital input, placeholder indicates the prompt of the input box, and form type = "reset" of the button indicates that the content in the form will be reset after the button is pressed.

Then bind the event on the input box and button:

  <form>
    <input  bindblur="getNumber" type="number" placeholder="Please enter 1-100 The number you want to guess"></input>
    <button bindtap="guess" form-type="reset">determine</button>
  </form>

Bindblue means that after the current input loses focus, it will respond to an event, which is getNumber. After clicking the button, it will respond to the guess event.

Now go to game JS, first check getNumber:

getNumber(e){
    this.setData({
      x:e.detail.value
    });
    console.log(this.data.x)
  },

At this time, after the button in the response page loses focus, a value will be passed to the function, which is contained in the e parameter, using e.detail Value to get the value entered in the input. At this time, use setData to set the guess value x in the current value as the content value of the input box.

Next, check the guess function code:

guess(){
    let x=this.data.x;
    if(x<0){
      wx.showToast({
        title: 'Cannot be less than 0',
      })
    }else if(x>100){
      wx.showToast({
        title: 'Cannot be greater than 100',
      })
    }else{
      let count=this.data.count+1;
      let tip=this.data.tip;
      if(x==this.data.answei){
        tip+='\n The first'+count+' Round guess:'+x+' by the way!';
        this.setData({
          isGame:false
        });
      }else if(x>this.data.answei){
        tip+='\n The first'+count+' Round guess:'+x+' Big!';
      }else{
        tip+='\n The first'+count+' Round guess:'+x+' Small!';
      }
      
      this.setData({
        tip:tip,
        count:count
      })
    }
  },

First let x = this data. x; Define a local variable x and assign it to the guessed value x to facilitate subsequent calculation. Next, judge whether the guess is greater than 100 or less than 0. Because these two are outside the range, no judgment is made, so at the beginning, use if to judge:

 if(x<0){
      wx.showToast({
        title: 'Cannot be less than 0',
      })
    }else if(x>100){
      wx.showToast({
        title: 'Cannot be greater than 100',
      })
    }

Wx in the above code Showtoast means to call wechat applet interface to pop up a prompt, and the passed in parameter title is the prompt content.

In the esle section of the complete code above, it is the response when reasonable input is made. In the else section:

 let count=this.data.count+1;
 let tip=this.data.tip;

Create two variables, one is count to record the number of guesses, and the other is tip to prompt whether the current is right or wrong.

if(x==this.data.answei){
        tip+='\n The first'+count+' Round guess:'+x+' by the way!';
        this.setData({
          isGame:false
        });
      }

Then judge whether x is equal to the initial setting of answei (I found that it is wrong, don't care, just use it). If it is equal to x, directly set the value of tip as the first answer. Guess right. Where count is the variable indicating the number of times, and X is the value of the current guess. Finally, set an isGame variable to false, indicating that the game is over.

The following esle, if and else indicate whether to guess big or small:

else if(x>this.data.answei){
  tip+='\n The first'+count+' Round guess:'+x+' Big!';
}else{
  tip+='\n The first'+count+' Round guess:'+x+' Small!';
}

else if indicates whether the value of x is guessed to be large, and tip is used to add the current record; Another else means guessing small. Similarly, record tip.

At this time, there is a tip record. Feed back the tip record to the game interface In wxml, you only need to add a text at the front end, which outputs the corresponding tip value:

Finally, we should also use isGame. When you guess correctly, a restart button should be displayed. At this time, add a view in the front page to display the restart button:

In view, wx:if="{{isGame==false}}" means to use if to judge whether isGame is equal to false. If it is equal to false, it means that the current game is over. At this time, if the conditions are met, this part of the content will be displayed, that is, the restart button will be displayed. In "{{isGame==false}}", the value of isGame will be automatically parsed and compared with flash.

The click event regame event that is bound at the beginning of the restart requires only the init function to be re invoked in the event.

 regame(){
    this.inital();
  },

At this time, even if you guessed right, the page will still display the following contents:

This logic is unreasonable. Add a wx:if to the form to judge whether the value of isGame is equal to true. If it is equal to true, it will be displayed. If not, it will not be displayed:

Perfect solution:

There is only one rule page left. It's too simple for everyone to do it by themselves.

4, Finally, the key is the complete code

game.wxml

<view>
  <text>Figure guessing game</text>
  <form wx:if="{{isGame==true}}">
    <input  bindblur="getNumber" type="number" placeholder="Please enter 1-100 The number you want to guess"></input>
    <button bindtap="guess" form-type="reset">determine</button>
  </form>
  <view wx:if="{{isGame==false}}">
    <button bindtap="regame">restart</button>
  </view>
  <text>
    {{tip}}
  </text>
</view>

game.js

Page({

  /**
   * Initial data of the page
   */
  data: {
    
  },
  inital(){
    this.setData({
      answei:Math.round(Math.random()*100),
      count:0,
      tip:'',
      x:0,
      isGame:true
    });
  },
  getNumber(e){
    this.setData({
      x:e.detail.value
    });
    console.log(this.data.x)
  },
  guess(){
    let x=this.data.x;
    if(x<0){
      wx.showToast({
        title: 'Cannot be less than 0',
      })
    }else if(x>100){
      wx.showToast({
        title: 'Cannot be greater than 100',
      })
    }else{
      let count=this.data.count+1;
      let tip=this.data.tip;
      if(x==this.data.answei){
        tip+='\n The first'+count+' Round guess:'+x+' by the way!';
        this.setData({
          isGame:false
        });
      }else if(x>this.data.answei){
        tip+='\n The first'+count+' Round guess:'+x+' Big!';
      }else{
        tip+='\n The first'+count+' Round guess:'+x+' Small!';
      }
      
      this.setData({
        tip:tip,
        count:count
      })
    }
  },
  /**
   * Life cycle function -- listening for page loading
   */
  onLoad: function (options) {
    this.inital();
    console.log(this.data.answei)
  },

  regame(){
    this.inital();
  },
  /**
   * Life cycle function -- monitor the completion of the first rendering of the page
   */
  onReady: function () {
    
  },

  /**
   * Life cycle function -- monitor page display
   */
  onShow: function () {
    
  },

  /**
   * Life cycle function -- listening for page hiding
   */
  onHide: function () {
    
  },

  /**
   * Life cycle function -- listen for page unloading
   */
  onUnload: function () {
    
  },

  /**
   * Page related event handler -- listen to user drop-down actions
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * Handler for bottom pull event on page
   */
  onReachBottom: function () {
    
  },

  /**
   * Users click the upper right corner to share
   */
  onShareAppMessage: function () {
    
  }
})

index.wxml

<view>
  <button bindtap="startGame">Start the game</button>
  <button bindtap="toRules">Rules of the game</button>
</view>

index.js

 startGame(){
    wx.navigateTo({
      url: '/pages/game/game',
    })
  },
  toRules(){
    wx.navigateTo({
      url: '/pages/ru/ru',
    })
  },

Added by sheilam on Thu, 06 Jan 2022 04:19:11 +0200

Programming VIP