微信小程序_石头剪刀布

昨天看 “微信小程序联盟” 这个网站上有个石头剪刀布的练习，就拿出来做了一下，布局的代码浪费了很多时间，果然CSS这块的还不是很熟练,下面直接上图上代码了。

.js:

[javascript]  view plain  copy

 print ?

1. <span style="font-family:Arial Black;font-size:14px;color:#3366ff;">var numAi = 0  
2. var timer  
3. Page({  
4.   data:{  
5.     //控制按钮是否可点击  
6.     btnState:false,  
7.     //记录获胜次数  
8.     winNum:0,  
9.     //中间的话“Ho~ You Win”  
10.     gameOfPlay:'',  
11.     //用户选择的图片  
12.     imageUserScr:'/pages/image/wenhao.png',  
13.     //电脑随机的图片  
14.     imageAiScr:'',  
15.     //石头剪刀布图片数组  
16.     srcs:[  
17.       '/pages/image/shitou.png',  
18.       '/pages/image/jiandao.png',  
19.       '/pages/image/bu.png'  
20.     ]  
21.   },  
22.   
23.   //生命周期，刚进来  
24.   onLoad: function () {  
25.     //获取本地缓存“已经获胜的次数”  
26.     var oldWinNum = wx.getStorageSync('winNum');  
27.     //如果有缓存，那么赋值，否则为0  
28.     if(oldWinNum != null && oldWinNum !=''){  
29.        this.data.winNum = oldWinNum;  
30.     }  
31.     this.timerGo();  
32.   },  
33.   
34.   //点击按钮  
35.   changeForChoose(e){  
36.     console.log();  
37.       if(this.data.btnState == true){  
38.         return;  
39.       }  
40.   
41.       //获取数组中用户的，石头剪刀布相应的图片。  
42.       this.setData({  
43.           imageUserScr:this.data.srcs[e.currentTarget.id]  
44.       });  
45.       //清除计时器  
46.       clearInterval(timer);  
47.   
48.       //获取数据源  
49.       var user = this.data.imageUserScr;  
50.       var ai = this.data.imageAiScr;  
51.       var num = this.data.winNum;  
52.       var str = '0.0~\nYou Lost!';  
53.   
54.       //判断是否获胜  
55.       if( user == "/pages/image/shitou.png" && ai == "/pages/image/jiandao.png"){  
56.          //获胜后增加次数、改变文字内容、从新缓存获胜次数  
57.          num++;  
58.          str = 'Ho~\nYou Win!';  
59.          wx.setStorageSync('winNum', num);  
60.       };  
61.       if(user == "/pages/image/jiandao.png" && ai == "/pages/image/bu.png"){  
62.          num++;  
63.          str = 'Ho~\nYou Win!';  
64.          wx.setStorageSync('winNum', num);  
65.       };  
66.       if(user== "/pages/image/bu.png" && ai == "/pages/image/shitou.png"){  
67.          num++;  
68.          str = 'Ho~\nYou Win!';  
69.          wx.setStorageSync('winNum', num);  
70.       };  
71.   
72.       //如果平局  
73.       if(user == ai){  
74.          str = 'Game Draw!';  
75.       }  
76.   
77.       //刷新数据  
78.       this.setData({  
79.           winNum:num,  
80.           gameOfPlay:str,  
81.           btnState:true  
82.       });  
83.   },  
84.   
85.   //开启计时器  
86.   timerGo(){  
87.     timer = setInterval(this.move,100);  
88.   },  
89.   
90.   //ai滚动方法  
91.   move(){  
92.     //如果大于等于3，重置  
93.     if(numAi>=3){  
94.       numAi=0;  
95.     }  
96.     this.setData({  
97.         //获取数组中Ai的，石头剪刀布相应的图片。  
98.         imageAiScr: this.data.srcs[numAi],  
99.     })  
100.     numAi++;  
101.   },  
102.   
103.   again(){  
104.       //控制按钮  
105.       if(this.data.btnState == false){  
106.         return;  
107.       }  
108.       //从新开始计时器  
109.       this.timerGo();  
110.       //刷新数据  
111.       this.setData({  
112.           btnState:false,  
113.           gameOfPlay:'',  
114.           imageUserScr:'/pages/image/wenhao.png'  
115.       });  
116.   }  
117. })</span>  

.wxml:

[html]  view plain  copy

 print ?

1. <span style="font-family:Arial Black;font-size:14px;color:#3366ff;"><!--index.wxml-->  
2. <view class="downView" >  
3.   
4.     <text class="winNum">你已经获胜了<text style="color:red">{{winNum}}</text>次</text>  
5.     <view class="showView">  
6.         <image src="{{imageAiScr}}" class="gesturesImgL"></image>  
7.         <text class="winOrLost">{{gameOfPlay}}</text>  
8.         <image src="{{imageUserScr}}" class="gesturesImgR"></image>  
9.     </view>  
10.   
11.   
12.   
13.     <view class="chooseForUserView">  
14.         <text class="winNum">出拳吧，少年~</text>  
15.         <view class="choose-V">  
16.             <block wx:for="{{srcs}}">  
17.                 <view class="choose-view" bindtap="changeForChoose" id="{{index}}">    
18.                     <image class="choose-image" src="{{item}}" ></image>    
19.                 </view>    
20.             </block>  
21.         </view>  
22.   
23.         <button class="againBtn" bindtap="again">再来!</button>    
24.    
25.     </view>  
26.   
27. </view>  
28. </span>  

.wxss:

[css]  view plain  copy

 print ?

1. <span style="font-family:Arial Black;font-size:14px;color:#3366ff;">/*底*/  
2. .downView{  
3.     width: 100%;  
4.     height: 1250rpx;  
5.     background: #FAE738;  
6.     margin: 0rpx;  
7.     text-align: center;  
8. }  
9.   
10. /*获胜次数*/  
11. .winNum{  
12.     padding-top: 40rpx;  
13.     display: block;  
14.     font-size: 30rpx;    
15.     color: #363527;  
16.     font-weight:500;  
17. }  
18.   
19. /*展示出拳结果*/  
20. .showView{  
21.     display: flex;    
22.     width: 100%;  
23.     margin-top:30rpx;  
24.     height: 200rpx;  
25. }  
26.   
27. .gesturesImgL{  
28.     height: 180rpx;  
29.     width: 180rpx;  
30.     margin-left:80rpx;  
31. }  
32.   
33. .gesturesImgR{  
34.     height: 180rpx;  
35.     width: 180rpx;  
36.     margin-right:80rpx;  
37. }  
38.   
39. .winOrLost{  
40.     color: orangered;   
41.     flex:1;  
42.     font-size: 30rpx;  
43.     margin-top:75rpx;   
44. }  
45.   
46. /*用户出拳*/  
47. .chooseForUserView{  
48.     margin:40rpx;   
49.     height: 800rpx;  
50.     background: white;  
51.     text-align: center;  
52. }  
53.   
54. .choose-V{  
55.     display: flex;  
56.     margin-top: 40rpx;  
57. }  
58.   
59. .choose-view{    
60.     flex: 1;  
61.     content:none !important;  
62.     height: 140rpx;  
63.     width: 140rpx;   
64.     border:1px solid white;  
65. }    
66.   
67. .choose-image{  
68.     height: 160rpx;  
69.     width: 160rpx;  
70.     border-radius:80rpx;  
71. }  
72.   
73. /*再来*/  
74. .againBtn{  
75.     margin:80rpx;   
76.     background: #FAE738;  
77. }</span>  

共享demo：

小程序-石头剪刀布

感谢观看，学以致用更感谢~