Shulou(Shulou.com)06/02 Report--

This article mainly introduces "Android WeChat Mini Programs how to achieve number guessing Mini Game". In daily operation, I believe many people have doubts about how Android WeChat Mini Programs realizes figure guessing Mini Game. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "Android WeChat Mini Programs how to achieve figure guessing Mini Game". Next, please follow the editor to study!

Function introduction

The user enters a number between 1 and 100, prompts the user to guess according to the result, and can start over if the user guesses correctly (you can also set the number of guesses)

Effect picture

Click to start the game interface

Rules of the game interface

About other Interfac

My home page (effect picture) uses index03 to start the game, uses index rules of the game, uses index01, and others uses index02.

(the creation file is in app.json, which is the file created by my app.json)

(since my homepage rendering uses index03, I want to put it in front of it.)

one。 The code for the index03 on the home page

WXML code

/ / url is the page I want to jump to start the game rules about other

WXSS code

/ * pages/index03/index03.wxss * / .box2 {margin-top: 200rpx; width: 100%; height: 100rpx;} .box3 {margin-top: 240rpx; width: 100%; height: 100rpx;} two. Start game page (index) code

WXML code

Submit restart {{tip}}

WXSS code

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

Index.js code

/ / index.js Page ({data: {}, initial:function () {this.setData ({/ / Math.round rounding / / Math.random ()) is only a decimal between 0 and 1, so here we * 100take the random number answer:Math.round (Math.random () * 100), / / turn number count:0 / / prompt statement tip:'', / / the number guessed by the user XRAM1, / / the game has started isGameStart:true}) / / the console prints out the system random number answer console.log ("answer is" + this.data.answer);}, / / gets the number getNumber:function (e) {this.setData ({x: e.detail.value}) entered by the user;}, / / starts to guess the number guess:function () {/ / get the number let x = this.data.x that the user filled in this round / / reset x to not get a new number status this.setData ({XRAPL}); if (x100) {wx.showToast ({title:' cannot be less than 100cycles,});} else {/ / increase the number of rounds let count = this.data.count + 1; / / get the current prompt information let tip = this.data.tip / / get the correct answer let answer = this.data.answer; if (x = = answer) {tip + ='\ nth'+ count + 'round:' + x +', guess!'; / / Game over this.setData ({isGameStart:false});} else if (x > answer) {tip + ='\ nth'+ count + 'round:' + x +', big!' } else {tip + ='\ nth'+ count + 'round:' + x +', smaller!;} / / number of count rounds. Here I set the number of if (count = = 5) {tip + ='\ nGame over'; this.setData ({isGameStart:false}) } / / Update prompt statement and this.setData ({tip:tip, count:count});}}, / / restart the game restartGame:function () {this.initial ();}, / / options (Object) onLoad: function (options) {this.initial ();} three. Game rules page (index01) code

WXML code

1. The system randomly generates a number of 1-100 for players to guess 2. Players have a total of 5 chances. The player guessed 4. 5 times within 5 times. Click to start the game to enter the interface 5. Guess right or guess right players can start over

WXSS code

/ * 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: 050rpx; / / Line height line-height: 100rpx;} four. About other page (index02) codes

WXML code

1. Games are for entertainment only. There are many deficiencies in this game. Players can provide you with valuable advice 4. Players guess according to the hint, it will be of great help.

WXSS code

/ * pages/index02/index02.wxss * / .demo-box {display: flex; flex-direction: column; align-items: center; justify-content: space-around; / * width: 400rpx; * / height: 100vh;} text {margin: 050rpx; line-height: 100rpx;} this ends the study of "Android WeChat Mini Programs how to achieve number guessing Mini Game". Hope to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.