效果展示

1.创建页面文件

首页：index.wxml

开始游戏：game.wxml

游戏规则：rules.wxml

关于我们：about.wxml

需修改aoo.json文件内的pages属性

{
  "pages":[
    "pages/index/index",
    "pages/game/game",
    "pages/about/about",
    "pages/rules/rules"
  ]
}

2.删除修改文件

将app.json文件内pages属性中的“pages/logs/logs”删除，并删除上一行末尾的逗号

删除utils文件夹及其内部所有内容。

删除pages文件夹下的logs目录及其内部所有内容

删除index.wxml和index.wxss中的全部代码

删除index.js中的代码并输入page找到第二个选项按回车键让其自动补全函数

删除app.wxss中的全部代码
删除app.js中的全部代码，并且输入关键词app找到App

自动补全代码

3.视图设计

3.1导航栏设计

JSON文件自定义导航栏标题

index.json

{
  "navigationBarTitleText":"猜数字游戏"
}

3.2公共样式设计

app.wxss设置小程序页面的公共样式

/**app.wxss**/
.container{
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
justify-content: space-around; /*内容调整*/
}

container的类用于各页面作为底层容器

3.3页面设计

3个按钮：

开始游戏按钮->跳转到“开始游戏”界面

游戏规则按钮->跳转到“游戏规则”界面

关于我们按钮->跳转到“关于我们”界面

<!--index.wxml-->
<view class="container">
<button type="primary">开始游戏</button>
<button type="primary">游戏规则</button>
<button type="primary">关于我们</button>
</view>

/**index.wxss**/
/* 按钮样式 */
button{
  width: 350rpx;
}

/**app.wxss**/
.container{
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
justify-content: space-around; /*内容调整*/
}

首页预览效果：

“关于我们”页面设计

<!--pages/about/about.wxml-->
<view class="container">
<text>xxx工作室荣誉出品</text>
</view>

“游戏规则”页面预览效果

<!--pages/rules/rules.wxml-->
<view class="container">
<text>
  1.系统会随机生成一个0~100的数字让玩家猜
  2.玩家共有8次机会
  3.在8次之内猜到则游戏成功
  4.点击“开始游戏”进入游戏界面
</text>
</view>

“开始游戏”页面设计

顶部欢迎语句<text>组件

表单<form>组件

提示语句<text>组件

<!--pages/game/game.wxml-->
<view class="container">
<text>欢迎来到猜数字小游戏</text>
<form>
  <input type='number' placeholder='请输入0~100的数字'></input>
  <button type="primary" form-type="reset">提交</button>
</form>
</view>

"form-type"="reset" 提交自动清空内容

游戏页逻辑实现：

1.游戏初始化

游戏初始化时需要规定以下内容：

正确答案answer：随机生成一个0~100之间的数字

回合数count:0

提示语句tip:空字符串"";

用户猜的数字x:-1;

游戏状态isGameStart:true.

在game.js中的pages自定义函数-游戏初始化

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

this.setData( { } )传递页面文件

Math.random()*100：自动生成一个0.0~100的随机数

Math.round()表示取整

然后在onLoad函数中进行调用，

JS文件（pages/game/game.js）代码片段：


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.initial();
  },

2.获取用户输入数字

bindinput：监听每次输入动作

bindblur:监听失去焦点

为输入框添加bindinput事件，修改后WXML（pages/game/game.wxml）页面代码：

<input bindinput='getNumber' type='number' placeholder='请输入0~100的数字'></input>

表示当点击按钮时文本框失去焦点并触发自定义的getNumber函数

在JS文件中（pages/game/games.js）添加getNumber函数

// 获取用户输入的名字
  getNumber:function(e){
    this.setData({ x:e.detail.value })
  },

3.游戏过程

为按钮添加bindtap事件

game.wxml修改代码

<button type="primary" form-type="reset" bindtap="guess">提交</button>

表示当点击按钮时触发自定义的guess函数：bindtap='guess'

<!--pages/game/game.wxml-->
<view class="container">
<text>欢迎来到猜数字小游戏</text>
<form>
  <input bindinput='getNumber' type='number' placeholder='请输入0~100的数字'></input>
  <button type="primary" form-type="reset" bindtap="guess">提交</button>
