Toolbar button 1-7

docs/personalization.md

@@ -594,7 +594,7 @@ this.myfunc = function(x) {
 </div>
 ```
 3. 在editor.html中的statusBar（323行起），仿照第二点同样添加；这一项如果不进行则会地图编辑器报错。editor-mobile.html同理。
-4. 使用便捷PS工具，打开icons.png，新增一行并将魔力的图标P上去；记下其索引比如30（从0开始数）。
+4. 使用便捷PS工具，打开icons.png，新增一行并将魔力的图标P上去；记下其索引比如37（从0开始数）。
 5. 在main.js的this.statusBar中增加图片、图标和内容的定义。
 ``` js
 this.statusBar = {

index.html

@@ -118,6 +118,13 @@
         <img class="tools" id='img-save'>
         <img class="tools" id='img-load'>
         <img class="tools" id='img-settings'>
+        <img class="tools" id='img-btn1' style='display:none'>
+        <img class="tools" id='img-btn2' style='display:none'>
+        <img class="tools" id='img-btn3' style='display:none'>
+        <img class="tools" id='img-btn4' style='display:none'>
+        <img class="tools" id='img-btn5' style='display:none'>
+        <img class="tools" id='img-btn6' style='display:none'>
+        <img class="tools" id='img-btn7' style='display:none'>
         <p class="statusLabel tools" id="hard"></p>
     </div>
     <div id="gameDraw">

libs/control.js

@@ -2778,7 +2778,8 @@ control.prototype.triggerStatusBar = function (name) {
     if (name!='hide') name='show';
     var statusItems = core.dom.status;
     var toolItems = core.dom.tools;
-    if (name == 'hide') {
+    core.domStyle.showStatusBar = name == 'show';
+    if (!core.domStyle.showStatusBar) {
         for (var i = 0; i < statusItems.length; ++i)
             statusItems[i].style.opacity = 0;
         for (var i = 0; i < toolItems.length; ++i)
@@ -2787,10 +2788,7 @@ control.prototype.triggerStatusBar = function (name) {
     else {
         for (var i = 0; i < statusItems.length; ++i)
             statusItems[i].style.opacity = 1;
-        for (var i = 0; i < toolItems.length; ++i)
-            toolItems[i].style.display = 'block';
-        if (core.domStyle.screenMode != 'vertical')
-            core.statusBar.image.shop.style.display = 'none';
+        this.setToolbarButton(false);
     }
 }
 
@@ -2872,6 +2870,33 @@ control.prototype.updateGlobalAttribute = function (name) {
     }
 }
 
+////// 改变工具栏为按钮1-7 //////
+control.prototype.setToolbarButton = function (useButton) {
+    if (!core.domStyle.showStatusBar) return;
+
+    if (!core.isset(useButton)) useButton = core.domStyle.toolbarBtn;
+    if (core.domStyle.screenMode != 'vertical') useButton = false;
+
+    core.domStyle.toolbarBtn = useButton;
+    if (useButton) {
+        ["book","fly","toolbox","shop","save","load","settings"].forEach(function (t) {
+            core.statusBar.image[t].style.display = 'none';
+        });
+        ["btn1","btn2","btn3","btn4","btn5","btn6","btn7"].forEach(function (t) {
+            core.statusBar.image[t].style.display = 'block';
+        })
+    }
+    else {
+        ["btn1","btn2","btn3","btn4","btn5","btn6","btn7"].forEach(function (t) {
+            core.statusBar.image[t].style.display = 'none';
+        });
+        ["book","fly","toolbox","shop","save","load","settings"].forEach(function (t) {
+            core.statusBar.image[t].style.display = 'block';
+        });
+        core.statusBar.image.shop.style.display = core.domStyle.screenMode != 'vertical' ? "none":"block";
+    }
+}
+
 ////// 屏幕分辨率改变后重新自适应 //////
 control.prototype.resize = function(clientWidth, clientHeight) {
     if (main.mode=='editor')return;
@@ -2934,6 +2959,8 @@ control.prototype.resize = function(clientWidth, clientHeight) {
     var zoom = (ADAPT_WIDTH - width) / 4.22;
     var aScale = 1 - zoom / 100;
 
+    core.domStyle.toolbarBtn = false;
+
     // 移动端
     if (width < CHANGE_WIDTH) {
         if(width < ADAPT_WIDTH){
@@ -3172,7 +3199,7 @@ control.prototype.resize = function(clientWidth, clientHeight) {
         {
             imgId: 'shop',
             rules:{
-                display: shopDisplay
+                display: shopDisplay && core.domStyle.showStatusBar
             }
         },
         {
@@ -3262,6 +3289,7 @@ control.prototype.resize = function(clientWidth, clientHeight) {
         },
     ]
     core.domRenderer();
+    this.setToolbarButton();
 }
 
 ////// 渲染DOM //////

libs/core.js

@@ -74,6 +74,8 @@ function core() {
     this.domStyle = {
         styles: [],
         scale: 1.0,
+        toolbarBtn: false,
+        showStatusBar: true,
     }
     this.bigmap = {
         canvas: ["bg", "event", "event2", "fg", "damage", "route"],

libs/events.js

@@ -91,6 +91,9 @@ events.prototype.initGame = function () {
 ////// 游戏开始事件 //////
 events.prototype.startGame = function (hard, seed, route, callback) {
 
+    main.dom.levelChooseButtons.style.display='none';
+    main.dom.startButtonGroup.style.display='none';
+
     var start = function () {
         console.log('开始游戏');
         core.resetStatus(core.firstData.hero, hard, null, null, core.initStatus.maps);

main.js

@@ -98,7 +98,14 @@ function main() {
             'shop': document.getElementById("img-shop"),
             'save': document.getElementById("img-save"),
             'load': document.getElementById("img-load"),
-            'settings': document.getElementById("img-settings")
+            'settings': document.getElementById("img-settings"),
+            'btn1': document.getElementById("img-btn1"),
+            'btn2': document.getElementById("img-btn2"),
+            'btn3': document.getElementById("img-btn3"),
+            'btn4': document.getElementById("img-btn4"),
+            'btn5': document.getElementById("img-btn5"),
+            'btn6': document.getElementById("img-btn6"),
+            'btn7': document.getElementById("img-btn7")
         },
         'icons': {
             'floor': 0,
@@ -132,6 +139,13 @@ function main() {
             'erase': 27,
             'empty': 28,
             'exit': 29,
+            'btn1': 30,
+            'btn2': 31,
+            'btn3': 32,
+            'btn4': 33,
+            'btn5': 34,
+            'btn6': 35,
+            'btn7': 36
         },
         'floor': document.getElementById('floor'),
         'name': document.getElementById('name'),
@@ -386,7 +400,9 @@ main.dom.data.ontouchend = function (e) {
 }
 
 ////// 点击状态栏中的怪物手册时 //////
-main.statusBar.image.book.onclick = function () {
+main.statusBar.image.book.onclick = function (e) {
+    e.stopPropagation();
+
     if (core.isset(core.status.replay) && core.status.replay.replaying) {
         core.triggerReplay();
         return;
@@ -402,7 +418,8 @@ main.statusBar.image.book.onclick = function () {
 }
 
 ////// 点击状态栏中的楼层传送器/装备栏时 //////
-main.statusBar.image.fly.onclick = function () {
+main.statusBar.image.fly.onclick = function (e) {
+    e.stopPropagation();
 
     // 播放录像时
     if (core.isset(core.status.replay) && core.status.replay.replaying) {
@@ -427,7 +444,8 @@ main.statusBar.image.fly.onclick = function () {
 }
 
 ////// 点击状态栏中的工具箱时 //////
-main.statusBar.image.toolbox.onclick = function () {
+main.statusBar.image.toolbox.onclick = function (e) {
+    e.stopPropagation();
 
     if (core.isset(core.status.replay) && core.status.replay.replaying) {
         core.rewindReplay();
@@ -445,7 +463,8 @@ main.statusBar.image.toolbox.onclick = function () {
 }
 
 ////// 双击状态栏中的工具箱时 //////
-main.statusBar.image.toolbox.ondblclick = function () {
+main.statusBar.image.toolbox.ondblclick = function (e) {
+    e.stopPropagation();
 
     if (core.isset(core.status.replay) && core.status.replay.replaying) {
         core.rewindReplay();
@@ -458,7 +477,8 @@ main.statusBar.image.toolbox.ondblclick = function () {
 }
 
 ////// 点击状态栏中的快捷商店时 //////
-main.statusBar.image.shop.onclick = function () {
+main.statusBar.image.shop.onclick = function (e) {
+    e.stopPropagation();
 
     if (core.isset(core.status.replay) && core.status.replay.replaying) {
         core.bookReplay();
@@ -470,7 +490,8 @@ main.statusBar.image.shop.onclick = function () {
 }
 
 ////// 点击状态栏中的存档按钮时 //////
-main.statusBar.image.save.onclick = function () {
+main.statusBar.image.save.onclick = function (e) {
+    e.stopPropagation();
 
     if (core.isset(core.status.replay) && core.status.replay.replaying) {
         core.speedDownReplay();
@@ -487,7 +508,8 @@ main.statusBar.image.save.onclick = function () {
 }
 
 ////// 点击状态栏中的读档按钮时 //////
-main.statusBar.image.load.onclick = function () {
+main.statusBar.image.load.onclick = function (e) {
+    e.stopPropagation();
 
     if (core.isset(core.status.replay) && core.status.replay.replaying) {
         core.speedUpReplay();
@@ -504,7 +526,8 @@ main.statusBar.image.load.onclick = function () {
 }
 
 ////// 点击状态栏中的系统菜单时 //////
-main.statusBar.image.settings.onclick = function () {
+main.statusBar.image.settings.onclick = function (e) {
+    e.stopPropagation();
 
     if (core.isset(core.status.replay) && core.status.replay.replaying) {
         core.saveReplay();
@@ -520,6 +543,49 @@ main.statusBar.image.settings.onclick = function () {
         main.core.openSettings(true);
 }
 
+////// 点击工具栏时 //////
+main.dom.toolBar.onclick = function () {
+    if (core.isset(core.status.replay) && core.status.replay.replaying)
+        return;
+    main.core.control.setToolbarButton(!core.domStyle.toolbarBtn);
+}
+
+////// 手机端的按钮1-7 //////
+main.statusBar.image.btn1.onclick = function (e) {
+    e.stopPropagation();
+    main.core.onkeyUp({"keyCode": 49});
+};
+
+main.statusBar.image.btn2.onclick = function (e) {
+    e.stopPropagation();
+    main.core.onkeyUp({"keyCode": 50});
+};
+
+main.statusBar.image.btn3.onclick = function (e) {
+    e.stopPropagation();
+    main.core.onkeyUp({"keyCode": 51});
+};
+
+main.statusBar.image.btn4.onclick = function (e) {
+    e.stopPropagation();
+    main.core.onkeyUp({"keyCode": 52});
+};
+
+main.statusBar.image.btn5.onclick = function (e) {
+    e.stopPropagation();
+    main.core.onkeyUp({"keyCode": 53});
+};
+
+main.statusBar.image.btn6.onclick = function (e) {
+    e.stopPropagation();
+    main.core.onkeyUp({"keyCode": 54});
+};
+
+main.statusBar.image.btn7.onclick = function (e) {
+    e.stopPropagation();
+    main.core.onkeyUp({"keyCode": 55});
+};
+
 ////// 点击“开始游戏”时 //////
 main.dom.playGame.onclick = function () {
     main.dom.startButtons.style.display='none';