微信小程序–剪刀石头布小游戏

小游戏页面效果:


  1. 页面布局index.wxml

    <!--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>

  2. javascript代码片段

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

    游戏页面全局data属性;

    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);
    },

3、微信小程序开发工具还处于测试阶段,所以期间也遇到了几点小问题,现在把踩过的坑简单说明如下

a、图片src值清除时加空格在开发工具上好使,真机上不行,看来只能用透明图填充了或者动态hidden
b、wx.showToast({
        title: ‘加载中…’,
        icon: ‘loading’
      });
在开发工具中弹出后会阻止页面一切操作,在真机上就失效了,还能点击操作元素,解决办法是自己加一个遮罩层


详细代码见github:https://github.com/demi520/wxapp-jsb