微信小程序 分歧终结机

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
    })

  }
})