题目要求:
知识点:
使用 target.dataset.value调用事件值。
使用this.setData给data中result属性赋值,输出到视图层。
代码实现:
先通过wxml把页面结构写出来,然后在视图层绑定事件getGameResult,在逻辑层设定getGameResult事件。
接着使用if语句比较用户点击的结果(判断用户点击的结果需要使用自定义属性把按钮对应的类型传给事件处理函数,从而用于确定用户点击的按钮是剪刀,石头还是布。)和电脑随机产生的结果,得出胜负关系。
wxml 文件,编写内容如下:
<!--index.wxml-->
<view class="game">
<view class="game-inner">
<view class="game-hd">
<text class="title">来,玩个小游戏!</text>
</view>
<view class="game-bd" bindtap='getGameResult'>
<!-- 为按钮绑定事件 -->
<button class="btn" data-value ='{{"0"}}'>剪刀</button>
<button class="btn" data-value ='{{"1"}}'>石头</button>
<button class="btn" data-value ='{{"2"}}'>布</button>
</view>
<view class="game-ft">
<text class="result">{{ result }}</text>
</view>
</view>
</view>
js 文件,编写内容如下:
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
result: '请选择一个按钮',
},
getGameResult: function (event) {
//实现函数
// console.log(event.target.dataset.value)
// console.log(parseInt(Math.random() * 3))
var gameresult;
var userchoice = parseInt(event.target.dataset.value);
var comchoice = parseInt(Math.random() * 3);
if (userchoice == comchoice) {
gameresult = '平局';
}else if ((userchoice == 0 && comchoice == 1) || (userchoice == 1 && comchoice == 2) || (userchoice == 2 && comchoice == 0)) {
gameresult = '输了';
}else {
gameresult = '赢了';
}
this.setData({
result : gameresult
})
// console.log(gameresult)
}
})
上面的 getGameResult 就是在 WXML 上面绑定的事件所对应的处理函数,我们需要通过事件对象获取到按钮数据,并使用 parseInt(Math.random() * 3) 随机生成 0, 1, 2 三个数字的其中一个,分别代表电脑出的猜拳,再跟用户的选择对比,确定最终结果并用 result 输出到页面中。
可以通过编写wxss 文件来定义样式:
/**index.wxss**/
page {
height:100%;
}
.game {
display:flex;
height:100%;
}
.game-inner {
flex:1;
align-self:center;
}
.game-hd {
padding:48rpx 0;
}
.game-hd .title {
display:block;
text-align:center;
font-weight:bold;
font-size:64rpx;
}
.game-bd {}
.game-bd .btn {
margin-bottom:24rpx;
}
.game-ft {}
.game-ft .result {
display:block;
text-align:center;
font-size:32rpx;
color:red;
}