小程序模板网

微信小程序实例--猜拳游戏

2018-04-25 冒金花

---恢复内容开始---

  最近几天在学习小程序,看了网上的学习视频,于是自己捣鼓着做出了视频里面的小程序。

  这是实现的效果图

  一个小程序页面,一般有三个部分文件组成,index.js 这个文件里面放的是实现小程序的js代码;index.wxml文件里面放的是页面的结构层代码;相当于html,index.wxss放的是样式层代码,相当于css代码。

index.wxml运用的是小程序里面的组件,代码如下:

 

				
  1. <!--index.wxml-->
  2. <view class="container">
  3.  
  4. <text class="win-text">你已经获胜了</text>
  5. <text class="win-num">{{winNum}}次</text>
  6.  
  7. <view class="result">
  8. <image src="{{imgAi}}" class="imgAi"></image>
  9. <text class="notice" >{{notice}}</text>
  10. <image src="{{imgUser}}" class="imgUser"></image>
  11. </view>
  12.  
  13. <view class="item">
  14.  
  15. <text class="notice-punches">出拳吧,少年~</text>
  16.  
  17. <block wx:for="{{srcs}}" wx:key="*this">
  18. <view class="img-item" id="{{index}}" >
  19. <image src="{{item}}" class="img-size" bindtap="userChooseImg"></image>
  20. </view>
  21. </block>
  22.  
  23. <button class="btn-again" bindtap="again">再来!</button>
  24.  
  25. </view>
  26.  
  27. </view>

index.js 的代码如下:

 

				
  1. //index.js
  2. //获取应用实例
  3. var numAi = 0;
  4. var timer;
  5. Page({
  6. data: {
  7. srcs: [
  8. '/pages/images/shiyou.jpg',
  9. '/pages/images/jiandao.jpg',
  10. '/pages/images/bu.jpg',
  11. ],
  12. imgAi: '', // 电脑随机显示的图片
  13. imgUser: '/pages/images/wenhao.jpg', // 用户选中的图片
  14. notice: '', // 猜拳对比结果
  15. winNum: wx.getStorageSync('winNum'), //用户猜拳赢的次数
  16. btnpunches: false, // 是否点击出拳
  17. },
  18.  
  19. onLoad: function () {
  20. this.timerGo();
  21. },
  22.  
  23. //设置电脑每间隔0.2s随机显示石头剪刀布
  24. timerGo() {
  25. timer = setInterval(this.change, 200);
  26. },
  27.  
  28. //设置电脑随机显示石头剪刀布
  29. change() {
  30.  
  31. if (numAi >= 3) {
  32. numAi = 0;
  33. }
  34. this.setData({
  35. imgAi: this.data.srcs[parseInt(Math.random() * 3)],
  36. })
  37. },
  38.  
  39. //当用户点击下面方框的石头剪刀布,将用户数据设置为对用的图片
  40. userChooseImg(e) {
  41.  
  42. if (this.data.btnpunches == true) {
  43. return;
  44. }
  45.  
  46. var num = this.data.winNum;
  47.  
  48. this.setData({
  49. notice: '你输了',
  50. btnpunches: true,
  51. })
  52.  
  53. if (e.currentTarget.offsetLeft == 155) {
  54. this.setData({
  55. imgUser: '/pages/images/shiyou.jpg',
  56. })
  57. //清除计时器
  58. clearInterval(timer);
  59. if (this.data.imgAi == '/pages/images/jiandao.jpg') {
  60. num++;
  61. wx.setStorageSync('winNum', num)
  62. this.setData({
  63. notice: '你赢了',
  64. winNum: num,
  65. })
  66. }
  67.  
  68. } else if (e.currentTarget.offsetLeft == 280) {
  69. this.setData({
  70. imgUser: '/pages/images/jiandao.jpg',
  71. })
  72. //清除计时器
  73. clearInterval(timer);
  74. if (this.data.imgAi == '/pages/images/bu.jpg') {
  75.  
  76. num++;
  77. wx.setStorageSync('winNum', num)
  78. this.setData({
  79. notice: '你赢了',
  80. winNum: num,
  81. })
  82. }
  83.  
  84. } else {
  85. this.setData({
  86. imgUser: '/pages/images/bu.jpg',
  87. })
  88. //清除计时器
  89. clearInterval(timer);
  90. if (this.data.imgAi == '/pages/images/shitou.jpg') {
  91.  
  92. num++;
  93. wx.setStorageSync('winNum'


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24016.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询