石头剪刀布php源码,微信小程序 石头剪刀布实例代码
搜索热词
微信小程序 石头剪刀布
昨天看有个石头剪刀布的练习,就拿出来做了一下,布局的代码浪费了很多时间,果然CSS这块的还不是很熟练,下面直接上图上代码了。
.js:
//获取数组中用户的,石头剪刀布相应的图片。
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}}text>次text>
image>
{{gameOfPlay}}text>
image>
view>
出拳吧,少年~text>
image>
view>
block>
view>
再来!button>
view>
view>
.wxss:
/获胜次数/
.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源码,微信小程序 石头剪刀布实例代码相关推荐
- 石头剪刀布php源码,微信小程序中石头剪刀布的实现
这篇文章主要介绍了微信小程序 石头剪刀布实例代码的相关资料,需要的朋友可以参考下 微信小程序 石头剪刀布 昨天看有个石头剪刀布的练习,就拿出来做了一下,布局的代码浪费了很多时间,果然CSS这块的还不是 ...
- 到家服务公司php源码,微信小程序-仿五洲到家商城源码
微信小程序-仿五洲到家商城源码 微信小程序仿五洲到家商城源码是一款精仿五洲到家app界面的小程序源码,适用于各类小程序商城系统,功能及模块均值得借鉴! 对应功能模块 > * 首页(定位成功情况且 ...
- 教育培训学校源码微信小程序源码下载,带课件/习题/活动插件,支持小程序与公众号双版本
这是一款超强大教育培训学校源码 内含超强大超多的功能 大家看文章末的后台管理就能知道到底有多强大了 比如功能有以下等等功能 课程功能,商城管理,多人团购,限时抢购,接龙团,砍价功能,课程团购,课程包 ...
- 基于Springboot+Vue2前后端分离框架的智慧校园系统源码,智慧学校源码+微信小程序+人脸电子班牌
▶ 智慧校园开发环境: 1.使用springboot框架Java+vue2 2.数据库MySQL5.7 3.移动端小程序使用小程序原生语音开发 4.电子班牌固件安卓7.1:使用Java Android ...
- 高端进销存管理系统源码+微信小程序,
Java进销存系统源码带微信小程序 开发语言:JAVA 数据库:MySQL 开发工具:Eclipse 源码类型:全开源,免费分享 进销存系统,支持微信小程序端.电脑端.支持商品扫码.订单商品扫码等. ...
- Java数字化智慧校园平台源码,智慧学校源码+微信小程序+人脸电子班牌
这是一套JAVA语言开发的智慧校园源码,有演示,有文档,源码完整开源,商用级别,可以私信博主. 技术开发环境:Java+springboot+vue+element-ui+mysql 用的是最新的技术 ...
- 微信小程序商城搭建,微信小程序商城源码,微信小程序商城项目
项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序商城系统,前台用户使用小程序,小程序使用微信开发者工具开发:后台管理使用基PP+MySql的B/S架构,开发工具使用phpstor ...
- 漂流瓶php源码,微信小程序之仿微信漂流瓶
[实例简介] 微信小程序之仿微信漂流瓶 [实例截图] [核心代码] a4c6f919-add7-4dc7-bafa-9a884a00f2e3 └── wx_plp ├── app.js ├── app ...
- 微信朋友圈图片对话php源码,微信小程序实现聊天对话(文本、图片)功能
本文实例为大家分享了微信小程序实现聊天对话功能的具体代码,供大家参考,具体内容如下 这是我实际项目线上的代码, 或许有些不足 || 和你的需求不符合. 上图: to_news.wxml {{tabda ...
最新文章
- 如何在Java中生成特定范围内的随机整数?
- jquery 属性操作
- PhotoFiltre Studio X中文版
- 介绍 Spring 3.1 M1 中的缓存功能
- 分治法:归并排序求逆序对
- SQL Server 网络协议和 TDS 端点
- python药店销售数据分析_解析医院药店销售数据,看看Python数据分析结果有什么惊人的发现|python基础教程|python入门|python教程...
- Merry Christmas
- 整数规划_教学 | 线性(整数)规划的若干建模技巧
- 小米手机hbuilder开发者模式
- 迅捷PDF转换器怎样将PDF文件转换为HTML网页
- 子桓说:员工苦不应该,领导苦是咎由自取!
- HTML5之 Microdata微数据
- 【产业互联网周报】容联云下周纽交所挂牌;声网Agora因Clubhouse股价周内涨超30%;贝索斯将卸任亚马逊CEO...
- SEO文章配图自动生成工具软件
- 哇!8款帮你轻松瘦脸的美食
- Django项目中使用第三方登录——支付宝登录
- 前端背景图放置_如何在css中添加背景图?
- 2020年7月最新阿里云服务器优惠卷哪里领?
- 【Python】模块详解/如何安装模块的方法