這篇文章主要介紹了微信小程序 石頭剪刀布實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
微信小程序 石頭剪刀布
昨天看有個(gè)石頭剪刀布的練習(xí)，就拿出來做了一下，布局的代碼浪費(fèi)了很多時(shí)間，果然CSS這塊的還不是很熟練,下面直接上圖上代碼了。
.js:
var numAi = 0
var timer
Page({
data:{
//控制按鈕是否可點(diǎn)擊
btnState:false,
//記錄獲勝次數(shù)
winNum:0,
//中間的話“Ho~ You Win”
gameOfPlay:'',
//用戶選擇的圖片
imageUserScr:'/pages/image/wenhao.png',
//電腦隨機(jī)的圖片
imageAiScr:'',
//石頭剪刀布圖片數(shù)組
srcs:[
'/pages/image/shitou.png',
'/pages/image/jiandao.png',
'/pages/image/bu.png'
]
},
//生命周期，剛進(jìn)來
onLoad: function () {
//獲取本地緩存“已經(jīng)獲勝的次數(shù)”
var oldWinNum = wx.getStorageSync('winNum');
//如果有緩存，那么賦值，否則為0
if(oldWinNum != null && oldWinNum !=''){
this.data.winNum = oldWinNum;
}
this.timerGo();
},
//點(diǎn)擊按鈕
changeForChoose(e){
console.log();
if(this.data.btnState == true){
return;
}
//獲取數(shù)組中用戶的，石頭剪刀布相應(yīng)的圖片。
this.setData({
imageUserScr:this.data.srcs[e.currentTarget.id]
});
//清除計(jì)時(shí)器
clearInterval(timer);
//獲取數(shù)據(jù)源
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"){
//獲勝后增加次數(shù)、改變文字內(nèi)容、從新緩存獲勝次數(shù)
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!';
}
//刷新數(shù)據(jù)
this.setData({
winNum:num,
gameOfPlay:str,
btnState:true
});
},
//開啟計(jì)時(shí)器
timerGo(){
timer = setInterval(this.move,100);
},
//ai滾動(dòng)方法
move(){
//如果大于等于3，重置
if(numAi>=3){
numAi=0;
}
this.setData({
//獲取數(shù)組中Ai的，石頭剪刀布相應(yīng)的圖片。
imageAiScr: this.data.srcs[numAi],
})
numAi++;
},
again(){
//控制按鈕
if(this.data.btnState == false){
return;
}
//從新開始計(jì)時(shí)器
this.timerGo();
//刷新數(shù)據(jù)
this.setData({
btnState:false,
gameOfPlay:'',
imageUserScr:'/pages/image/wenhao.png'
});
}
})
登錄后復(fù)制
.wxml:
<view class="downView" >
<text class="winNum">你已經(jīng)獲勝了<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>
登錄后復(fù)制
.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;
}
登錄后復(fù)制
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)！
相關(guān)推薦：
以上就是微信小程序中石頭剪刀布的實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注有卡有網(wǎng)。
