微信小程序實現猜數字小遊戲的實戰過程
功能介紹
用戶輸入1-100之間的數字,根據結果提示用戶猜的大小,如果用戶猜對可以重新開始(還可以設置猜的次數)
效果圖
點擊開始遊戲界面
遊戲規則界面
關於其他界面
我的首頁(效果圖)使用的是index03 開始遊戲使用的是index 遊戲規則使用的是index01 關於其他使用的是index02
(創建文件在app.json裡面,這是我的app.json創建的文件)
(由於我的首頁效果圖使用的是index03,所以要放在前面)
一.首頁效果圖(index03)的代碼
WXML代碼
<!--pages/index03/index03.wxml--> <view class="box2"> //url是我要跳轉的頁面 <navigator url="../index/index"> <button type="primary">開始遊戲</button> </navigator> </view> <view class="box2"> <navigator url="../index01/index01"> <button type="warn">遊戲規則</button> </navigator> </view> <view class="box3"> <navigator url="../index02/index02"> <button type="default">關於其他</button> </navigator> </view>
WXSS代碼
/* pages/index03/index03.wxss */ .box2{ margin-top: 200rpx; width: 100%; height: 100rpx; } .box3{ margin-top: 240rpx; width: 100%; height: 100rpx; }
二.開始遊戲頁面(index)代碼
WXML代碼
<!-- index.wxml --> <view class="demo-box"> <form> <block wx:if="{{isGameStart}}"> <input type="number" placeholder="請輸入1-100之間數字" bindinput="getNumber"></input> <button type='primary' form-type="reset" bindtap='guess' class="btn">提交</button> </block> <block wx:else> <button type="primary" bindtap='restartGame'>重新開始</button> </block> </form> <text id="tip">{{tip}}</text> </view>
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(); }
三.遊戲規則頁面(index01)代碼
WXML代碼
<!--pages/index01/index01.wxml--> <view class="demo-box"> <text> 1.系統隨機生成1-100的數字讓玩傢猜 2.玩傢共有5次機會 3.在5次之內玩傢猜成功 4.點擊開始遊戲進入界面 5.猜對或猜對玩傢可重新開始 </text> </view>
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; }
四.關於其他頁面(index02)代碼
WXML代碼
<!--pages/index02/index02.wxml--> <view class="demo-box"> <text> 1.遊戲僅供娛樂 2.此遊戲有很多不足 3.玩傢可以提供您寶貴意見 4.玩傢根據提示猜,會有很大幫助 </text> </view>
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; }
(遊戲規則跟關於其他兩個頁面的代碼是一樣的,這個僅供參考。還是有很多的不足之處)
總結
到此這篇關於微信小程序實現猜數字小遊戲的文章就介紹到這瞭,更多相關微信小程序猜數字小遊戲內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!