石头剪刀布php源码,原创：微信小程序源码解说：石头剪刀布（附源码下载）
昨天看有個石頭剪刀布的練習，就拿出來做了一下，布局的代碼浪費了很多時間，果然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
你已經獲勝了{{winNum}}次
{{gameOfPlay}}
出拳吧，少年~
再來!
.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資源下載：小程序-石頭剪刀布
總結
以上是生活随笔為你收集整理的石头剪刀布php源码,原创：微信小程序源码解说：石头剪刀布（附源码下载）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： YesPlayMusic for Mac
- 下一篇： 赛元单片机SC92F732x系列prin