---恢復內(nèi)容開始---

　　最近幾天在學習小程序，看了網(wǎng)上的學習視頻，于是自己搗鼓著做出了視頻里面的小程序。

　　這是實現(xiàn)的效果圖

　　一個小程序頁面，一般有三個部分文件組成，index.js 這個文件里面放的是實現(xiàn)小程序的js代碼；index.wxml文件里面放的是頁面的結(jié)構(gòu)層代碼；相當于html，index.wxss放的是樣式層代碼，相當于css代碼。

index.wxml運用的是小程序里面的組件，代碼如下：

1. <!--index.wxml-->
2. <view class="container">
3.  
4. <text class="win-text">你已經(jīng)獲勝了</text>
5. <text class="win-num">{{winNum}}次</text>
6.  
7. <view class="result">
8. <image src="{{imgAi}}" class="imgAi"></image>
9. <text class="notice" >{{notice}}</text>
10. <image src="{{imgUser}}" class="imgUser"></image>
11. </view>
12.  
13. <view class="item">
14.  
15. <text class="notice-punches">出拳吧，少年~</text>
16.  
17. <block wx:for="{{srcs}}" wx:key="*this">
18. <view class="img-item" id="{{index}}" >
19. <image src="{{item}}" class="img-size" bindtap="userChooseImg"></image>
20. </view>
21. </block>
22.  
23. <button class="btn-again" bindtap="again">再來！</button>
24.  
25. </view>
26.  
27. </view>

index.js 的代碼如下：

1. //index.js
2. //獲取應用實例
3. var numAi = 0;
4. var timer;
5. Page({
6. data: {
7. srcs: [
8. '/pages/images/shiyou.jpg',
9. '/pages/images/jiandao.jpg',
10. '/pages/images/bu.jpg',
11. ],
12. imgAi: '', // 電腦隨機顯示的圖片
13. imgUser: '/pages/images/wenhao.jpg', // 用戶選中的圖片
14. notice: '', // 猜拳對比結(jié)果
15. winNum: wx.getStorageSync('winNum'), //用戶猜拳贏的次數(shù)
16. btnpunches: false, // 是否點擊出拳
17. },
18.  
19. onLoad: function () {
20. this.timerGo();
21. },
22.  
23. //設置電腦每間隔0.2s隨機顯示石頭剪刀布
24. timerGo() {
25. timer = setInterval(this.change, 200);
26. },
27.  
28. //設置電腦隨機顯示石頭剪刀布
29. change() {
30.  
31. if (numAi >= 3) {
32. numAi = 0;
33. }
34. this.setData({
35. imgAi: this.data.srcs[parseInt(Math.random() * 3)],
36. })
37. },
38.  
39. //當用戶點擊下面方框的石頭剪刀布，將用戶數(shù)據(jù)設置為對用的圖片
40. userChooseImg(e) {
41.  
42. if (this.data.btnpunches == true) {
43. return;
44. }
45.  
46. var num = this.data.winNum;
47.  
48. this.setData({
49. notice: '你輸了',
50. btnpunches: true,
51. })
52.  
53. if (e.currentTarget.offsetLeft == 155) {
54. this.setData({
55. imgUser: '/pages/images/shiyou.jpg',
56. })
57. //清除計時器
58. clearInterval(timer);
59. if (this.data.imgAi == '/pages/images/jiandao.jpg') {
60. num++;
61. wx.setStorageSync('winNum', num)
62. this.setData({
63. notice: '你贏了',
64. winNum: num,
65. })
66. }
67.  
68. } else if (e.currentTarget.offsetLeft == 280) {
69. this.setData({
70. imgUser: '/pages/images/jiandao.jpg',
71. })
72. //清除計時器
73. clearInterval(timer);
74. if (this.data.imgAi == '/pages/images/bu.jpg') {
75.  
76. num++;
77. wx.setStorageSync('winNum', num)
78. this.setData({
79. notice: '你贏了',
80. winNum: num,
81. })
82. }
83.  
84. } else {
85. this.setData({
86. imgUser: '/pages/images/bu.jpg',
87. })
88. //清除計時器
89. clearInterval(timer);
90. if (this.data.imgAi == '/pages/images/shitou.jpg') {
91.  
92. num++;
93. wx.setStorageSync('winNum'