摘要：我的博客來源鏈接昨天看有個石頭剪刀布的練習，就拿出來做了一下，布局的代碼浪費了很多時間，果然這塊的還不是很熟練下面直接上圖上代碼了。

我的博客：來源鏈接

昨天看有個石頭剪刀布的練習，就拿出來做了一下，布局的代碼浪費了很多時間，果然CSS這塊的還不是很熟練,下面直接上圖上代碼了。

JS：

var numAi = 0
var timer
Page({
  data:{
    //控制按鈕是否可點擊
    btnState:false,
    //記錄獲勝次數(shù)
    winNum:0,
    //中間的話“Ho~ You Win”
    gameOfPlay:"",
    //用戶選擇的圖片
    imageUserScr:"/pages/image/wenhao.png",
    //電腦隨機的圖片
    imageAiScr:"",
    //石頭剪刀布圖片數(shù)組
    srcs:[
      "/pages/image/shitou.png",
      "/pages/image/jiandao.png",
      "/pages/image/bu.png"
    ]
  },
  
  //生命周期，剛進來
  onLoad: function () {
    //獲取本地緩存“已經(jīng)獲勝的次數(shù)”
    var oldWinNum = wx.getStorageSync("winNum");
    //如果有緩存，那么賦值，否則為0
    if(oldWinNum != null && oldWinNum !=""){
       this.data.winNum = oldWinNum;
    }
    this.timerGo();
  },
  
  //點擊按鈕
  changeForChoose(e){
    console.log();
      if(this.data.btnState == true){
        return;
      }
  
      //獲取數(shù)組中用戶的，石頭剪刀布相應的圖片。
      this.setData({
          imageUserScr:this.data.srcs[e.currentTarget.id]
      });
      //清除計時器
      clearInterval(timer);
  
      //獲取數(shù)據(jù)源
      var user = this.data.imageUserScr;
      var ai = this.data.imageAiScr;
      var num = this.data.winNum;
      var str = "0.0~
You Lost!";
  
      //判斷是否獲勝
      if( user == "/pages/image/shitou.png" && ai == "/pages/image/jiandao.png"){
         //獲勝后增加次數(shù)、改變文字內(nèi)容、從新緩存獲勝次數(shù)
         num++;
         str = "Ho~
You Win!";
         wx.setStorageSync("winNum", num);
      };
      if(user == "/pages/image/jiandao.png" && ai == "/pages/image/bu.png"){
         num++;
         str = "Ho~
You Win!";
         wx.setStorageSync("winNum", num);
      };
      if(user== "/pages/image/bu.png" && ai == "/pages/image/shitou.png"){
         num++;
         str = "Ho~
You Win!";
         wx.setStorageSync("winNum", num);
      };
  
      //如果平局
      if(user == ai){
         str = "Game Draw!";
      }
  
      //刷新數(shù)據(jù)
      this.setData({
          winNum:num,
          gameOfPlay:str,
          btnState:true
      });
  },
  
  //開啟計時器
  timerGo(){
    timer = setInterval(this.move,100);
  },
  
  //ai滾動方法
  move(){
    //如果大于等于3，重置
    if(numAi>=3){
      numAi=0;
    }
    this.setData({
        //獲取數(shù)組中Ai的，石頭剪刀布相應的圖片。
        imageAiScr: this.data.srcs[numAi],
    })
    numAi++;
  },
  
  again(){
      //控制按鈕
      if(this.data.btnState == false){
        return;
      }
      //從新開始計時器
      this.timerGo();
      //刷新數(shù)據(jù)
      this.setData({
          btnState:false,
          gameOfPlay:"",
          imageUserScr:"/pages/image/wenhao.png"
      });
  }
})

.WXML

  
    你已經(jīng)獲勝了{{winNum}}次
    
        
        {{gameOfPlay}}
        
    
  
    
        出拳吧，少年~
        
            
                 
                     
                 
            
        
  
        再來! 
   
    
  

.WXSS

/*底*/
.downView{
    width: 100%;
    height: 1250rpx;
    background: #FAE738;
    margin: 0rpx;
    text-align: center;
}
  
/*獲勝次數(shù)*/
.winNum{
    padding-top: 40rpx;
    display: block;
    font-size: 30rpx; 
    color: #363527;
    font-weight:500;
}
  
/*展示出拳結(jié)果*/
.showView{
    display: flex; 
    width: 100%;
    margin-top:30rpx;
    height: 200rpx;
}
  
.gesturesImgL{
    height: 180rpx;
    width: 180rpx;
    margin-left:80rpx;
}
  
.gesturesImgR{
    height: 180rpx;
    width: 180rpx;
    margin-right:80rpx;
}
  
.winOrLost{
    color: orangered;
    flex:1;
    font-size: 30rpx;
    margin-top:75rpx;
}
  
/*用戶出拳*/
.chooseForUserView{
    margin:40rpx;
    height: 800rpx;
    background: white;
    text-align: center;
}
  
.choose-V{
    display: flex;
    margin-top: 40rpx;
}
  
.choose-view{ 
    flex: 1;
    content:none !important;
    height: 140rpx;
    width: 140rpx;
    border:1px solid white;
} 
  
.choose-image{
    height: 160rpx;
    width: 160rpx;
    border-radius:80rpx;
}
  
/*再來*/
.againBtn{
    margin:80rpx;
    background: #FAE738;
}

demo資源下載：小程序-石頭剪刀布