微信小程序----猜数字游戏.

目标：简单猜字游戏，系统随机生成一个数，玩家可以猜8次，8次未猜对，游戏结束；未到8次猜对，游戏结束。

思路和要求：

  创建四个页面，“首页”，“开始游戏”，“游戏规则”，“关于我们”。

（1）“首页”：可以点击“开始游戏”、“游戏规则”、“关于我们”，分别跳转到相应页面；

（2）“开始游戏”：初始化以后，随机生成一个数字，玩家可以猜8次，在8次之内猜对，游戏结束，可重新开始；未在8次之内猜对，游戏结束；

（3）“游戏规则”：用文字说明游戏的要求；

（4）“关于我们”：关于游戏开发人员等内容。

注意：创建不使用云服务的js模板的项目。

效果图：

第一步  app.json里面创建了四个页面。

index —— “首页”

game —— “开始游戏”

about —— “关于我们”

rules —— “游戏规则”

接着对页面进行设计，再进行功能设计。

第二步 对每个界面进行设计以及界面的逻辑

        （1）分别自定义每个页面的导航栏的标题

分析：不是全局变量，是局部变量，即分别在页面的json文件自定义导航栏标题。

        （2）设置全局样式，为微信小程序页面设置全局样式。

设置全局样式，为微信小程序页面设置全局样式。

（3）“首页”界面设计

效果图：

        （4）"游戏规则"页面设计

需要组件：text组件。

效果图如下：

        （5）“关于我们”页面进行设计

要求：text组件，主要是为了描述开发者等信息。

效果图：

        （6）“开始游戏”页面设计

划分为：三个板块，分别是：部欢迎语句、表单----输入框and提交按钮、提示语句；

        关键点：样式+内容

        样式如下：

        效果如下：

        页面逻辑：在js文件里面对游戏初始化：

        进入游戏界面，需要随机生成一个数，这个数是正确答案（answer），用户输入框可以输入数字(x)，有8次机会，每提交一次（Count）需要有提示语句(tip)，判断游戏状态（isGameStart），当正确答案与输入的数值相同时，结束游戏。

页面加载后调用初始化函数：

页面逻辑：

当游戏结束后，不能再输入数字，跳转到一个页面可以重新开始游戏，游戏又回到初始化。

解决办法：

使用block组件，可以使代码为一个整体，通过判断游戏是否结束（使用if else），来显示不同的内容。

效果图：

js代码：

// pages/game/game.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
   /**
   * 数据初始化
   */
  initial:function () {
    this.setData({
      answer: Math.round(Math.random() * 100),    //随机数
      count: 0,     // 回合数
      tip : '',     //提示语句
      x : -1,       //用户猜的数
      isGageState : true  //游戏状态
    }
    )  
  },

  /*获取用户输入的数字*/
  getNumber(e){
    //console.log(e.detail.value)
    this.setData({x :e.detail.value})
  },

  /*开始猜数字*/
  guess(){
    //获取用户输入的数字
    let x = this.data.x;
    //console.log(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 = tip + '\n第' + count + '回合' + x +'，猜对了！';
        this.setData({isGageState : false});    //游戏结束
      }else if(x > answer){
        tip = tip + '\n第' + count + '回合' + x +'，大了';
      }else{
        tip = tip + '\n第' + count + '回合' + x +'，小了！';
      }
      //如果次数为8，游戏结束
      if(count == 8){
        tip = tip + '\n 游戏结束';
        this.setData({isGageState : false});    //游戏结束
      }
      //每次都需要更新原来的值，提示语句和回合数
      this.setData({
        tip : tip,
        count : count
      });
    }
  },
  /* 重新开始
   */
  restartGame(){
    this.initial();
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.initial();

  }
})

总结知识点：

1、<view class = "样式"></view>
2、<button type = "类型" form-type = "reset是将所有输入内容置为初始状态" bindtap = “点击按钮的事件”>内容<button>
3、设置全局样式，如果全局样式需要在这个页面显示

即：使用view组件：<view class = "container"> <view>
4、<text id = "内容，写样式时，需加#">内容<text>
5、<text id = "内容，写样式时，需加#">{{内容未变量时，要将变量放在两个大括号}}<text>
6、<form>表单里面有按钮，点击后提交内容</form>
7、<input bindinput = "输入框事件，一般未获取输入框里面的内容" type = "类型" placeholder = "输入框未输入显示的内容"></input>
js文件里面的知识点总结：
1、在js文件里面调用函数，格式：this.函数名称（）；
2.js文件初始化，可以写一个初始化函数，使用 this.setData({初始化1,初始化2})；setData函数为其赋值。
3、改变变量的值：this.setData({变量名称: 值})
4、想要获取输入框里面的内容，不知道输入框内容是哪一个变量时，可以使用console.log(e)把事件打印出来，通过输入写代码。
5、获取变量：this.data.变量名称
6、使用轻度提示：
        wx.showToast({
                title: '需要提示的·内容,
              });

第三步 四个界面之间的关系

index.wxml代码：

分别点击“开始游戏”、“游戏规则”、“关于我们”字样跳转到对应页面。

index.js代码如下：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },
 goToGame(){
   wx.navigateTo(
     {
       url:'/pages/game/game'
     }
   )
 },

 goToRules(){
  wx.navigateTo(
    {
      url:'/pages/rules/rules'
    }
  )
},
goToAbout(){
  wx.navigateTo(
    {
      url:'/pages/about/about'
    }
  )
}
})

以上为全部内容，如有不正确的地方，敬请批评指正。