摘要:网络游戏开发过程中,对消息的处理至关重要,消息分为两种类型:异步和同步。本文针对同步消息提供一种处理方式。希望阅读本篇文章以后大家有所收获,帮助大家对HTML5的理解更加深入。
网络游戏开发过程中,对消息的处理至关重要,消息分为两种类型:异步和同步。本文针对同步消息提供一种处理方式。
管理的核心是建立事件队列,遵守先进先出的规则。原理是将收到的消息优先压入有序队列,队列系统定时更新事件状态。
代码详情:
1. /** 2. * @File: Queue.js 3. * @Description: Queue 4. * 5. * @Author: Pury <szwzjx@gmail.com> 6. * @Version: 0.0.1 7. * @Date: 2016-5-18 8. * 9. * Copyright © 2015 - 2016 pury.org. 10. * All rights reserved. 11. */ 12. 13. var PLib = PLib || {}; 14. 15. /** 16. * Queue 17. * 18. * @class 19. */ 20. function Queue() 21. { 22. this.init(); 23. } 24. 25. Queue.prototype.init = function() 26. { 27. this.mEvent = {}; 28. this.mQuene = []; 29. this.mLength = 0; 30. this.mTimer = null; 31. }; 32. 33. Queue.prototype.push = function(fun, classins, param) 34. { 35. this.mQuene.push({ 36. fun: fun, 37. classins: classins, 38. param: param, 39. flag: false 40. }); 41. 42. console.log(“[Queue.push]: length = ” + this.mQuene.length); 43. }; 44. 45. Queue.prototype.pop = function() 46. { 47. var self = this; 48. 49. if(self.mQuene && self.mQuene.length) 50. { 51. if(self.mQuene[0].flag) 52. { 53. var quene = self.mQuene.shift(); 54. quene = null; 55. console.log(“[Queue.pop]: length = ” + this.mQuene.length); 56. } 57. else 58. { 59. console.error(“[Queue.pop]: flag is false || fun = ” + self.mQuene[0].fun); 60. } 61. } 62. else 63. { 64. console.error(“[Queue.pop]: self.mQuene.length <= 0″); 65. } 66. }; 67. 68. Queue.prototype.update = function() 69. { 70. var self = this; 71. 72. if(self.mQuene && self.mQuene.length) 73. { 74. var quene = self.mQuene[0]; 75. 76. if(!quene.flag) 77. { 78. quene.flag = true; 79. quene.fun.apply(quene.classins, quene.param); 80. } 81. } 82. }; 83. 84. Queue.prototype.start = function() 85. { 86. var self = this; 87. var fun = function() 88. { 89. self.update(); 90. }; 91. 92. self.stop(); 93. self.mLength = 0; 94. self.mTimer = setInterval(fun, 300); 95. }; 96. 97. Queue.prototype.stop = function() 98. { 99. if(this.mTimer) 100. { 101. clearInterval(this.mTimer) 102. this.mTimer = null; 103. } 104. }; 105. 106. Queue.getInstance = function() 107. { 108. if(!Queue.instance) 109. { 110. Queue.instance = new Queue; 111. } 112. 113. return Queue.instance; 114. }; 115. 116. PLib.Queue = Queue.getInstance();
可见,事件系统有四个主要方法:push、pop、start、stop。
使用方法十分简单,其中,start在游戏启动后立刻启动,stop在游戏退出时关闭。
重要的是push和pop操作,push有三个参数:fun指事件触发的方法,classins指作用域,param指附带参数。每一个事件处理完毕后,调用pop方法,剔除过期事件。
测试demo如下:
1. //——————————————– 2. // test 3. //——————————————– 4. 5. PLib.Queue.start(); 6. 7. var handleEvent = function() 8. { 9. setTimeout(PLib.Queue.pop.bind(PLib.Queue), 2000); 10. }; 11. 12. function TestQueue(name) 13. { 14. this.name = name; 15. } 16. 17. TestQueue.prototype.show = function(value) 18. { 19. console.log(this.name + ’: ’ + value); 20. handleEvent(); 21. }; 22. 23. var demo1 = new TestQueue(‘demo1′); 24. var demo2 = new TestQueue(‘demo2′); 25. var demo3 = new TestQueue(‘demo3′); 26. 27. PLib.Queue.push(demo1.show, demo1, ['value1']); 28. PLib.Queue.push(demo2.show, demo2, ['value2']); 29. PLib.Queue.push(demo3.show, demo3, ['value3']);
结果如图:
注意:压入队列的参数param类型为数组,因为此处依赖于触发事件时使用的apply方式,当然,你可以使用call或bind方式来改造。
本文由职坐标整理并发布,了解更多内容,请关注职坐标WEB前端HTML5/CSS3频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号