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


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 相关文章推荐
对象的类型:本地对象(1)
Dec 29 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
微信小程序实现简单跑马灯效果
May 26 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 Javascript
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
使用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中对数据库操作的封装
2006/10/09 PHP
PHP+javascript模拟Matrix画面
2006/10/09 PHP
php中实现获取随机数组列表的自定义函数
2015/04/02 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
vscode 远程调试python的方法
2017/12/01 Python
简单了解python关系(比较)运算符
2019/07/08 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
电气自动化自荐信
2013/10/10 职场文书
小学国庆节活动方案
2014/02/11 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书