微信小程式實現猜數字小遊戲的實戰過程

阿新 • • 發佈：2021-12-14

功能介紹

使用者輸入1-100之間的數字，根據結果提示使用者猜的大小，如果使用者猜對可以重新開始（還可以設定猜的次數）

效果圖

微信小程式實現猜數字小遊戲的實戰過程

點選開始遊戲介面

微信小程式實現猜數字小遊戲的實戰過程

遊戲規則介面

微信小程式實現猜數字小遊戲的實戰過程

關於其他介面

微信小程式實現猜數字小遊戲的實戰過程

我的首頁（效果圖）使用的是index03 開始遊戲使用的是index 遊戲規則使用的是index01 關於其他使用的是index02

(建立檔案在app.on裡面，這是我的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({
      www.cppcns.com// 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.ansbnlWeMGxrwer;
 
      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-bohttp://www.cppcns.comx">
<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;
}

(遊戲規則跟關於其他兩個頁面的程式碼是一樣的，這個僅供參考。還是有很多的不足之處)