猜拳游戏源代码

index.wxml

<!--index.wxml-->
<view class='game'>
   <text class='info'>你已经获胜了</text>
   <text class='wintimestyle'>{{wintimes}}</text>
   <text class='info'>次</text>
</view>

<view class='result'>
   <image src='{{robotImg}}'></image>
   <text class='resinfostyle'>{{resinfo}}</text>
   <image src='{{myImg}}'></image>
</view>

<view class='select-options-panel'>
  <text class='slogan'>出拳吧！骚年！</text>
  <!-- 图片选项 -->
  <view class='select-options'>
    <image src='../../images/0.png' id='0' bindtap='select'></image>
    <image src='../../images/1.png' id="1" bindtap='select'></image>
    <image src='../../images/2.png' id="2" bindtap='select'></image>
  </view>
  <button class='startbtn' type='primary' bindtap='start' disabled='{{tapable}}'>开始</button>
</view>

index.wxss

/* 页面 */
page{
  width: 100%;
  height: 100%;
  background:#305692;
}

/* 提示获胜次数 */
.game{
  text-align: center;
  margin-top: 40rpx;
}
.game .info{
  display: inline-flex;
  font-size: 40rpx;
}
.game .wintimestyle{
  color: red;
  font-size: 45rpx;
}

/* 猜拳结果 */
.result{
  /* 弹性工具 */
  display: flex;
  justify-content: space-around;
  /* align-items: center; */
  margin-top: 60rpx;
}
.result image{
  width:120rpx;
  height: 120rpx;
  background: #ccc;
  border-radius: 8rpx;
}
.result .resinfostyle{
  margin-top: 30rpx;
  color: #fff;
}

/* 选择出拳面板 */
.select-options-panel{
  padding-top: 40rpx;
  width: 660rpx;
  height: 660rpx;
  background: rgba(255,255, 255, 0.6) ;
  margin: 100rpx auto;
  text-align: center;
}
.select-options-panel .slogan{
  color: #fff;
  font-size: 60rpx;
  line-height: 65rpx;
}
.select-options{
  margin-top: 80rpx;
  /* 几个图片均匀分开 */
  display: flex;
  justify-content: space-around;
}
.select-options image{
  width: 160rpx;
  height: 160rpx;
}
.startbtn{
  margin-top: 50rpx;
  width: 70%;
}

index.js

//index.js
//获取应用实例
//定义常量,普通变量定义为let
const app = getApp()
//定时器
let timer = null;
Page({
  data: {
    // 获胜次数
   wintimes:0,
  //  比赛结果
   resinfo: "结果",
   //左边机器人的出拳图片
   robotImg:"../../images/robot.png",
   //开始按钮是否可点击
   tapable:"",
   //我选择的出拳图片
   myImg:"../../images/user.png",

   //用户出拳的结果
   userResult:null,
   //机器人出拳的结果
   robotResult:null,
  },

  //开始按钮的函数
  start: function(){
    var that = this;
    //间断
    //timer = setInterval({函数}，时间间隔);
    timer = setInterval(function(){
        //每隔50ms执行一次图片切换
      let index = Math.floor(Math.random() * 3);
      that.setData({
        robotImg: '../../images/' + index + '.png'
      })

      //判断用户是否已经出拳
      if(that.data.userResult){

        //停止定时器，不再切换
        clearInterval(timer);

        //记录robot出拳的结果
        that.setData({
          robotResult:index
        })

      //调用判断函数进行结果的判断
      that.judge();
      }
    }, 50);

    that.setData({
      tapable:"disable",
      myImg: '../../images/user.png'
    })
  },

  //三个图片选择函数
  select:function(e){
    var that = this;
    //打印此时点的图片的id
    console.log(e.target.id, '用户所选拳id');

    that.setData({
      myImg:'../../images/' + e.target.id + '.png',
      userResult: e.target.id
    })

  },

  //判断结果函数
  judge:function(){
    var that = this;
    // console.log(that.data.robotResult,'机器人');
    // console.log(that.data.userResult,'用户');
    let finalres = that.data.robotResult + that.data.userResult;
    console.log(finalres,'比赛各方所出拳id');

    switch(finalres){
      //平局
      case '00':
      case '11':
      case '22':{
        that.setData({
          resinfo:"平局"
        });
        break;
      }
      case '01':
      case '12':
      case '20':{
        that.setData({
          resinfo:"输了"
        });
        break;
      }
      case '10':
      case '21':
      case '02':{
        that.setData({
          resinfo:"赢了",
          //that.data.wintimes代表取出来
          wintimes: that.data.wintimes+1
        });
        break;
      }
    }

    //恢复按钮的点击，同时将出拳的结果清理
    that.setData({
      tapable:"",
      robotResult: null,
      userResult: null
    })
  },

  //页面加载函数
  onLoad: function () {
      console.log('onload方法被执行了！！');
  },
})