更新時間：2021年12月12日 14:43:03 作者：底層的渣渣
一起猜數字是微信一款休閑類小游戲,下面這篇文章主要給大家介紹了關于微信小程序實現猜數字小游戲的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
目錄
功能介紹
用戶輸入1-100之間的數字微信小程序輸入中文獲取數字微信小程序輸入中文獲取數字，根據結果提示用戶猜的大小，如果用戶猜對可以重新開始（還可以設置猜的次數）
效果圖
點擊開始游戲界面
游戲規則界面
關于其他界面
我的首頁（效果圖）使用的是 開始游戲使用的是index 游戲規則使用的是 關于其他使用的是
(創建文件在app.json里面，這是我的app.json創建的文件）
(由于我的首頁效果圖使用的是，所以要放在前面)
一.首頁效果圖（）的代碼
WXML代碼
//url是我要跳轉的頁面
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()取隨機數只是0-1之間的小數 所以在此我們*100取0-100之間隨機數
answer:Math.round(Math.random()*100),
// 回合數
count:0,
// 提示語句
tip:'',
// 用戶猜的數字
x:-1,
// 游戲已經開始
isGameStart:true
});
//控制臺打印出來系統隨機數答案
console.log("答案是"+this.data.answer);
},
// 獲取用戶輸入的數字
getNumber:function(e){
this.setData({
x : e.detail.value
});
},
// 本回合開始猜數字
guess:function(){
// 獲取用戶本回合填寫的數字
let x = this.data.x;
// 重置x為未獲得新數字狀態
this.setData({x:-1});
if(x<0){
// 提示語
wx.showToast({
title: '不能小于0',
});
}else if(x>100){
wx.showToast({
title:'不能大于100',
});
}else{
// 回合數增加
let count = this.data.count + 1;
// 獲取當前提示信息
let tip = this.data.tip;
// 獲取正確答案
let answer = this.data.answer;
if(x == answer){
tip += '\n第' + count +'回合:' + x +',猜對了!';
// 游戲結束
this.setData({isGameStart:false});
}else if(x > answer){
tip += '\n第' + count +'回合:' + x +',大了!';
}else{
tip += '\n第' + count +'回合:' + x +',小了!';
}
//count回合數，這里我設置的是用戶只能猜5次
if(count == 5){
tip += '\n游戲結束';
this.setData({isGameStart:false});
}
// 更新提示語句和回合數
this.setData({
tip:tip,
count:count
});
}
},
// 游戲重新開始
restartGame:function(){
this.initial();
},
//options(Object)
onLoad: function(options) {
this.initial();
}
三.游戲規則頁面（）代碼
WXML代碼
1.系統隨機生成1-100的數字讓玩家猜 2.玩家共有5次機會 3.在5次之內玩家猜成功 4.點擊開始游戲進入界面 5.猜對或猜對玩家可重新開始
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;
}
四.關于其他頁面（）代碼
WXML代碼
1.游戲僅供娛樂 2.此游戲有很多不足 3.玩家可以提供您寶貴意見 4.玩家根據提示猜，會有很大幫助
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;
}
(游戲規則跟關于其他兩個頁面的代碼是一樣的，這個僅供參考。還是有很多的不足之處)
總結
到此這篇關于微信小程序實現猜數字小游戲的文章就介紹到這了,更多相關微信小程序猜數字小游戲內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持腳本之家！