</form>
<text id='tip'></text>
</view>

JS(game.js)中添加guess函数

 // 本回合开始猜数字
  guess:function(){
    //获取用户本回合填写的数字
    let x=this.data.x;
    //重置data属性中的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
      });
    }
  },

4.游戏结束

当游戏结束时隐藏输入框和“提交”按钮，只显示“重新开始”按钮。

game.wxml 代码修改：

<!--pages/game/game.wxml-->
<view class="container">
<text>欢迎来到猜数字小游戏</text>
<form>
  <block wx:if='{{isGameStart}}'>
    <input bindblur='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>

使用wx:if属性配合<block> 代码块

game.js添加的restartGame函数


  // 游戏重新开始
  restartGame:function(){
    this.initial();
  },

4.首页逻辑实现

app.json页面的路径位置重新调整，使得index为第一个显示的页面，然后为3个按钮分别添加bindtap事件

<!--index.wxml-->
<view class='container'>
<button  bindtap="goToGame" type='primary'>开始游戏</button>
<button  bindtap="goToRules" type='primary'>游戏规则</button>
<button bindtap="goToAbout" type='primary'>关于我们</button>
</view>


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

完整代码：

主体文件代码：

app.json文件：

{
  "pages":[
    "pages/index/index",
    "pages/game/game",
    "pages/about/about",
    "pages/rules/rules"
  ]
}

app.wxss文件：

/**app.wxss**/
/* 背景容器样式 */
.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  justify-content: space-around; /*内容调整*/
}
 
/* 文本样式 */
text{
  margin: 0 50rpx;
  line-height: 30pt;
}

首页代码展示：

JSON文件(index.json)

{
  "navigationBarTitleText":"猜数字游戏"
}

WXSS index.wxss

/**index.wxss**/
button{
  width: 350rpx;
}

JS文件（index.js）

// index.js
// 获取应用实例
Page({
  /**
   * 页面的初始数据
   */
goToGame(){
  wx.navigateTo({
    url: '../game/game',
  })
},
goToAbout(){
  wx.navigateTo(
    {
      url:'../about/about'
    }
  )
},
goToRules(){
  wx.navigateTo({
    url: '../rules/rules',
  })
},

})

“游戏规则”页面代码展示

JSON文件(rules.json)

{
  "navigationBarTitleText":"游戏规则"
}

WXML文件（rules.wxml）

<!--pages/rules/rules.wxml-->
<view class="container">
<text>
  1.系统会随机生成一个0~100的数字让玩家猜
  2.玩家共有8次机会
  3.在8次之内猜到则游戏成功
  4.点击“开始游戏”进入游戏界面
</text>
</view>

“关于我们”页面代码展示

about.json

{
  "navigationBarTitleText":"关于我们"
}

about.wxml

<!--pages/about/about.wxml-->
<view class="container">
<text>xxx工作室荣誉出品</text>
</view>

开始游戏代码展示

game.json

{
  "navigationBarTitleText":"开始游戏"
}

game.wxml

<!--pages/game/game.wxml-->
<view class="container">
<text>欢迎来到猜数字小游戏</text>
<form>
  <block wx:if='{{isGameStart}}'>
    <input bindblur='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>

game.wxss

/* pages/game/game.wxss */
/* 文本框 */
input{
  border: 1rpx solid green;
  margin: 30rpx 0; /*上下边距30rpx*/
  height: 90rpx;
  border-radius: 20rpx; /*圆角边框*/
}

/*提示框*/
#tip{
  height: 800rpx; /*固定高度*/
}

game.js

// pages/game/game.js
Page({
  // 数据初始化
  initial:function(){
    this.setData(
      {
       answer:Math.round(Math.random()*100), //随机数
       count:0,
       tip:'',          //提示语句
       x:-1,            //用户猜的游戏
       isGameStart:true //游戏已经开始
      }
    )
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.initial();
  },

  // 获取用户输入的名字
  getNumber:function(e){
    this.setData(
      {
        x:e.detail.value
      }
    )
  },

  // 本回合开始猜数字
  guess:function(){
    //获取用户本回合填写的数字
    let x=this.data.x;
    //重置data属性中的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();
  },


})