微信小程序 石头剪刀布实例代码

网友投稿 522 2023-11-09

微信小程序 石头剪刀布

微信小程序 石头剪刀布实例代码

昨天看有个石头剪刀布的练习,就拿出来做了一下,布局的代码浪费了很多时间,果然CSS这块的还不是很熟练,下面直接上图上代码了。

.js:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
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:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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:

demo资源- 小程序-石头剪刀布

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

您可能感兴趣的文章:微信小程序进行微信支付的步骤昂述微信小程序-详解微信登陆、微信支付、模板消息微信小程序 实战实例开发流程详细介绍微信小程序 解决swiper不显示图片的方法微信小程序 解决请求服务器手机预览请求不到数据的方法使用DeviceOne实现微信小程序功能详解微信小程序——自定义圆形进度条微信小程序开发探究Android中微信小程序支付倒计时功能JS绘制微信小程序画布时钟JS中微信小程序自定义底部弹出框PHP:微信小程序 微信支付服务端集成实例详解及源码-

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:券商app内容 - 高效、便捷的投资工具
下一篇:微信小程序 LOL 英雄介绍开发实例
相关文章

 发表评论

暂时没有评论,来抢沙发吧~