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


Posted in Javascript onJanuary 04, 2017

微信小程序 石头剪刀布

昨天看有个石头剪刀布的练习,就拿出来做了一下,布局的代码浪费了很多时间,果然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: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资源下载 小程序-石头剪刀布

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

Javascript 相关文章推荐
jQuery对象和DOM对象相互转化
Apr 24 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
使用JavaScript为一张图片设置备选路径的方法
Jan 04 #Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 #Javascript
AngularJS入门示例之Hello World详解
Jan 04 #Javascript
详解AngularJS验证、过滤器、指令
Jan 04 #Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 #Javascript
javascript 注释代码的几种方法总结
Jan 04 #Javascript
JS数组返回去重后数据的方法解析
Jan 03 #Javascript
You might like
Protoss建筑一览
2020/03/14 星际争霸
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
js实现简单的验证码
2015/12/25 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
幼儿园中秋节活动方案2013
2014/01/29 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
排球赛新闻稿
2015/07/17 职场文书
禁毒心得体会范文
2016/01/15 职场文书
2019广播稿怎么写
2019/04/17 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
Feign调用传输文件异常的解决
2021/06/24 Java/Android
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL