微信小程序 – 猜拳小游戏源码教程

<!--pages/game/index.wxml-->
<view hidden="{{progressHidden}}" class="progress">
    <progress percent="{{percent}}" show-info active />
    <text>资源加载中...</text>
</view>
<view hidden="{{stageHidden}}" class="stage">
    <view class="score ">
        <view>您已经获胜<view class="win-num">{{winNum}}</view>次！</view>
        <!--<view>连续获胜<view style="{{winNumAnimation}}" class="win-num">{{successionWinNum}}</view>次！</view>-->
    </view>
    <view class="choice flex space-between">
        <image bindtap="play" data-val='1' src="http://ac-w38tecoi.clouddn.com/c059085d155df23dea6d.png"></image>
        <image bindtap="play" data-val='2' src="http://ac-w38tecoi.clouddn.com/30eadef2395eb77cbafb.png"></image>
        <image bindtap="play" data-val='3' src="http://ac-w38tecoi.clouddn.com/79258cd700140855155d.png"></image>
    </view>
    <view style="{{sayWordsAnimation}}"  class="say-words">{{sayWords}}</view>
    <view class="result">
        <view class="choice flex space-between">
            <image src="{{playerImg}}"></image>
            <view class="winOrlose">{{winOrlose}}</view>
            <image src="{{pcImg}}"></image>
        </view>
    </view>
    <view class="score ">
        <view>连续获胜<view style="{{winNumAnimation}}" class="win-num">{{successionWinNum}}</view>次！</view>
    </view>
    <view hidden="{{maskHidden}}" class="mask"></view>
</view>

data:{
    percent:0,//加载进度
    stageHidden:true,//游戏页面在资源加载之前隐藏
    //遮罩，防止恶意连续点击剪刀石头布图片；
    //tip:开发工具中wx.showToast(loading)会阻止页面所有事件，
    //但在真机测试中有问题，所以自己加了个阻止事件的遮罩
    maskHidden:true,
    progressHidden:false,//资源加载完进度条隐藏
    winNum:0,//获胜总次数
    successionWinNum:0,//连击次数
    sayWords:"请出拳吧，骚年！",//称号
    winOrlose:"",//结果显示输赢标语
    playerImg:" ",//结果区左侧玩家显示的图片
    pcImg:" ",//结果区右侧玩家显示的图片
    winNumAnimation:'',//动画效果
    sayWordsAnimation:''//动画效果
  },

getResult:function(a,b){//获取猜拳结果
      /*
      定义剪刀==1，石头==2，布==3
      a为玩家的选择，b为电脑随机生成，c为差值结果
      */
      var winOrlose, c = a-b;
      var state={
        win:false,
        lose:false,
        draw:false
      };
      if(c==-2||c==1){
        state.win = true;//赢
      }else if(c==-1||c==2){
        state.lose = true ;//输
      }else{
        state.draw = true;//平局
      }
      return state;
    }

剪刀  石头  布 
 1     2     3
 
ab  a-b  result
12  -1   l   
13  -2   w
11  0    d
21  1    w
23  -1   l
22  0    d
31  2    l
32  1    w
33  0    d

l -1,2; //输结果（lose）
w -2,1; //赢结果（win）
d 0     //平局结果（draw）

setSayWords:function(successionNum){//设置不同的称号用语
      var that = this;
      var sayword = "";
      if(successionNum <= 0){
        sayword="请出拳吧，骚年！"
      }else if(successionNum>0&&successionNum<=3){
        sayword="不错哟，骚年！"
      }else if(successionNum>3&&successionNum<=5){
        sayword="骚年乃诸葛在世也！"
      }else{
        sayword="超神啦！^_^"
      }
      that.setData({
        sayWords:sayword,
        sayWordsAnimation:"transform: scale(1.4)"
      });
      setTimeout(function(){//移除动画样式
        that.setData({
          sayWordsAnimation:""
        });
      },200);
    },