index.wxml
<view class='game'>
<text class='info'>你已经获胜了
<text style='color:red'>{{wintimes}}</text>次
</text>
</view>
<view class='result'>
<image src='{{robotImg}}'></image>
<text>{{resinfo}}</text>
<image src='{{userImg}}'></image>
</view>
<view class='select-options-panel'>
<text>出拳吧,骚年!</text>
<view class='select-options'>
<image id='0' bindtap='select' src='../../images/0.png'></image>
<image id='1' bindtap='select' src='../../images/1.png'></image>
<image id='2' bindtap='select' src='../../images/2.png'></image>
</view>
<button disabled='{{tapable}}' bindtap='start' type='warn' class='startBtn'>开始</button>
</view>
index.wxss
page{
width: 100%;
height: 100%;
background: #305692;
}
.game{
margin-top: 50rpx;
text-align: center;
}
.view{
width: 100%;
}
.result image{
width: 120rpx;
height: 120rpx;
background: #ccc;
border-radius: 10rpx;
}
.result{
display: flex;
justify-content: space-around;
margin-top: 50rpx;
align-items: center;
color: white;
}
.select-options-panel{
margin: 50rpx auto;
width: 600rpx;
height: 600rpx;
background:rgba(255, 255, 255, 0.6);
text-align: center;
}
.select-options-panel image{
width: 160rpx;
height: 160rpx;
}
.select-options{
margin-top: 50rpx;
display: flex;
justify-content: space-around;
}
.startBtn{
width: 500rpx;
margin: 50rpx;
}
index.js
//index.js
//获取应用实例
const app = getApp()
let timer = null; //定义计时器变量
Page({ //所有的变量都要写在这里
data: {
wintimes:0,
resinfo:"无结果",
robotImg:"../../images/aa.jpg",
userImg:"../../images/bb.png",
tapable: "",
userResult: null,
robotResult: null
},
//事件处理函数
onLoad: function () {
},
start: function(){
console.log("start..........");
//定一个计时器
timer = setInterval(function(){
let index = Math.floor(Math.random()*3);
//每隔50毫秒切换一张图片
//修改data数据, 必须用setdata函数
this.setData({
robotImg: "../../images/"+index+".png"
});
//判断结果
if(this.data.userResult){
//停止定时器
clearInterval(timer);
this.setData({
robotResult: index
})
this.judge();
}
}.bind(this), 50);
this.setData({
tapable: 'disabled'
});
},
//内容选择
judge:function(){
console.log(this.data.robotResult);
console.log(this.data.userResult);
let finalres = this.data.robotResult + this.data.userResult;
switch(finalres){
case '00':
case '11':
case '22': {
this.setData({
resinfo:"平局"
});break;
}
case '10':
case '02':
case '21':{
this.setData({
resinfo: "赢",
wintimes : this.data.wintimes+1
}); break;
}
case '01':
case '12':
case '20':{
this.setData({
resinfo: "输"
}); break;
}
}
this.setData({
tapable:"",
userResult: null,
robotResult: null
})
},
select: function(e){ //通过e 获取所点区域的图片信息
console.log(e.target.id); //获取id
this.setData({
userImg: "../../images/" + e.target.id +".png",
userResult: e.target.id
})
}
})