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

微信小程序 石头剪刀布

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

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

# 微信小程序  # 石头剪刀布  # 石头剪刀布简单实例  # 石头剪刀布实例下载  # 微信小程序进行微信支付的步骤昂述  # 微信小程序-详解微信登陆、微信支付、模板消息  # 微信小程序 实战实例开发流程详细介绍  # 微信小程序 解决swiper不显示图片的方法  # 微信小程序 解决请求服务器手机预览请求不到数据的方法  # 使用DeviceOne实现微信小程序功能  # 详解微信小程序——自定义圆形进度条  # 微信小程序开发探究  # Android中微信小程序支付倒计时功能  # JS绘制微信小程序画布时钟  # JS中微信小程序自定义底部弹出框  # PHP：微信小程序 微信支付服务端集成实例详解及源码下载  # 计时器  # 出拳  # 再来  # 组中  # 有个  # 不是很  # 希望能  # 你已经  # 这块  # 来做  # 谢谢大家  # 则为  # 图上  # 判断是否  # 昨天  # 浪费了  # timerGo  # log  # console  # changeForChoose 

相关文章： 制作网站怎么制作,*游戏网站怎么搭建？  名字制作网站免费,所有小说网站的名字？  如何使用Golang table-driven基准测试_多组数据测量函数效率  如何通过远程VPS快速搭建个人网站？  购物网站制作公司有哪些,哪个购物网站比较好？  如何快速搭建高效香港服务器网站？  外贸公司网站制作哪家好,maersk船公司官网？  C++如何使用std::optional？（处理可选值）  如何用VPS主机快速搭建个人网站？  北京营销型网站制作公司,可以用python做一个营销推广网站吗？  图册素材网站设计制作软件,图册的导出方式有几种？  代购小票制作网站有哪些,购物小票的简要说明？  制作网站外包平台,自动化接单网站有哪些？  建站之星如何助力企业快速打造五合一网站？  利用JavaScript实现拖拽改变元素大小  网站制作和推广的区别,想自己建立一个网站做推广，有什么快捷方法马上做好一个网站？  如何通过VPS建站实现广告与增值服务盈利？  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  广州营销型建站服务商推荐：技术优势与SEO优化解析  淘宝制作网站有哪些,淘宝网官网主页？  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  南平网站制作公司,2025年南平市事业单位报名时间？  如何通过西部数码建站助手快速创建专业网站？  建站之星CMS建站配置指南：模板选择与SEO优化技巧  一键网站制作软件,义乌购一件代发流程？  PHP正则匹配日期和时间(时间戳转换)的实例代码  宝塔建站无法访问？如何排查配置与端口问题？  猪八戒网站制作视频,开发一个猪八戒网站，大约需要多少？或者自己请程序员，需要什么程序员，多少程序员能完成？  网站制作报价单模板图片,小松挖机官方网站报价？  如何彻底卸载建站之星软件？  上海网站制作网站建设公司,建筑电工证网上查询系统入口？  定制建站是什么？如何实现个性化需求？  如何在宝塔面板中创建新站点？  网站视频怎么制作,哪个网站可以免费收看好莱坞经典大片？  如何在Mac上搭建Golang开发环境_使用Homebrew安装和管理Go版本  如何快速搭建高效WAP手机网站吸引移动用户？  c++23 std::expected怎么用 c++优雅处理函数错误返回【详解】  再谈Python中的字符串与字符编码（推荐）  详解jQuery停止动画——stop()方法的使用  如何快速生成ASP一键建站模板并优化安全性？  实例解析angularjs的filter过滤器  ,想在网上投简历，哪几个网站比较好？  建站主机服务器选购指南：轻量应用与VPS配置解析  网站制作壁纸教程视频,电脑壁纸网站？  建站之星安装后如何配置SEO及设计样式？  韩国网站服务器搭建指南：VPS选购、域名解析与DNS配置推荐  股票网站制作软件,网上股票怎么开户？  如何通过二级域名建站提升品牌影响力？  建站之星价格显示格式升级，你的预算足够吗？  TestNG的testng.xml配置文件怎么写