目标:简单猜字游戏,系统随机生成一个数,玩家可以猜8次,8次未猜对,游戏结束;未到8次猜对,游戏结束。
思路和要求:
创建四个页面,“首页”,“开始游戏”,“游戏规则”,“关于我们”。
(1)“首页”:可以点击“开始游戏”、“游戏规则”、“关于我们”,分别跳转到相应页面;
(2)“开始游戏”:初始化以后,随机生成一个数字,玩家可以猜8次,在8次之内猜对,游戏结束,可重新开始;未在8次之内猜对,游戏结束;
(3)“游戏规则”:用文字说明游戏的要求;
(4)“关于我们”:关于游戏开发人员等内容。
注意:创建不使用云服务的js模板的项目。
效果图:
第一步 app.json里面创建了四个页面。
index —— “首页”
game —— “开始游戏”
about —— “关于我们”
rules —— “游戏规则”
接着对页面进行设计,再进行功能设计。
第二步 对每个界面进行设计以及界面的逻辑
(1)分别自定义每个页面的导航栏的标题
分析:不是全局变量,是局部变量,即分别在页面的json文件自定义导航栏标题。
(2)设置全局样式,为微信小程序页面设置全局样式。
设置全局样式,为微信小程序页面设置全局样式。
(3)“首页”界面设计
效果图:
(4)"游戏规则"页面设计
需要组件:text组件。
效果图如下:
(5)“关于我们”页面进行设计
要求:text组件,主要是为了描述开发者等信息。
效果图:
(6)“开始游戏”页面设计
划分为:三个板块,分别是:部欢迎语句、表单----输入框and提交按钮、提示语句;
关键点:样式+内容
样式如下:
效果如下:
页面逻辑:在js文件里面对游戏初始化:
进入游戏界面,需要随机生成一个数,这个数是正确答案(answer),用户输入框可以输入数字(x),有8次机会,每提交一次(Count)需要有提示语句(tip),判断游戏状态(isGameStart),当正确答案与输入的数值相同时,结束游戏。
页面加载后调用初始化函数:
页面逻辑:
当游戏结束后,不能再输入数字,跳转到一个页面可以重新开始游戏,游戏又回到初始化。
解决办法:
使用block组件,可以使代码为一个整体,通过判断游戏是否结束(使用if else),来显示不同的内容。
效果图:
js代码:
// pages/game/game.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 数据初始化
*/
initial:function () {
this.setData({
answer: Math.round(Math.random() * 100), //随机数
count: 0, // 回合数
tip : '', //提示语句
x : -1, //用户猜的数
isGageState : true //游戏状态
}
)
},
/*获取用户输入的数字*/
getNumber(e){
//console.log(e.detail.value)
this.setData({x :e.detail.value})
},
/*开始猜数字*/
guess(){
//获取用户输入的数字
let x = this.data.x;
//console.log(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 = tip + '\n第' + count + '回合' + x +',猜对了!';
this.setData({isGageState : false}); //游戏结束
}else if(x > answer){
tip = tip + '\n第' + count + '回合' + x +',大了';
}else{
tip = tip + '\n第' + count + '回合' + x +',小了!';
}
//如果次数为8,游戏结束
if(count == 8){
tip = tip + '\n 游戏结束';
this.setData({isGageState : false}); //游戏结束
}
//每次都需要更新原来的值,提示语句和回合数
this.setData({
tip : tip,
count : count
});
}
},
/* 重新开始
*/
restartGame(){
this.initial();
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.initial();
}
})
总结知识点:
1、<view class = "样式"></view>
2、<button type = "类型" form-type = "reset是将所有输入内容置为初始状态" bindtap = “点击按钮的事件”>内容<button>
3、设置全局样式,如果全局样式需要在这个页面显示
即:使用view组件:<view class = "container"> <view>
4、<text id = "内容,写样式时,需加#">内容<text>
5、<text id = "内容,写样式时,需加#">{{内容未变量时,要将变量放在两个大括号}}<text>
6、<form>表单里面有按钮,点击后提交内容</form>
7、<input bindinput = "输入框事件,一般未获取输入框里面的内容" type = "类型" placeholder = "输入框未输入显示的内容"></input>
js文件里面的知识点总结:
1、在js文件里面调用函数,格式:this.函数名称();
2.js文件初始化,可以写一个初始化函数,使用 this.setData({初始化1,初始化2});setData函数为其赋值。
3、改变变量的值:this.setData({变量名称: 值})
4、想要获取输入框里面的内容,不知道输入框内容是哪一个变量时,可以使用console.log(e)把事件打印出来,通过输入写代码。
5、获取变量:this.data.变量名称
6、使用轻度提示:
wx.showToast({
title: '需要提示的·内容,
});
第三步 四个界面之间的关系
index.wxml代码:
分别点击“开始游戏”、“游戏规则”、“关于我们”字样跳转到对应页面。
index.js代码如下:
Page({
/**
* 页面的初始数据
*/
data: {
},
goToGame(){
wx.navigateTo(
{
url:'/pages/game/game'
}
)
},
goToRules(){
wx.navigateTo(
{
url:'/pages/rules/rules'
}
)
},
goToAbout(){
wx.navigateTo(
{
url:'/pages/about/about'
}
)
}
})
以上为全部内容,如有不正确的地方,敬请批评指正。