原创：微信小程序源码解说：石头剪刀布（附源码下载）

tanglijun 发布于2019-08-05 10:34 / 2612人阅读

摘要：我的博客来源链接昨天看有个石头剪刀布的练习，就拿出来做了一下，布局的代码浪费了很多时间，果然这块的还不是很熟练下面直接上图上代码了。

我的博客：来源链接

昨天看有个石头剪刀布的练习，就拿出来做了一下，布局的代码浪费了很多时间，果然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~
You Lost!";
  
      //判断是否获胜
      if( user == "/pages/image/shitou.png" && ai == "/pages/image/jiandao.png"){
         //获胜后增加次数、改变文字内容、从新缓存获胜次数
         num++;
         str = "Ho~
You Win!";
         wx.setStorageSync("winNum", num);
      };
      if(user == "/pages/image/jiandao.png" && ai == "/pages/image/bu.png"){
         num++;
         str = "Ho~
You Win!";
         wx.setStorageSync("winNum", num);
      };
      if(user== "/pages/image/bu.png" && ai == "/pages/image/shitou.png"){
         num++;
         str = "Ho~
You 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


  
    你已经获胜了{{winNum}}次
    
        
        {{gameOfPlay}}
        
    
  
    
        出拳吧，少年~

.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资源下载：小程序-石头剪刀布

私有云 idc机房托管微信小程序php源码二次浅封装实践【附源码】微信小程序微信小程序支付

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55885.html

原创：微信小程序源码解说：石头剪刀布（附源码下载）

摘要：我的博客来源链接昨天看有个石头剪刀布的练习，就拿出来做了一下，布局的代码浪费了很多时间，果然这块的还不是很熟练下面直接上图上代码了。我的博客：来源链接昨天看有个石头剪刀布的练习，就拿出来做了一下，布局的代码浪费了很多时间，果然CSS这块的还不是很熟练,下面直接上图上代码了。 showImg(https://segmentfault.com/img/bVHhb3?w=483&h=71...

fish 2019-08-21 11:22 评论0 收藏0
原创：微信小程序源码解说：石头剪刀布（附源码下载）

摘要：我的博客来源链接昨天看有个石头剪刀布的练习，就拿出来做了一下，布局的代码浪费了很多时间，果然这块的还不是很熟练下面直接上图上代码了。我的博客：来源链接昨天看有个石头剪刀布的练习，就拿出来做了一下，布局的代码浪费了很多时间，果然CSS这块的还不是很熟练,下面直接上图上代码了。 showImg(https://segmentfault.com/img/bVHhb3?w=483&h=71...

Alliot 2019-08-14 17:03 评论0 收藏0
微信小程序知识总结及案例集锦

摘要：对微信小程序进行全局配置，决定页面文件的路径窗口表现设置网络超时时间设置多等。微信小程序知识总结及案例集锦微信小程序的发展会和微信公众号一样，在某个时间点爆发学习路径微信小程序最好的教程肯定是官方的文档啦，点击这里直达微信官方文档认真跟着文档看一遍，相信有vue前端经验的看下应该就能上手了，然后安装微信小程序开发者工具新建一个quick start项目，了解代码结构，...

sean 2019-08-20 17:45 评论0 收藏0
小程序-厕所雷达

摘要：紧急情况找不到厕所晴天霹雳裤衩一声完喽快来用厕所雷达吧。练习区里看到一个厕所雷达就来做了下，主要还是为了练习小程序控件的基本用法和页面间的交互，依旧让我感到头疼，不过比上次的石头剪刀布好了很多了。来自微信小程序联盟紧急情况~ 找不到厕所？晴天霹雳裤衩一声？完喽快来用厕所雷达吧~。作为一个优秀的楼主，胖子我不仅写了代码，连广告次都想好了，哇咔咔咔~~~~ 厕所找的快，排的才痛快...

13651657101 2019-08-21 11:28 评论0 收藏0
小程序-厕所雷达

摘要：紧急情况找不到厕所晴天霹雳裤衩一声完喽快来用厕所雷达吧。练习区里看到一个厕所雷达就来做了下，主要还是为了练习小程序控件的基本用法和页面间的交互，依旧让我感到头疼，不过比上次的石头剪刀布好了很多了。来自微信小程序联盟紧急情况~ 找不到厕所？晴天霹雳裤衩一声？完喽快来用厕所雷达吧~。作为一个优秀的楼主，胖子我不仅写了代码，连广告次都想好了，哇咔咔咔~~~~ 厕所找的快，排的才痛快...

CKJOKER 2019-08-05 10:36 评论0 收藏0