原创:微信小程序源码解说:石头剪刀布(附源码下载)
我的博客:来源链接
昨天看有个石头剪刀布的练习,就拿出来做了一下,布局的代码浪费了很多时间,果然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
<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
/*底*/
.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:;
} /*展示出拳结果*/
.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:;
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:;
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资源下载:
小程序-石头剪刀布
原创:微信小程序源码解说:石头剪刀布(附源码下载)的更多相关文章
- 检测微信小程序是否被反编译获取源码
众所周知,微信小程序的代码安全性很弱,很容易被别人反编译获取源码.我自己的小程序也被别人反编译拿到源码还上线了,非常无语. 既然客户端不好防范,服务端还是可以做点手脚的. 小程序的Referer是不可 ...
- 微信小程序自动化测试最佳实践(附 Python 源码)
本文为霍格沃兹测试学院测试大咖公开课<微信小程序自动化测试>图文整理精华版. 随着微信小程序的功能和生态日益完善,很多公司的产品业务形态逐渐从 App 延升到微信小程序.微信公众号等.小程 ...
- ESA2GJK1DH1K微信小程序篇: 测试微信小程序扫描Air202上面的二维码绑定设备,并通过MQTT控制设备
前言 一,微信小程序篇小程序下载(该功能为小程序篇基础功能源码) 实现功能概要 微信小程序通过扫描GPRS上的二维码,绑定GPRS设备.然后使用小程序通过GPRS远程控制开发板上的继电器, 远程显示单 ...
- 微信小程序开发之普通链接二维码
本文主要介绍扫普通链接二维码打开小程序, 详情请看官方文档https://mp.weixin.qq.com/debug/wxadoc/introduction/qrcode.html 配置普通链接二维 ...
- 原创:微信小程序开发要点总结
废话不多少,下面是对我从开发微信小程序的第一步开始到发布的总结,觉得对您有帮助的话,可以赞赏下,以对我表示鼓励. 一:首先注册登录微信公众平台,这个平台很重要,以后查文档全在上面看.https://m ...
- 微信小程序初探(二):阅读官方demo源码
阅读demo有助于理解逻辑,而且demo源码中应该包含了框架开发人员想要表达的意思的精华,先从app.js着手来阅读. 附带贴下说明: https://mp.weixin.qq.com/debug/w ...
- 微信小程序 跳一跳 外挂 C# winform源码
昨天微信更新了,出现了一个小游戏“跳一跳”,玩了一下 赶紧还蛮有意思的 但纯粹是拼手感的,玩了好久,终于搞了个135分拿了个第一名,没想到过一会就被朋友刷下去了,最高的也就200来分把,于是就想着要是 ...
- [原创]微信小程序 实现 圆环 百分百效果
1.最终效果 2.技术点:a. css3 clip-path , b.根据角度和直边计算另一个直边的长度 3.实现思路: a.3个层(灰色圆形层, 红色圆形层,白色圆形层) ,其中灰色和红色层大小一 ...
- 原创:微信小程序如何使用自定义组件
本博文是通过实际开发中的一个实例来讲解自定义组件的使用. 第一步:新建自定义组件目录,如图,我新建了个componts和tabList目录,然后右键tabList目录选择新建compont取名为tab ...
- 微信小程序开发工具(0.9.092300)下载地址,分享给没有公众号的小伙伴
目前最新的v0.9.092300,不需要填AppID就能直接开发,也不需要破解了. OSX版本.WIN64.WIN32下载地址: http://pan.baidu.com/s/1qXOdkgG
随机推荐
- Python 比较两个字符串大小
python 2中,有cmp(a,b)函数,用于比较两个字符串的大小. 如 >>>a='abc' >>>b='abd' >>>print cmp( ...
- 【转】Web测试方法
看到好文章,拿过来给大家分享分享! 一.输入框 1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数字.空或者空格.特殊字符“~!@#¥%……&*?[]{}”特别要注意单引号和&am ...
- 为什么要重写hashcode() 方法
Java中的集合(Collection)有两类,一类是List,再有一类是Set. 前者集合内的元素是有序的,元素可以重复:后者元素无序,但元素不可重复. 那么我们怎么判断两个元素是否重复呢? 这就是 ...
- 浏览器访问Servlet
浏览器访问Servlet1.指定一个Servlet路径( 在web.xml : <servlet> ...
- Kosaraju 算法检测有向图的强连通性
给定一个有向图 G = (V, E) ,对于任意一对顶点 u 和 v,有 u --> v 和 v --> u,亦即,顶点 u 和 v 是互相可达的,则说明该图 G 是强连通的(Strong ...
- Google分布式构建软件之四:分发构建结果
注:本文英文原文在google开发者工具组的博客上[需要FQ],以下是我的翻译,欢迎转载,但请尊重作者版权,注名原文地址. 之前的文章,介绍了Google在分布式构建软件过程中,如何把构建过程分发到许 ...
- MySQL MVCC(多版本并发控制)
概述 为了提高并发MySQL加入了多版本并发控制,它把旧版本记录保存在了共享表空间(undolog),当事务提交之后将重做日志写入磁盘(前提innodb_flush_log_at_trx_commit ...
- shell使用攻略
shell 是什么 ~ $ ls /bin/*sh /bin/bash /bin/csh /bin/ksh /bin/sh /bin/tcsh /bin/zsh 是什么 kernel shell 命令 ...
- EF:split your EDMX file into multiple diagrams
我们可以把一个EDMX文件划分为多个类图: 1.在VS中打开EDMX设计器: 2.切换到“模型浏览器”属性设置窗口: 3.在diagrams上右键菜单中选择“添加新的关系图”: 4.在原来的关系图上可 ...
- 日历组件 原生js
自己基于原生js编写的日历组件 git地址: https://github.com/lihefen/calendar.git demo : https://lihefen.github.io/cale ...