微信小程序——猜数字游戏小案例

ゝ一世哀愁。 2023-01-15 15:23 175阅读 0赞

### 文章目录 ###

*  项目展示
 *  项目链接
 *  项目设计

# 项目展示 #

![在这里插入图片描述][20210423090517933.gif_pic_center]

# 项目链接 #

[https://download.csdn.net/download/weixin\_45525272/17043459][https_download.csdn.net_download_weixin_45525272_17043459]

# 项目设计 #

关于于规则就不写了

wxml

<view class='container'>
      <text>欢迎来到猜数字小游戏</text>
    
      <form>
        <block wx:if='{ {isGameStart}}'>
          <input bindinput='getNumber' type='number' placeholder='请输入0-100之间的数字'></input>
          <button type='warn' form-type='reset' bindtap='guess'>提交</button>
        </block>
        <block wx:else>
          <button type='primary' bindtap='restartGame'>重新开始</button>
        </block>
      </form>
      <text id='tip'>{
       {tip}}</text>
    </view>

wxss

/* pages/game/game.wxss */
    /*文本框*/
    input{ 
      border: 1rpx solid green;/*1rpx宽的绿色实线边框*/
      margin: 30rpx 0;/*上下外边距30rpx*/
      height: 90rpx;/*高度*/
      border-radius: 20rpx; /*圆角边框*/
    }
    
    /*提示框*/
    #tip{ 
      height:800rpx;/*固定高度*/
    }

// pages/game/game.js
    Page({ 
    
      /** * 页面的初始数据 */
      data: { },
    
      /** * 数据初始化 */
      initial: function() { 
        this.setData({ 
          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 { 
          //回合数增加1
          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 + '，小了！';
          }
    
          if (count == 8) { 
            tip += ' \n游戏结束';
            this.setData({  isGameStart: false });//游戏结束
          }
    
          //更新提示语句和回合数
          this.setData({ 
            tip: tip,
            count: count
          });
        }
      },
      /** * 游戏重新开始 */
      restartGame: function() { 
        this.initial();
      },
      /** * 生命周期函数--监听页面加载 */
      onLoad: function(options) { 
        this.initial();
      },
    })

[20210423090517933.gif_pic_center]: /images/20221022/ab1a07559b754d7e9bdfea4f9e93ab0c.png
[https_download.csdn.net_download_weixin_45525272_17043459]: https://download.csdn.net/download/weixin_45525272/17043459