黄金点小游戏（微信小程序）
黄金点游戏是一个数字小游戏，其游戏规则是：
N个同学（N通常大于10），每人写一个0~100之间的有理数 (不包括0或100)，交给裁判，裁判算出所有数字的平均值，然后乘以0.618（所谓黄金分割常数），得到G值。提交的数字最靠近G（取绝对值）的同学得到N分，离G最远的同学得到－2分，其他同学得0分。玩了几天以后，大家发现了一些很有意思的现象，比如黄金点在逐渐地往下移动。
这次给大家带来的是微信小程序实现的黄金点小游戏，微信小程序共分为5个页面，选择人数和轮数的页面，显示游戏规则的页面，输入数字的页面，显示每轮结果的页面以及最后成绩显示的页面。
选择人数和轮数的页面：
显示游戏规则的页面：
输入数字的页面：
显示每轮结果的页面：
最后成绩显示的页面：
1.选择人数以及轮数wxml代码如下：
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() {}
})
本周我们通过尝试用微信小程序实现黄金点游戏，增加了对微信小程序编程的了解。下一阶段我们将着手于编写黄金点小游戏的网络版，让大家可以同时在线玩。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！