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


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 相关文章推荐
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
C++中的string类的用法小结
Aug 07 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 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.ini中文版
2006/10/09 PHP
php学习之 数组声明
2011/06/09 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
总结python中pass的作用
2019/02/27 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
小学教育毕业生自荐信
2013/11/18 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
《社戏》教学反思
2016/02/22 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL