查看: 1557|回复: 5

微信小程序–猜拳小游戏

[复制链接]
发表于 2019-8-29 08:54:03 | 显示全部楼层 |阅读模式
小游戏页面效果:

20161128165744_99724.png
20161128165744_31121.png

20161128165744_47487.png

20161128165745_76266.png


页面布局index.wxml

  1. <!--pages/game/index.wxml-->
  2. <view hidden="{{progressHidden}}" class="progress">
  3. <progress percent="{{percent}}" show-info active />
  4. <text>资源加载中...</text>
  5. </view>
  6. <view hidden="{{stageHidden}}" class="stage">
  7. <view class="score ">
  8. <view>您已经获胜<view class="win-num">{{winNum}}</view>次!</view>
  9. <!--<view>连续获胜<view style="{{winNumAnimation}}" class="win-num">{{successionWinNum}}</view>次!</view>-->
  10. </view>
  11. <view class="choice flex space-between">
  12. <image bindtap="play" data-val='1' src="http://ac-w38tecoi.clouddn.com/c059085d155df23dea6d.png"></image>
  13. <image bindtap="play" data-val='2' src="http://ac-w38tecoi.clouddn.com/30eadef2395eb77cbafb.png"></image>
  14. <image bindtap="play" data-val='3' src="http://ac-w38tecoi.clouddn.com/79258cd700140855155d.png"></image>
  15. </view>
  16. <view style="{{sayWordsAnimation}}"  class="say-words">{{sayWords}}</view>
  17. <view class="result">
  18. <view class="choice flex space-between">
  19. <image src="{{playerImg}}"></image>
  20. <view class="winOrlose">{{winOrlose}}</view>
  21. <image src="{{pcImg}}"></image>
  22. </view>
  23. </view>
  24. <view class="score ">
  25. <view>连续获胜<view style="{{winNumAnimation}}" class="win-num">{{successionWinNum}}</view>次!</view>
  26. </view>
  27. <view hidden="{{maskHidden}}" class="mask"></view>
  28. </view>
复制代码


javascript代码片段

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


游戏页面全局data属性;

  1. getResult:function(a,b){//获取猜拳结果
  2.       /*
  3.       定义剪刀==1,石头==2,布==3
  4.       a为玩家的选择,b为电脑随机生成,c为差值结果
  5.       */
  6.       var winOrlose, c = a-b;
  7.       var state={
  8.         win:false,
  9.         lose:false,
  10.         draw:false
  11.       };
  12.       if(c==-2||c==1){
  13.         state.win = true;//赢
  14.       }else if(c==-1||c==2){
  15.         state.lose = true ;//输
  16.       }else{
  17.         state.draw = true;//平局
  18.       }
  19.       return state;
  20.     }
复制代码


游戏核心算法,草图如下:

  1. 剪刀  石头  布
  2. 1     2     3

  3. ab  a-b  result
  4. 12  -1   l   
  5. 13  -2   w
  6. 11  0    d
  7. 21  1    w
  8. 23  -1   l
  9. 22  0    d
  10. 31  2    l
  11. 32  1    w
  12. 33  0    d

  13. l -1,2; //输结果(lose)
  14. w -2,1; //赢结果(win)
  15. d 0     //平局结果(draw)
复制代码


根据连击次数,显示不同的称号


  1. setSayWords:function(successionNum){//设置不同的称号用语
  2.       var that = this;
  3.       var sayword = "";
  4.       if(successionNum <= 0){
  5.         sayword="请出拳吧,骚年!"
  6.       }else if(successionNum>0&&successionNum<=3){
  7.         sayword="不错哟,骚年!"
  8.       }else if(successionNum>3&&successionNum<=5){
  9.         sayword="骚年乃诸葛在世也!"
  10.       }else{
  11.         sayword="超神啦!^_^"
  12.       }
  13.       that.setData({
  14.         sayWords:sayword,
  15.         sayWordsAnimation:"transform: scale(1.4)"
  16.       });
  17.       setTimeout(function(){//移除动画样式
  18.         that.setData({
  19.           sayWordsAnimation:""
  20.         });
  21.       },200);
  22.     },
复制代码
3、微信小程序开发工具还处于测试阶段,所以期间也遇到了几点小问题,现在把踩过的坑简单说明如下

a、图片src值清除时加空格在开发工具上好使,真机上不行,看来只能用透明图填充了或者动态hidden

b、wx.showToast({

title: ‘加载中…’,

icon: ‘loading’

});

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


源码下载



游客,如果您要下载源码或者查看隐藏内容请回复

回复

使用道具 举报

发表于 2019-8-30 14:25:20 | 显示全部楼层
很不错,真的很不错
回复 支持 反对

使用道具 举报

发表于 2019-8-31 09:11:53 手机频道 | 显示全部楼层
试一试,是直接用小程序额
回复 支持 反对

使用道具 举报

发表于 2019-10-30 16:33:12 | 显示全部楼层
想要源码谢谢
回复 支持 反对

使用道具 举报

发表于 2019-11-11 14:49:05 | 显示全部楼层
那个地方会跟你说唐
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表