微信小程序?qū)崿F(xiàn)猜數(shù)字小游戲的過程
用戶輸入1-100之間的數(shù)字微信小程序輸入中文獲取數(shù)字微信小程序輸入中文獲取數(shù)字，根據(jù)結(jié)果提示用戶猜的大小，如果用戶猜對(duì)可以重新開始（還可以設(shè)置猜的次數(shù)）。
效果圖
點(diǎn)擊開始游戲界面
游戲規(guī)則界面
關(guān)于其他界面
我的首頁（效果圖）使用的是 開始游戲使用的是index 游戲規(guī)則使用的是 關(guān)于其他使用的是
(創(chuàng)建文件在app.json里面，這是我的app.json創(chuàng)建的文件）
(由于我的首頁效果圖使用的是，所以要放在前面)
一.首頁效果圖（）的代碼
WXML代碼
//url是我要跳轉(zhuǎn)的頁面
WXSS代碼
/* pages/index03/index03.wxss */
.box2{
margin-top: 200rpx;
width: 100%;
height: 100rpx;
}
.box3{
margin-top: 240rpx;
width: 100%;
height: 100rpx;
}
二.開始游戲頁面（index）代碼
WXML代碼
{{tip}}
WXSS代碼
/**index.wxss**/
input{
border: 2rpx solid green;
margin: 30rpx 0;
height: 90rpx;
/* 圓角邊框 */
border-radius: 20rpx;
}
#tip{
/* 固定高度 */
height: 800rpx;
}
.demo-box{
height: 400rpx;
}
navigator{
text-align: center;
}
index.js代碼
// index.js
Page({
data: {
},
initial:function(){
this.setData({
// Math.round取整
//Math.random()取隨機(jī)數(shù)只是0-1之間的小數(shù) 所以在此我們*100取0-100之間隨機(jī)數(shù)
answer:Math.round(Math.random()*100),
// 回合數(shù)
count:0,
// 提示語句
tip:'',
// 用戶猜的數(shù)字
x:-1,
// 游戲已經(jīng)開始
isGameStart:true
});
//控制臺(tái)打印出來系統(tǒng)隨機(jī)數(shù)答案
console.log("答案是"+this.data.answer);
},
// 獲取用戶輸入的數(shù)字
getNumber:function(e){
this.setData({
x : e.detail.value
});
},
// 本回合開始猜數(shù)字
guess:function(){
// 獲取用戶本回合填寫的數(shù)字
let x = this.data.x;
// 重置x為未獲得新數(shù)字狀態(tài)
this.setData({x:-1});
if(x<0){
// 提示語
wx.showToast({
title: '不能小于0',
});
}else if(x>100){
wx.showToast({
title:'不能大于100',
});
}else{
// 回合數(shù)增加
let count = this.data.count + 1;
// 獲取當(dāng)前提示信息
let tip = this.data.tip;
// 獲取正確答案
let answer = this.data.answer;
if(x == answer){
tip += '\n第' + count +'回合:' + x +',猜對(duì)了!';
// 游戲結(jié)束
this.setData({isGameStart:false});
}else if(x > answer){
tip += '\n第' + count +'回合:' + x +',大了!';
}else{
tip += '\n第' + count +'回合:' + x +',小了!';
}
//count回合數(shù)，這里我設(shè)置的是用戶只能猜5次
if(count == 5){
tip += '\n游戲結(jié)束';
this.setData({isGameStart:false});
}
// 更新提示語句和回合數(shù)
this.setData({
tip:tip,
count:count
});
}
},
// 游戲重新開始
restartGame:function(){
this.initial();
},
//options(Object)
onLoad: function(options) {
this.initial();
}
三.游戲規(guī)則頁面（）代碼
WXML代碼
1.系統(tǒng)隨機(jī)生成1-100的數(shù)字讓玩家猜 2.玩家共有5次機(jī)會(huì) 3.在5次之內(nèi)玩家猜成功 4.點(diǎn)擊開始游戲進(jìn)入界面 5.猜對(duì)或猜對(duì)玩家可重新開始
WXSS代碼
/* pages/index01/index01.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;
}
四.關(guān)于其他頁面（）代碼
WXML代碼
1.游戲僅供娛樂 2.此游戲有很多不足 3.玩家可以提供您寶貴意見 4.玩家根據(jù)提示猜，會(huì)有很大幫助
WXSS代碼
/* 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;
}
(游戲規(guī)則跟關(guān)于其他兩個(gè)頁面的代碼是一樣的，這個(gè)僅供參考。還是有很多的不足之處)
總結(jié)
關(guān)于微信小程序?qū)崿F(xiàn)猜數(shù)字小游戲的文章就介紹至此，更多相關(guān)微信小程序猜數(shù)字小游戲內(nèi)容請(qǐng)搜索編程寶庫以前的文章，希望以后支持編程寶庫！
下一節(jié)：詳解 類JS 編程技術(shù)
1.概述類這個(gè)概念基本是所有面向?qū)ο缶幊陶Z言都具有一個(gè)概念，例如Java、等；在中ES6 之前是沒有類這個(gè)概念的，對(duì)于熟悉面向?qū)ο髞沓绦蛟硜碚f有些棘手，因?yàn)樗麄冇玫?...