diff --git a/_server/table/data.comment.js b/_server/table/data.comment.js index f6457473..3e1bacf1 100644 --- a/_server/table/data.comment.js +++ b/_server/table/data.comment.js @@ -63,6 +63,12 @@ var data_comment_c456ea59_6018_45ef_8bcc_211a24c627dc = { "_string": true, "_data": "标题样式:可以改变颜色,也可以写\"display: none\"来隐藏标题" }, + "startButtonsStyle": { + "_leaf": true, + "_type": "textarea", + "_string": true, + "_data": "标题界面按钮的样式;caret-color指的是当前选中项的边框颜色" + }, "levelChoose": { "_leaf": true, "_type": "textarea", diff --git a/libs/actions.js b/libs/actions.js index 3814f333..51eefbab 100644 --- a/libs/actions.js +++ b/libs/actions.js @@ -137,6 +137,7 @@ actions.prototype._sys_onkeyDown = function (e) { return; } } + e.preventDefault(); core.status.holdingKeys.push(e.keyCode); this.pressKey(e.keyCode); } else { @@ -198,6 +199,7 @@ actions.prototype._sys_onkeyUp = function (e) { break; } } + e.preventDefault(); this.keyUp(e.keyCode, e.altKey); } else { if (e.keyCode == 17) core.status.ctrlDown = false; diff --git a/libs/control.js b/libs/control.js index ba8247f5..50d25713 100644 --- a/libs/control.js +++ b/libs/control.js @@ -337,6 +337,8 @@ control.prototype._showStartAnimate_resetDom = function () { control.prototype._showStartAnimate_finished = function (start, callback) { core.dom.startTop.style.display = 'none'; core.dom.startButtonGroup.style.display = 'block'; + main.selectedButton = null; + main.selectButton(0); if (start) core.startGame(); if (callback) callback(); } diff --git a/main.js b/main.js index 18a16b97..e4cf16c4 100644 --- a/main.js +++ b/main.js @@ -204,6 +204,7 @@ main.prototype.init = function (mode, callback) { main.dom.startBackground.src="project/images/"+main.startBackground; main.dom.startLogo.style=main.startLogoStyle; + main.dom.startButtonGroup.style = main.startButtonsStyle; main.levelChoose.forEach(function(value){ var span = document.createElement('span'); span.setAttribute('class','startButton'); @@ -327,6 +328,29 @@ main.prototype.log = function (e) { } } +////// 选项 ////// +main.prototype.selectButton = function (index) { + var select = function (children) { + index = (index + children.length) % children.length; + for (var i = 0;i < children.length; ++i) { + children[i].style.borderColor = 'transparent'; + } + children[index].style.borderColor = main.dom.startButtonGroup.style.caretColor || '#FFD700'; + if (main.selectedButton == index) { + children[index].click(); + } + else { + main.selectedButton = index; + } + } + + if (main.dom.startButtons.style.display == 'block') { + select(main.dom.startButtons.children); + } + else if (main.dom.levelChooseButtons.style.display == 'block') { + select(main.dom.levelChooseButtons.children); + } +} main.prototype.listen = function () { @@ -348,6 +372,16 @@ main.dom.body.onkeydown = function(e) { ////// 在界面上放开某按键时 ////// main.dom.body.onkeyup = function(e) { + if (main.dom.startButtons.style.display == 'block' || main.dom.levelChooseButtons.style.display == 'block') { + if (e.keyCode == 38 || e.keyCode == 33) // up/pgup + main.selectButton((main.selectedButton||0) - 1); + else if (e.keyCode == 40 || e.keyCode == 34) // down/pgdn + main.selectButton((main.selectedButton||0) + 1); + else if (e.keyCode == 67 || e.keyCode == 13 || e.keyCode == 32) // C/Enter/Space + main.selectButton(main.selectedButton); + return; + } + try { if (main.dom.inputDiv.style.display == 'block') return; if (main.core && (main.core.isPlaying() || main.core.status.lockControl)) @@ -649,6 +683,8 @@ main.dom.playGame.onclick = function () { } else { main.dom.levelChooseButtons.style.display='block'; + main.selectedButton = null; + main.selectButton(0); } } diff --git a/project/data.js b/project/data.js index 9469147f..29c59b80 100644 --- a/project/data.js +++ b/project/data.js @@ -72,7 +72,8 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d = "hardLabelColor": "red", "floorChangingBackground": "black", "floorChangingTextColor": "white", - "font": "Verdana" + "font": "Verdana", + "startButtonsStyle": "background-color: #32369F; opacity: 0.85; color: #FFFFFF; border: #FFFFFF 2px solid; caret-color: #FFD700;" }, "firstData": { "title": "魔塔样板", diff --git a/styles.css b/styles.css index a1d6649e..ccdb83cb 100644 --- a/styles.css +++ b/styles.css @@ -117,16 +117,25 @@ } #startButtonGroup { - width: 100%; + width: auto; position: absolute; text-align: center; font-size: 1.4rem; - background-color: #000; - opacity: 0.85; display: none; z-index: 310; bottom: 0; - margin-bottom: 7%; + margin-bottom: 5%; + left: 50%; + transform: translateX(-50%); + padding: 15px 25px; + min-width: 20%; + /* default value */ + background-color: #32369F; + opacity: 0.85; + color: #FFFFFF; + border: #FFFFFF 2px solid; + caret-color: #FFD700; + border-radius: 10px; } #startButtons { @@ -139,15 +148,15 @@ .startButton { width: 100%; - margin: 20px 0; - color: #fff; + margin: 0; font-weight: bold; display: block; cursor: pointer; -} - -.startButton:hover { - color: #ff0000; + padding: 4px 0; + border-color: transparent; + border-width: 2px; + border-style: solid; + border-radius: 6px; } #floorMsgGroup {