猜数字小游戏

学习目标：1.学习页面之间的转跳。

1. 理解猜数字小游戏的逻辑实现。

1.1页面之间的转跳

这里介绍bindtap事件，演示代码如下

Wxml文件

<view class="container">

  <button bindtap="click" type="primary">转跳按钮</button>

</view>

js文件

Page({

  ...

  click(){

    wx.navigateTo({

      url:'你想转跳的页面地址'

    })

  }

  ...

})

2.2猜数字小游戏的逻辑实现

（1）猜数字小游戏制作流程图如下图1所示

图1 猜数字小程序制作流程图

1. 源码展示

App.json的完整代码如下：

{

  "pages":[

    "pages/index/index",

    "pages/game/game",

    "pages/about/about",

    "pages/rules/rules"

  ]

}

App.wxss的完整代码如下：

/*背景容器样式*/

.container{

  display: flex; /*flex模型*/

  flex-direction: column; /*垂直布局*/

  align-items: center; /*水平方向居中*/

  height: 100vh; /*高度为100%视窗*/

  justify-content: space-around; /*内容调整*/

}

/*文本样式*/

text{

  margin: 0 50rpx; /*左右外边距50rpx*/

  line-height: 30pt; /*行高30pt*/

}

Pages/index/index.json的完整代码如下：

{

  "navigationBarTitleText": "猜数字小游戏"

}

Pages/index/index.wxml的完整代码如下：

<view class="container">

  <button bindtap="goToGame" type="primary">开始游戏</button>

  <button bindtap="goToRules" type="primary">游戏规则</button>

  <button bindtap="goToAbout" type="primary">关于我们</button>

</view>

Pages/index/index.wxss的完整代码如下：

/*按钮样式*/

button{

  width: 350rpx; /*宽度*/

}

Pages/index/index.js的完整代码如下：

Page({

  data: {

  },

goToGame(){

  wx.navigateTo({

    url: '../game/game',

  })

},

goToAbout(){

  wx.navigateTo({

    url: '../about/about',

  })

},

goToRules(){

  wx.navigateTo({

    url: '../rules/rules',

  })

}

})

Pages/rules/rules.json的完整代码如下：

{

  "navigationBarTitleText": "游戏规则"

}

Pages/rules/rules.wxml的完整代码如下：

<view class="container">

  <text>

    1.系统会随机生成一个0~100的数字让玩家猜。

    2.玩家共有8次机会。

    3.在8次内猜到则游戏成功。

    4.点击“开始游戏”进入游戏画面。

  </text>

</view>

Pages/abou/about.json的完整代码如下：

{

  "navigationBarTitleText": "关于我们"

}

 

Pages/about/about.wxml的完整代码如下：

<view class="container">

  <text>***出品</text>

</view>

Pages/game/game.json的完整代码如下：

{

  "navigationBarTitleText": "游戏开始"

}

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="primary" form-type="reset" bindtap="guess">提交</button>

    </block>

    <block wx:else="">

      <button type="primary" bindtap="restartGame">重新开始</button>

    </block>

  </form>

  <text id="tip">{{tip}}</text>

</view>

Pages/game/game.wxss的完整代码如下：

/*文本框*/

input{

  border: 1rpx solid silver; /*1rpx宽的银色实线边框*/

  margin: 30rpx 0; /*上下外边距30rpx*/

  height: 90rpx; /*高度*/

  border-radius: 20rpx; /*圆角边框*/

}

/*提示框*/

#tip{

  height: 800rpx; /*固定高度*/

}

Pages/game/game.js的完整代码如下：

Page({

/**数据初始化 */

  initial:function(){

    this.setData({

      answer:Math.round(Math.random()*100),//随机数

      count:0, //回合数

      tip:'', //提示语句

      x:-1, //用户猜的数字

      isGameStart:true //游戏已开始

    });

  },

  /**获取用户输入的数字 */

  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(option){

    this.initial();

  },

})

1. 效果展示

如图2和图3所示

图2 各页面展示图

图3 游戏运行展示图

参考资料：微信小程序开发实战：微课视频版/周文洁著