【LollipopGo工具】cocos creator,H5游戏多开测试工具
【LollipopGo工具】cocos creator,H5游戏多开测试工具
李海彬
发布于 2019-05-17 15:54:03
发布于 2019-05-17 15:54:03
工具地址：
https://github.com/Golangltd/LollipopGo/tree/master/LollipopGo/src/tool 1.设置：
2. 效果
3.代码
1<!DOCTYPE html>
2<html>
3
4<head>
5 <title>Golang语言社区 LollipopGo</title>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
8 <style type="text/css">
9 ::-webkit-scrollbar {
10 width: 0;
11 height: 0;
12 z-index: -999;
13 }
14
15 body {
16 margin: 0px;
17 padding: 0px;
18 }
19
20 #playerWrap {
21 position: relative;
22 }
23
24 .playerBox {
25 position: relative;
26 margin: 0px;
27 padding: 0px;
28 background-color: rgb(143, 188, 143);
29 float: left;
30 }
31
32 .player {
33 position: absolute;
34 }
35
36 /* #btnRotate {
37 position: absolute;
38 right: 0px;
39 bottom: 0px;
40 width: 100px;
41 height: 50px;
42 font-size: 30px;
43 background-color: cadetblue;
44 color: white;
45 } */
46
47 .btnReload {
48 margin: 10px;
49 }
50
51 .landscape {
52 -webkit-transform: rotate(270deg);
53 transform: rotate(270deg);
54 }
55
56 .portrait {
57 -webkit-transform: rotate(0deg);
58 transform: rotate(0deg);
59 }
60
61 /* modal: */
62
63 .Modal {
64 position: absolute;
65 width: 100%;
66 height: 100%;
67 z-index: 500;
68 top: 0px;
69 left: 0px;
70 color: white;
71 }
72
73 .ModalBg {
74 position: absolute;
75 z-index: 1;
76 width: 100%;
77 height: 100%;
78 background-color: rgba(0, 0, 0, 0.6);
79 }
80
81 .ModalContent {
82 position: absolute;
83 z-index: 2;
84 text-align: center;
85 top: 50%;
86 left: 50%;
87 -webkit-transform: translate(-50%, -50%);
88 -ms-transform: translate(-50%, -50%);
89 transform: translate(-50%, -50%);
90 }
91
92 /* cocos */
93
94 body {
95 cursor: default;
96 color: #888;
97 background-color: #333;
98 display: -webkit-flex;
99 display: flex;
100 -webkit-flex-direction: column;
101 flex-direction: column;
102 height: 100%;
103 /* for firefox */
104 width: 100%;
105 position: absolute;
106 padding: 0px;
107 border: 0px;
108 margin: 0px;
109 }
110
111 /* Remove spin of input type number */
112
113 input::-webkit-outer-spin-button,
114 input::-webkit-inner-spin-button {
115 /* display: none; <- Crashes Chrome on hover */
116 -webkit-appearance: none;
117 margin: 0;
118 /* <-- Apparently some margin are still there even though it's hidden */
119 }
120
121 body,
122 canvas,
123 div {
124 outline: none;
125 -moz-user-select: none;
126 -webkit-user-select: none;
127 -ms-user-select: none;
128 -khtml-user-select: none;
129 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
130 }
131
132 canvas {
133 background-color: rgba(0, 0, 0, 0);
134 }
135
136 .wrapper {
137 position: relative;
138 border: 1px solid #444;
139 background: #222;
140 }
141
142 .toolbar {
143 /*position: absolute;*/
144 /*left: 10px;*/
145 /*top: 10px;*/
146 min-height: 27px;
147 padding: 4px 0px 4px 10px;
148 display: -webkit-flex;
149 display: flex;
150 -webkit-align-items: center;
151 align-items: center;
152 -webkit-flex-direction: row;
153 flex-direction: row;
154 z-index: 999;
155 }
156
157 .toolbar * {
158 font-size: 12px;
159 font-family: /* https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ */
160 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
161 }
162
163 .toolbar .item {
164 display: inline-block;
165 margin-right: 10px;
166 }
167
168 .toolbar select {
169 height: 25px;
170 padding: 0px 0px;
171 box-shadow: none;
172 background-image: none;
173 border: 1px solid #171717;
174 background: #444;
175 color: #aaa;
176 }
177
178 .toolbar select:focus {
179 outline: none;
180 border: 1px solid #09f;
181 }
182
183 .toolbar button {
184 border: 1px solid #171717;
185 border-radius: 2px;
186 text-align: center;
187 padding: 4px 8px;
188 cursor: pointer;
189 color: #bdbdbd;
190 font-weight: bold;
191 background-image: linear-gradient(#5a5a5a, #444);
192 }
193
194 .toolbar button.checked {
195 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
196 color: #09f;
197 background-image: linear-gradient(#333, #222);
198 }
199
200 .toolbar button:focus {
201 outline: none;
202 }
203
204 .toolbar button:active {
205 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
206 color: #888;
207 background-image: linear-gradient(#333, #222);
208 }
209
210 .toolbar input {
211 width: 40px;
212 height: 10px;
213 padding: 4px 4px;
214 box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, 0.3);
215 border: 1px solid #171717;
216 background: #444;
217 color: #aaa;
218 }
219
220 @media screen and (max-width: 760px) {
221 .toolbar {
222 display: none;
223 }
224 .wrapper {
225 border: 0px;
226 position: absolute;
227 top: 0;
228 left: 0;
229 right: 0;
230 bottom: 0;
231 }
232 }
233
234 .stripes span {
235 background-size: 30px 30px;
236 background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
237 animation: animate-stripes 1s linear infinite;
238 }
239
240 @keyframes animate-stripes {
241 0% {
242 background-position: 0 0;
243 }
244 100% {
245 background-position: 60px 0;
246 }
247 }
248
249 /* cocos */
250 </style>
251</head>
252
253<body>
254 <div class="toolbar">
255 <div class="item"><button id="btnRotate">旋 转</button></div>
256 <div class="item">
257 <span style="font-size: small; margin-right: -2px;" class="item">人数:</span>
258 <select id="playerNum">
259 <option value="1">1</option>
260 <option value="2">2</option>
261 <option value="3">3</option>
262 <option value="4">4</option>
263 <option value="5">5</option>
264 <option value="6">6</option>
265 <option value="7">7</option>
266 <option value="8">8</option>
267 <option value="9">9</option>
268 <option value="10">10</option>
269 <option value="11">11</option>
270 <option value="12">12</option>
271 <option value="13">13</option>
272 <option value="14">14</option>
273 </select>
274 </div>
275 <div class="item">
276 <button id="btnTopReload" style="margin-right: -2px;">刷新1</button>
277 <select id="selectReload">
278 <option value="1">1</option>
279 <option value="2">2</option>
280 <option value="3">3</option>
281 <option value="4">4</option>
282 <option value="5">5</option>
283 <option value="6">6</option>
284 <option value="7">7</option>
285 <option value="8">8</option>
286 <option value="9">9</option>
287 <option value="10">10</option>
288 <option value="11">11</option>
289 <option value="12">12</option>
290 <option value="13">13</option>
291 <option value="14">14</option>
292 </select>
293 </div>
294 <div class="item">
295 <span style="margin-right: -2px;">起始uid:</span>
296 <button id="btnSubUid" style="margin-right: -2px">-10</button>
297 <input id="baseUid" type="text" value="1000" style="text-align: center">
298 <button id="btnAddUid" style="margin-left: -2px">+10</button>
299 </div>
300 <div class="item"><button id="btnSettings">设置</button></div>
301 </div>
302 <div id="playerWrap"></div>
303 <!-- 设置界面 -->
304 <div class="Modal" id="setting">
305 <div class="ModalBg"></div>
306 <div class="ModalContent">
307 <div>
308 <span>地址:</span>
309 <input id="baseUrl" type="text" value="http://localhost:7456">
310 </div>
311 <!-- <div style="margin-top: 10px">
312 <span>起始uid:</span>
313 <input id="btnSubUid" type="button" value="-10">
314 <input id="baseUid" type="text" value="1000">
315 <input id="btnAddUid" type="button" value="+10">
316 </div> -->
317 <!-- <div style="margin-top: 10px">
318 <span>玩家数:</span>
319 <input id="playerNum" type="text" value="3">
320 </div> -->
321 <div style="margin-top: 10px">
322 <span>玩家宽:</span>
323 <input id="playerWidth" type="text" value="315">
324 </div>
325 <div style="margin-top: 10px">
326 <span>玩家高:</span>
327 <input id="playerHeight" type="text" value="560">
328 </div>
329 <div style="margin-top: 10px">
330 <span>缩放:</span>
331 <input id="playerScale" type="text" value="1">
332 </div>
333 <div style="margin-top: 10px; text-align: left">
334 <span>刷新:</span>
335 <div id="reloadWrap"></div>
336 </div>
337 <div style="margin-top: 30px">
338 <input type="button" value="保存" style="width: 100px; height: 40px;" onclick="saveSetting(); initView();">
339 <input type="button" value="取消" style="width: 100px; height: 40px;" onclick="$('#setting').hide('normal')">
340 </div>
341 </div>
342 </div>
343</body>
344
345<script type="text/javascript">
346 var sPortrait = '横屏';
347 var sLandscape = '竖屏';
348
349 var oCfg = {};
350 oCfg.baseUrl = 'http://localhost:7456';
351 oCfg.baseUid = Math.floor(Math.random() * 100) * 100;
352 oCfg.orientation = sPortrait;
353 oCfg.playerNum = 2;
354 oCfg.playerScale = 0.4;
355 oCfg.playerWidth = 1280 * oCfg.playerScale;
356 oCfg.playerHeight = 720 * oCfg.playerScale;
357 oCfg.reloadIdx = 1;
358 var DIFFWH = (oCfg.playerWidth - oCfg.playerHeight) / 2;
359
360 function initEvent() {
361 $('#btnRotate').on('click', function() {
362 var oThis = $(this);
363 var sText = oThis.val();
364
365 if (sLandscape == sText) {
366 oCfg.orientation = sPortrait;
367 } else if (sPortrait == sText) {
368 oCfg.orientation = sLandscape;
369 }
370 oThis.val(oCfg.orientation);
371 updateOrientation();
372 });
373 $('#btnSettings').on('click', function() {
374 $('#setting').toggle('normal');
375 });
376 $('#btnSubUid').on('click', function() {
377 var nUid = parseInt($('#baseUid').val());
378 $('#baseUid').val(nUid - 10);
379 saveSetting();
380 initView();
381 });
382 $('#btnAddUid').on('click', function() {
383 var nUid = parseInt($('#baseUid').val());
384 $('#baseUid').val(nUid + 10);
385 saveSetting();
386 initView();
387 });
388 $('#btnRotate').on('mousedown', function() {
389 if (2 === event.button) {
390 $('#setting').toggle('normal');
391 }
392 });
393 $('#setting').on('mousedown', function() {
394 if (2 === event.button) {
395 $(this).toggle('normal');
396 }
397 });
398 $('body').on('click', '.btnReload', function() {
399 var oThis = $(this);
400 var sIdx = oThis.attr('data-idx');
401 var oPlayer = $('.player[data-idx="' + sIdx + '"]');
402 oPlayer.attr('src', oPlayer.attr('src'));
403 });
404 $('#playerNum').on('change', (event) => {
405 saveSetting();
406 initView();
407 });
408 $('#selectReload').on('change', (event) => {
409 saveSetting();
410 var value = parseInt(event.target.value);
411 $('#btnTopReload').text('刷新' + value).trigger('click');
412 });
413 $('#btnTopReload').on('click', function() {
414 var text = $(this).text();
415 var index = text.replace(/[^0-9]/ig, "")
416 var oPlayer = $('.player[data-idx="' + (index - 1) + '"]');
417 oPlayer.attr('src', oPlayer.attr('src'));
418 });
419 }
420
421 function updateOrientation() {
422 if (sPortrait == oCfg.orientation) {
423 $('.player').each(function(i, element) {
424 var oThis = $(element);
425 oThis.removeClass('landscape').addClass('portrait').css('top', 0).css('left', 0);
426 oThis.parent('.playerBox').css('width', oCfg.playerHeight).css('height', oCfg.playerWidth);
427 });
428 } else if (sLandscape == oCfg.orientation) {
429 $('.player').each(function(i, element) {
430 var oThis = $(element);
431 oThis.removeClass('portrait').addClass('landscape').css('top', -DIFFWH).css('left',
432 DIFFWH);
433 oThis.parent('.playerBox').css('width', oCfg.playerWidth).css('height', oCfg.playerHeight);
434 });
435 }
436 }
437
438 function initView() {
439 DIFFWH = (oCfg.playerWidth - oCfg.playerHeight) / 2;
440
441 var sHtmlPlayer = '';
442 var sHtmlReload = '';
443 for (var i = 0; i < oCfg.playerNum; ++i) {
444 sHtmlPlayer += '<div class="playerBox">';
445 sHtmlPlayer += '<iframe class="player" data-idx="' + i + '"></iframe>';
446 sHtmlPlayer += '</div>';
447
448 sHtmlReload += '<input type="button" class="btnReload" data-idx="' + i + '" value="玩家' + i + '">'
449 }
450 $('#playerWrap').html(sHtmlPlayer);
451 $('#reloadWrap').html(sHtmlReload);
452
453 $('.player').each(function(i, element) {
454 var oThis = $(element);
455 var nUid = oCfg.baseUid + i;
456 oThis.attr('src', oCfg.baseUrl + '?acc=' + nUid);
457 oThis.css('width', oCfg.playerHeight).css('height', oCfg.playerWidth);
458 oThis.parent('.playerBox').css('width', oCfg.playerHeight).css('height', oCfg.playerWidth);
459 oThis.attr('frameborder', 'no');
460 });
461
462 updateOrientation();
463 }
464
465 function loadCfgFromLocal() {
466 var sCfg = localStorage.getItem('xmWebDevKit');
467 try {
468 var oCfgTmp = JSON.parse(sCfg);
469 Object.assign(oCfg, oCfgTmp);
470 } catch (error) {}
471 $('#baseUrl').val(oCfg.baseUrl);
472 $('#baseUid').val(oCfg.baseUid);
473 $('#playerNum').val(oCfg.playerNum);
474 $('#btnRotate').val(oCfg.orientation);
475 $('#playerWidth').val(oCfg.playerWidth / oCfg.playerScale);
476 $('#playerHeight').val(oCfg.playerHeight / oCfg.playerScale);
477 $('#playerScale').val(oCfg.playerScale);
478 $('#btnTopReload').text('刷新' + oCfg.reloadIdx);
479 $('#selectReload').val(oCfg.reloadIdx);
480 }
481
482 function saveCfgToLocal() {
483 localStorage.setItem('xmWebDevKit', JSON.stringify(oCfg));
484 }
485
486 function saveSetting() {
487 $('#setting').hide('normal');
488 oCfg.baseUrl = $('#baseUrl').val();
489 oCfg.baseUid = parseInt($('#baseUid').val());
490 oCfg.playerNum = parseInt($('#playerNum').val());
491 oCfg.orientation = $('#btnRotate').val();
492 oCfg.playerWidth = parseFloat($('#playerWidth').val()) * parseFloat($('#playerScale').val());
493 oCfg.playerHeight = parseFloat($('#playerHeight').val()) * parseFloat($('#playerScale').val());
494 oCfg.playerScale = parseFloat($('#playerScale').val());
495 oCfg.reloadIdx = parseFloat($('#selectReload').val());
496
497 saveCfgToLocal();
498 }
499
500 // 入口函数
501 (function() {
502 $('#setting').hide();
503 loadCfgFromLocal();
504 initView();
505 initEvent();
506 // 退出保存配置
507 window.onbeforeunload = () => saveCfgToLocal();
508 })();
509</script>
510
511</html>本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-05-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读