黄金点小游戏（微信小程序）

黄金点游戏是一个数字小游戏，其游戏规则是：
N个同学（N通常大于10），每人写一个0~100之间的有理数 (不包括0或100)，交给裁判，裁判算出所有数字的平均值，然后乘以0.618（所谓黄金分割常数），得到G值。提交的数字最靠近G（取绝对值）的同学得到N分，离G最远的同学得到－2分，其他同学得0分。玩了几天以后，大家发现了一些很有意思的现象，比如黄金点在逐渐地往下移动。

这次给大家带来的是微信小程序实现的黄金点小游戏，微信小程序共分为5个页面，选择人数和轮数的页面，显示游戏规则的页面，输入数字的页面，显示每轮结果的页面以及最后成绩显示的页面。

选择人数和轮数的页面：

显示游戏规则的页面：

输入数字的页面：

显示每轮结果的页面：

最后成绩显示的页面：

1.选择人数以及轮数wxml代码如下：

<!--页面根标签-->
<view class="content">
	<!--pics文件夹下的background.jpg文件-->
	<image class='background' src="../../pics/background.jpg" mode="aspectFill"></image>
	<!--页面其它部分-->
</view>
<view class="login_box">
  <view class="section">
    <input placeholder="请输入参加游戏人数" value='{{players}}' placeholder-class="color" bindblur='players' />
    <image src="../../pics/游戏机.png"></image>
  </view>
  <view class="section">
    <input placeholder="请输入游戏轮数" value='{{rounds}}' placeholder-class="color" bindblur='rounds' />
    <image src="../../pics/笑脸.png"></image>
  </view>
  <checkbox-group bindchange="checkboxChange">
    <label class="checkbox" wx:for="{{items}}" wx:key='this'>
      <checkbox value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}
    </label>
  </checkbox-group>
  <button class="login" type="primary" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">开始游戏</button>
  <button class="register" type="warn" bindtap="rule">查看游戏规则</button>
</view>

2.wxss的代码如下：

page{
  height:100%;
}
.background {
  width: 100%;
  height: 100%;
  position:fixed; 
  background-size:100% 100%;
  z-index: -1;
}
.login_box{
  width: 90%;
  position: absolute;
  top: 15%;
  left: 5%;
}
.section{
  width: 100%;
  border-bottom: 4rpx solid #FFF;
  margin-top: 40rpx;
  position: relative;
}
.section input{
  height: 100rpx;
  color: #FFF;
  box-sizing: border-box;
  padding-left: 80rpx;
  font-size: 36rpx;
}
.section image{
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  top: 20rpx;
  left: 10rpx;
}
.color{
  color: #FFF;
}
checkbox-group{
  display: flex;
  justify-content:flex-end;
  margin-top: 30rpx;
  color: #FFF;
  box-sizing: border-box;
  padding-right: 20rpx;
}
.login{
  margin-top: 160rpx;
}
.register{
  margin-top: 50rpx;
}

3.js代码如下：

Page({
  data: {
    
    players: '',//参加游戏人数
    rounds: '',//游戏轮数
    round_m:1
  },
  // 授权登录,这里我是先让用户授权才登录的，不需要的也可以直接放个登录按钮，不授权登录
  bindGetUserInfo: function(e) {
    if (e.detail.userInfo) {
      //用户按了允许授权按钮
      
      if (this.data.players == '') {
        wx.showToast({
          title: '参加游戏人数不能为空',
          icon: 'none',
          duration: 2000
        })
      } else if (this.data.rounds == '') {
        wx.showToast({
          title: '游戏轮数不能为空',
          icon: 'none',
          duration: 2000
        })
      }else{
            //缓存数据
          wx.setStorage({
              key: "players",
              data: this.data.players,
              success: ()=> {
                  console.log(this.data.players+' 存储成功!');
              }
          })
          wx.setStorage({
            key: "rounds",
            data: this.data.rounds,
            success: ()=> {
                console.log(this.data.rounds+' 存储成功!');
            }
        })
        wx.setStorage({
          key: "round_m",
          data: this.data.round_m,
          success: ()=> {
              console.log(this.data.round_m+' 存储成功!');
          }
      })
          wx.navigateTo({
              url: "/pages/start/start"
          })
      }
    }
  },
  // 游戏人数失焦
  players(e) {
    this.setData({
      players: e.detail.value
    })
  },
  // 游戏轮数失焦
  rounds(e) {
    this.setData({
      rounds: e.detail.value
    })
  },
  rule() {
    wx.navigateTo({
      url: "/pages/rule/rule"
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {
 
  }
})

本周我们通过尝试用微信小程序实现黄金点游戏，增加了对微信小程序编程的了解。下一阶段我们将着手于编写黄金点小游戏的网络版，让大家可以同时在线玩。