强开小嫩苞一区二区三区网站 ,免费成年人高清视频,久久久久久av无码免费网站下载

導讀微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用，也是一...

微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用，也是一項門檻非常高的創新，經過將近兩年的發展，已經構造了新的小程序開發環境和開發者生態。

這篇文章主要介紹了微信小程序石頭剪刀布實例代碼的相關資料,需要的朋友可以參考下

微信小程序石頭剪刀布

昨天看有個石頭剪刀布的練習，就拿出來做了一下，布局的代碼浪費了很多時間，果然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');
 //如果有緩存，那么賦值，否則為0
 if(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:

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

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

當前位置:雨林木風下載站 > 應用軟件教程 > 詳細頁面

微信小程序中石頭剪刀布的完成

本類教程下載

系統下載排行