内容简介:大家好,我是彬哥,本节给大家讲下LollipopGo v1.0.20190115版本游戏服务器网页调试工具使用说明,抛砖引玉了,主要是针对Go语言游戏服务器网页调试工具使用说明。效果图:每天坚持学习1小时Go语言,大家加油,我是彬哥,下期见!如果文章中不同观点、意见请文章下留言或者关注下方订阅号反馈!
大家好,我是彬哥,本节给大家讲下LollipopGo v1.0.20190115版本游戏服务器网页调试 工具 使用说明,抛砖引玉了,主要是针对 Go 语言游戏服务器网页调试工具使用说明。
效果图:
效果图
步骤一 点击设置 配置链接地址(修改为网页调试地址)
点击设置
链接地址修改
步骤二 配置多屏,点击人数即可
配置多屏
步骤三 上源码
<!DOCTYPE html> <html> <head> <title>Golang语言社区 LollipopGo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script> <style type="text/css"> ::-webkit-scrollbar { width: 0; height: 0; z-index: -999; } body { margin: 0px; padding: 0px; } #playerWrap { position: relative; } .playerBox { position: relative; margin: 0px; padding: 0px; background-color: rgb(143, 188, 143); float: left; } .player { position: absolute; } /* #btnRotate { position: absolute; right: 0px; bottom: 0px; width: 100px; height: 50px; font-size: 30px; background-color: cadetblue; color: white; } */ .btnReload { margin: 10px; } .landscape { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .portrait { -webkit-transform: rotate(0deg); transform: rotate(0deg); } /* modal: */ .Modal { position: absolute; width: 100%; height: 100%; z-index: 500; top: 0px; left: 0px; color: white; } .ModalBg { position: absolute; z-index: 1; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); } .ModalContent { position: absolute; z-index: 2; text-align: center; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* cocos */ body { cursor: default; color: #888; background-color: #333; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; height: 100%; /* for firefox */ width: 100%; position: absolute; padding: 0px; border: 0px; margin: 0px; } /* Remove spin of input type number */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { /* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none; margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ } body, canvas, div { outline: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } canvas { background-color: rgba(0, 0, 0, 0); } .wrapper { position: relative; border: 1px solid #444; background: #222; } .toolbar { /*position: absolute;*/ /*left: 10px;*/ /*top: 10px;*/ min-height: 27px; padding: 4px 0px 4px 10px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-flex-direction: row; flex-direction: row; z-index: 999; } .toolbar * { font-size: 12px; font-family: /* https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ */ -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } .toolbar .item { display: inline-block; margin-right: 10px; } .toolbar select { height: 25px; padding: 0px 0px; box-shadow: none; background-image: none; border: 1px solid #171717; background: #444; color: #aaa; } .toolbar select:focus { outline: none; border: 1px solid #09f; } .toolbar button { border: 1px solid #171717; border-radius: 2px; text-align: center; padding: 4px 8px; cursor: pointer; color: #bdbdbd; font-weight: bold; background-image: linear-gradient(#5a5a5a, #444); } .toolbar button.checked { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5); color: #09f; background-image: linear-gradient(#333, #222); } .toolbar button:focus { outline: none; } .toolbar button:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5); color: #888; background-image: linear-gradient(#333, #222); } .toolbar input { width: 40px; height: 10px; padding: 4px 4px; box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, 0.3); border: 1px solid #171717; background: #444; color: #aaa; } @media screen and (max-width: 760px) { .toolbar { display: none; } .wrapper { border: 0px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } } .stripes span { background-size: 30px 30px; 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); animation: animate-stripes 1s linear infinite; } @keyframes animate-stripes { 0% { background-position: 0 0; } 100% { background-position: 60px 0; } } /* cocos */ </style> </head> <body> <div class="toolbar"> <div class="item"><button id="btnRotate">旋 转</button></div> <div class="item"> <span style="font-size: small; margin-right: -2px;" class="item">人数:</span> <select id="playerNum"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> </select> </div> <div class="item"> <button id="btnTopReload" style="margin-right: -2px;">刷新1</button> <select id="selectReload"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> </select> </div> <div class="item"> <span style="margin-right: -2px;">起始uid:</span> <button id="btnSubUid" style="margin-right: -2px">-10</button> <input id="baseUid" type="text" value="1000" style="text-align: center"> <button id="btnAddUid" style="margin-left: -2px">+10</button> </div> <div class="item"><button id="btnSettings">设置</button></div> </div> <div id="playerWrap"></div> <!-- 设置界面 --> <div class="Modal" id="setting"> <div class="ModalBg"></div> <div class="ModalContent"> <div> <span>地址:</span> <input id="baseUrl" type="text" value="http://localhost:7456"> </div> <!-- <div style="margin-top: 10px"> <span>起始uid:</span> <input id="btnSubUid" type="button" value="-10"> <input id="baseUid" type="text" value="1000"> <input id="btnAddUid" type="button" value="+10"> </div> --> <!-- <div style="margin-top: 10px"> <span>玩家数:</span> <input id="playerNum" type="text" value="3"> </div> --> <div style="margin-top: 10px"> <span>玩家宽:</span> <input id="playerWidth" type="text" value="315"> </div> <div style="margin-top: 10px"> <span>玩家高:</span> <input id="playerHeight" type="text" value="560"> </div> <div style="margin-top: 10px"> <span>缩放:</span> <input id="playerScale" type="text" value="1"> </div> <div style="margin-top: 10px; text-align: left"> <span>刷新:</span> <div id="reloadWrap"></div> </div> <div style="margin-top: 30px"> <input type="button" value="保存" style="width: 100px; height: 40px;" onclick="saveSetting(); initView();"> <input type="button" value="取消" style="width: 100px; height: 40px;" onclick="$('#setting').hide('normal')"> </div> </div> </div> </body> <script type="text/javascript"> var sPortrait = '横屏'; var sLandscape = '竖屏'; var oCfg = {}; oCfg.baseUrl = 'http://localhost:7456'; oCfg.baseUid = Math.floor(Math.random() * 100) * 100; oCfg.orientation = sPortrait; oCfg.playerNum = 2; oCfg.playerScale = 0.4; oCfg.playerWidth = 1280 * oCfg.playerScale; oCfg.playerHeight = 720 * oCfg.playerScale; oCfg.reloadIdx = 1; var DIFFWH = (oCfg.playerWidth - oCfg.playerHeight) / 2; function initEvent() { $('#btnRotate').on('click', function() { var oThis = $(this); var sText = oThis.val(); if (sLandscape == sText) { oCfg.orientation = sPortrait; } else if (sPortrait == sText) { oCfg.orientation = sLandscape; } oThis.val(oCfg.orientation); updateOrientation(); }); $('#btnSettings').on('click', function() { $('#setting').toggle('normal'); }); $('#btnSubUid').on('click', function() { var nUid = parseInt($('#baseUid').val()); $('#baseUid').val(nUid - 10); saveSetting(); initView(); }); $('#btnAddUid').on('click', function() { var nUid = parseInt($('#baseUid').val()); $('#baseUid').val(nUid + 10); saveSetting(); initView(); }); $('#btnRotate').on('mousedown', function() { if (2 === event.button) { $('#setting').toggle('normal'); } }); $('#setting').on('mousedown', function() { if (2 === event.button) { $(this).toggle('normal'); } }); $('body').on('click', '.btnReload', function() { var oThis = $(this); var sIdx = oThis.attr('data-idx'); var oPlayer = $('.player[data-idx="' + sIdx + '"]'); oPlayer.attr('src', oPlayer.attr('src')); }); $('#playerNum').on('change', (event) => { saveSetting(); initView(); }); $('#selectReload').on('change', (event) => { saveSetting(); var value = parseInt(event.target.value); $('#btnTopReload').text('刷新' + value).trigger('click'); }); $('#btnTopReload').on('click', function() { var text = $(this).text(); var index = text.replace(/[^0-9]/ig, "") var oPlayer = $('.player[data-idx="' + (index - 1) + '"]'); oPlayer.attr('src', oPlayer.attr('src')); }); } function updateOrientation() { if (sPortrait == oCfg.orientation) { $('.player').each(function(i, element) { var oThis = $(element); oThis.removeClass('landscape').addClass('portrait').css('top', 0).css('left', 0); oThis.parent('.playerBox').css('width', oCfg.playerHeight).css('height', oCfg.playerWidth); }); } else if (sLandscape == oCfg.orientation) { $('.player').each(function(i, element) { var oThis = $(element); oThis.removeClass('portrait').addClass('landscape').css('top', -DIFFWH).css('left', DIFFWH); oThis.parent('.playerBox').css('width', oCfg.playerWidth).css('height', oCfg.playerHeight); }); } } function initView() { DIFFWH = (oCfg.playerWidth - oCfg.playerHeight) / 2; var sHtmlPlayer = ''; var sHtmlReload = ''; for (var i = 0; i < oCfg.playerNum; ++i) { sHtmlPlayer += '<div class="playerBox">'; sHtmlPlayer += '<iframe class="player" data-idx="' + i + '"></iframe>'; sHtmlPlayer += '</div>'; sHtmlReload += '<input type="button" class="btnReload" data-idx="' + i + '" value="玩家' + i + '">' } $('#playerWrap').html(sHtmlPlayer); $('#reloadWrap').html(sHtmlReload); $('.player').each(function(i, element) { var oThis = $(element); var nUid = oCfg.baseUid + i; oThis.attr('src', oCfg.baseUrl + '?acc=' + nUid); oThis.css('width', oCfg.playerHeight).css('height', oCfg.playerWidth); oThis.parent('.playerBox').css('width', oCfg.playerHeight).css('height', oCfg.playerWidth); oThis.attr('frameborder', 'no'); }); updateOrientation(); } function loadCfgFromLocal() { var sCfg = localStorage.getItem('xmWebDevKit'); try { var oCfgTmp = JSON.parse(sCfg); Object.assign(oCfg, oCfgTmp); } catch (error) {} $('#baseUrl').val(oCfg.baseUrl); $('#baseUid').val(oCfg.baseUid); $('#playerNum').val(oCfg.playerNum); $('#btnRotate').val(oCfg.orientation); $('#playerWidth').val(oCfg.playerWidth / oCfg.playerScale); $('#playerHeight').val(oCfg.playerHeight / oCfg.playerScale); $('#playerScale').val(oCfg.playerScale); $('#btnTopReload').text('刷新' + oCfg.reloadIdx); $('#selectReload').val(oCfg.reloadIdx); } function saveCfgToLocal() { localStorage.setItem('xmWebDevKit', JSON.stringify(oCfg)); } function saveSetting() { $('#setting').hide('normal'); oCfg.baseUrl = $('#baseUrl').val(); oCfg.baseUid = parseInt($('#baseUid').val()); oCfg.playerNum = parseInt($('#playerNum').val()); oCfg.orientation = $('#btnRotate').val(); oCfg.playerWidth = parseFloat($('#playerWidth').val()) * parseFloat($('#playerScale').val()); oCfg.playerHeight = parseFloat($('#playerHeight').val()) * parseFloat($('#playerScale').val()); oCfg.playerScale = parseFloat($('#playerScale').val()); oCfg.reloadIdx = parseFloat($('#selectReload').val()); saveCfgToLocal(); } // 入口函数 (function() { $('#setting').hide(); loadCfgFromLocal(); initView(); initEvent(); // 退出保存配置 window.onbeforeunload = () => saveCfgToLocal(); })(); </script> </html>
每天坚持学习1小时Go语言,大家加油,我是彬哥,下期见!如果文章中不同观点、意见请文章下留言或者关注下方订阅号反馈!
社区交流群:221273219
Golang语言社区论坛 :
LollipopGo游戏服务器地址:
https://github.com/Golangltd/LollipopGo
社区视频课程课件GIT地址:
https://github.com/Golangltd/codeclassGolang语言社区
以上所述就是小编给大家介绍的《LollipopGo开源游戏服务器框架--调试tool使用说明》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
鸟哥的Linux私房菜
鸟哥 / 人民邮电出版社 / 2010-6-28 / 88.00元
本书是最具知名度的Linux入门书《鸟哥的Linux私房菜基础学习篇》的最新版,全面而详细地介绍了Linux操作系统。全书分为5个部分:第一部分着重说明Linux的起源及功能,如何规划和安装Linux主机;第二部分介绍Linux的文件系统、文件、目录与磁盘的管理;第三部分介绍文字模式接口 shell和管理系统的好帮手shell脚本,另外还介绍了文字编辑器vi和vim的使用方法;第四部分介绍了对于系......一起来看看 《鸟哥的Linux私房菜》 这本书的介绍吧!