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

.js:

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

<!--index.wxml--> <view class="downView" ><text class="winNum">你已經獲勝了<text style="color:red">{{winNum}}</text>次</text><view class="showView"><image src="{{imageAiScr}}" class="gesturesImgL"></image><text class="winOrLost">{{gameOfPlay}}</text><image src="{{imageUserScr}}" class="gesturesImgR"></image></view><view class="chooseForUserView"><text class="winNum">出拳吧，少年~</text><view class="choose-V"><block wx:for="{{srcs}}"><view class="choose-view" bindtap="changeForChoose" id="{{index}}"> <image class="choose-image" src="{{item}}" ></image> </view> </block></view><button class="againBtn" bindtap="again">再來!</button> </view></view>
.wxss:

/*底*/ .downView{width: 100%;height: 1250rpx;background: #FAE738;margin: 0rpx;text-align: center; }/*獲勝次數*/ .winNum{padding-top: 40rpx;display: block;font-size: 30rpx; color: #363527;font-weight:500; }/*展示出拳結果*/ .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：

小程序-石頭剪刀布

感謝觀看，學以致用更感謝~

總結

以上是生活随笔為你收集整理的微信小程序_石头剪刀布的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。