|
|
51CTO旗下网站
|
|
移动端

1.6.4 控制剪子、石头、布的快速切换

《微信小程序开发入门精要》第1章微信小程序入门,从本章开始,让我们深入了解微信小程序的原理以及详细的开发过程。本节为大家介绍控制剪子、石头、布的快速切换。

作者:李宁来源:人民邮电出版社|2017-12-13 15:06

【51CTO技术沙龙】10月27日,让我们共同探索AI场景化应用实现之道

1.6.4 控制剪子、石头、布的快速切换

猜拳游戏的核心就是快速切换剪子、石头、布3个图像,当单击“停止”按钮后,会停到其中一个图像上。这里涉及到如下两个动作:

用定时器快速切换图像。

当一开始单击图像下方的按钮时,文本变成了“停止”,当再次单击该按钮后,按钮文本又变成了“开始”,也就是说,一个按钮同时负责开始和停止图像快速切换两个动作。

控制图像快速切换和按钮文本变化两个动作的代码都要写在index.js文件中。首先会将这3个图像文件名存储在一个全局的数组中,并使用定时器快速从这个数组中依次循环获取图像文件名,并将该文件名指定的图像显示到image组件中。修改按钮的文本只需要修改title变量即可。

这里涉及到两个主要变量:imagePath和title。这两个都定义在data对象中,单击按钮会执行guess函数(在index.wxml文件中使用bindtap属性指定按钮的单击事件函数名),该函数也需要在index.js中编写。完整的实现代码如下:

  1. //index.js  
  2. //获取应用实例  
  3. var app = getApp()  
  4. // 在数组中存在三个图像文件名  
  5. var imagePaths = ['../../images/scissors.png', '../../images/stone.png', '../../imag  
  6. es/cloth.png'];  
  7. // 当前图像的索引  
  8. var imageIndex = 0;  
  9. Page({  
  10. data: {  
  11. imagePath: imagePaths[0], // 用于修改image 组件显示图像的变量  
  12. title: '开始', // 用于改变按钮文本的变量  
  13. isRunning:false, // 该变量为true,表示图像正在快速切换  
  14. userInfo: {},  
  15. },  
  16. //事件处理函数  
  17. bindViewTap: function () {  
  18. wx.navigateTo({  
  19. url: '../logs/logs'  
  20. })  
  21. },  
  22. // 定时器要执行的函数  
  23. change: function (e) {  
  24. imageIndex++;  
  25. // 当前图像索引大于最大索引时,重新设为第一个索引值(已达到循环显示图像的目的)  
  26. if (imageIndex > 2) {  
  27. imageIndex = 0;  
  28. }  
  29. // 修改image 组件要显示的图像(改变imagePath 变量的值)  
  30. this.setData(  
  31. {  
  32. imagePath: imagePaths[imageIndex]  
  33. }  
  34. )  
  35. },  
  36. // 单击按钮要执行的函数——单击要执行的函数按钮  
  37. guess: function (e) {  
  38. // 获取isRunning 变量的值  
  39. let isRunning = this.data.isRunning;  
  40. // 根据是否正在快速切换图像,决定如何修改按钮文本,以及是开启定时器,还是移除定时器  
  41. if (!isRunning) {  
  42. this.setData(  
  43. {  
  44. title: '停止',  
  45. isRunning:true  
  46. }  
  47. );  
  48. // 开启定时器(没100 毫秒调用一次change 函数)  
  49. this.timer = setInterval((function () {  
  50. this.change()  
  51. }).bind(this), 100);  
  52. }  
  53. else {  
  54. this.setData(  
  55. {  
  56. title: '开始',  
  57. isRunning:false  
  58. }  
  59. );  
  60. // 移除定时器  
  61. this.timer && clearInterval(this.timer);  
  62. }  
  63. },  
  64. onLoad: function () {  
  65. console.log('onLoad')  
  66. var that = this 
  67. //调用应用实例的方法获取全局数据  
  68. app.getUserInfo(function (userInfo) {  
  69. //更新数据  
  70. that.setData({  
  71. userInfo: userInfo  
  72. })  
  73. })  
  74. }  
  75. }) 

至此,猜拳游戏的代码已全部介绍完毕,现在可以通过左侧的模拟器测试我们的成果了。大家可以单击“开始”按钮,看看图像是否会快速切换,再单击“停止”按钮,看看是否会停止在某个图像上。


喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码

 

51CTO读书频道活动讨论群:365934973
【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

Cisco网络技术教程(第2版)

本书作为思科认证体系中的入门级教材,主要讲述了网络的基本知识和思科设备的基本命令,以及路由、交换等深层次网络知识的入门知识,其体系...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