【LollipopGo工具】cocos creator,H5游戏多开测试工具

工具地址:

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>

本文分享自微信公众号 - Golang语言社区(Golangweb)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-05-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券