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

小游戏页面效果:

页面布局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>

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’

});

在开发工具中弹出后会阻止页面一切操作,在真机上就失效了,还能点击操作元素,解决办法是自己加一个遮罩层

点下在看,小编绩效涨五毛

原文发布于微信公众号 - 蚂蚁开源社区(mayi_zzfriend)

原文发表时间:2019-08-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券