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

 

 

项目展示

项目链接

 

项目设计

关于于规则就不写了

wxml

<!--pages/game/game.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;/*固定高度*/
}

js

// 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();
  },
})