startButtons css

_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",

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;

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();
 }

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);
     }
 }
 

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": "魔塔样板",

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;
+    margin: 0;
-    color: #fff;
     font-weight: bold;
     display: block;
     cursor: pointer;
-}
+    padding: 4px 0;
-
+    border-color: transparent;
-.startButton:hover {
+    border-width: 2px;
-    color: #ff0000;
+    border-style: solid;
+    border-radius: 6px;
 }
 
 #floorMsgGroup {