四、猜数字游戏
本节主要介绍使用小程序组件知识制作一款简易的猜数字游戏，系统随机生成0~100的整数让玩家猜，一共8个回合。
目标：学习使用基础容器<view>；学习使用<form>、<input>和<button>等组件。
四个主要界面：
一、首页
主要代码：
<!--pages/index/index.wxml-->
<view class="container">
<button bindtap="goToGame" type="primary">开始游戏</button>
<button bindtap="goToRules" type="primary">游戏规则</button>
<button bindtap="goToAbout" type="primary">关于我们</button>
</view>
// pages/index/index.js
Page({
goToGame(){
wx.navigateTo({
url:'../game/game',
})
},
goToAbout(){
wx.navigateTo({
url: '../about/about',
})
},
goToRules(){
wx.navigateTo({
url: '../rules/rules',
})
}
})
二、游戏界面
<!--pages/game/game.wxml-->
<view class="container">
<text>欢迎来到猜数字小游戏</text>
<form>
<block wx:if="{{isGameStart}}">
<!--用block可以一次性地控制多个组件，block本身不会被渲染，有助于提高性能。用hidden属性也能实现隐藏元素，但与wx:if原理不同，前者是通过改变样式（wxss的代码），后者是通过动态创建元素的方式。使用建议：①频繁切换时，使用hidden；②控制条件复杂时，用wx:if搭配wx:elif、wx:else。这涉及到性能。-->
<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>
// pages/game/game.js
Page({
initial:function(){
this.setData({
answer:Math.round(Math.random()*100),
count:0,
tip:'',
x:-1,
isGameStart:true
});
},
// 获取用户输入的数字
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(){
this.initial()
}
})
三、游戏规则
<!--pages/rules/rules.wxml-->
<view class="container">
<text>
1.系统会随机生成一个0~100的数字让玩家猜。
2.玩家共有8次机会。
3.在8次之内猜到则游戏成功。
4.点击“开始游戏”进入游戏画面。
</text>
</view>
rules.js为空即可。
四、关于我们
<!--pages/about/about.wxml-->
<view class="container">
<text>XXX工作室荣誉出品。</text>
</view>
about.js为空即可。
其他代码略。
