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


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 相关文章推荐
window.parent与window.openner区别介绍
Apr 12 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
document.createElement()用法
Mar 13 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
浅谈JavaScript面向对象--继承
Mar 20 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 Javascript
使用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
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
详解前后端分离之VueJS前端
2017/05/24 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
Python 数据结构之旋转链表
2017/02/25 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
Python子类继承父类构造函数详解
2019/02/19 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
犯错检讨书
2014/02/21 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
python Tkinter的简单入门教程
2021/04/11 Python
解决golang在import自己的包报错的问题
2021/04/29 Golang
mysql联合索引的使用规则
2021/06/23 MySQL