项目展示
项目链接
https://download.csdn.net/download/weixin_45525272/17043459
项目设计
关于于规则就不写了
wxml
<!--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='warn' form-type='reset' bindtap='guess'>提交</button> </block> <block wx:else> <button type='primary' bindtap='restartGame'>重新开始</button> </block> </form> <text id='tip'>{{tip}}</text> </view>
wxss
/* pages/game/game.wxss */ /*文本框*/ input{ border: 1rpx solid green;/*1rpx宽的绿色实线边框*/ margin: 30rpx 0;/*上下外边距30rpx*/ height: 90rpx;/*高度*/ border-radius: 20rpx; /*圆角边框*/ } /*提示框*/ #tip{ height:800rpx;/*固定高度*/ }
js
// pages/game/game.js Page({ /** * 页面的初始数据 */ data: {}, /** * 数据初始化 */ initial: function() { this.setData({ answer: Math.round(Math.random() * 100),//随机数 count: 0,//回合数 tip: '',//提示语句 x: -1,//用户猜的数字 isGameStart: true//游戏已经开始 }); console.log("答案是:"+this.data.answer); }, /** * 获取用户输入的数字 */ 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(options) { this.initial(); }, })