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


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——表单应用范例
Feb 20 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
js轮播图代码分享
Jul 14 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
JQuery学习总结【一】
Dec 01 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
javascript中闭包closure的深入讲解
Mar 03 Javascript
ajax jquery实现页面某一个div的刷新效果
Mar 04 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
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
用Python生成器实现微线程编程的教程
2015/04/13 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
python实现SMTP邮件发送功能
2020/06/16 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
在家更换处方镜片:Lensabl
2019/05/01 全球购物
struct与class的区别
2014/02/03 面试题
描述RIP和OSPF区别以及特点
2015/01/17 面试题
计算机应用专业毕业生求职信
2013/10/24 职场文书
园林毕业生自我鉴定范文
2013/12/29 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
教师年度考核评语
2014/04/28 职场文书
ktv好的活动方案
2014/08/17 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
mysql查看表结构的三种方法总结
2022/07/07 MySQL
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers