沉沙
2018-06-26
来源 :
阅读 1791
评论 0
摘要:网络游戏开发过程中,对消息的处理至关重要,消息分为两种类型:异步和同步。本文针对同步消息提供一种处理方式。希望阅读本篇文章以后大家有所收获,帮助大家对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频道!
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了

请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号