Update Curtain

index.html

@@ -96,10 +96,11 @@
         <img src="images/settings.png" class="tools" id='img-settings'>
         <p class="statusLabel tools" id="hard"></p>
     </div>
+    <div id="curtain"></div>
     <canvas class='gameCanvas' id='bg' width='416' height='416'></canvas>
     <canvas class='gameCanvas' id='event' width='416' height='416'></canvas>
-    <canvas class='gameCanvas' id='hero' width='416' height='416'></canvas>
     <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
+    <canvas class='gameCanvas' id='hero' width='416' height='416'></canvas>
     <canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>
     <canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</canvas>
 </div>

libs/core.js

@@ -87,6 +87,7 @@ function core() {
             'selection': null,
             'ui': null,
         },
+        'curtainColor': null,
         'usingCenterFly':false,
         'openingDoor': null,
 
@@ -475,7 +476,7 @@ core.prototype.keyDown = function(keyCode) {
         case 40:
             core.moveHero('down');
         break;
-        case 13: case 32: case 51: // 快捷键3：飞
+        case 13: case 32: case 67: case 51: // 快捷键3：飞
             // 因为加入了两次的检测机制,从keydown转移到keyup,同时保证位置信息正确,但以下情况会触发作图的bug:
             // 在鼠标的路线移动中使用飞,绿块会滞后一格,显示的位置不对,同时也不会倍以下的代码清除
             if (core.status.heroStop && core.hasItem('centerFly')) {
@@ -491,9 +492,9 @@ core.prototype.keyDown = function(keyCode) {
                     core.status.usingCenterFly = false;
                 } else if (keyCode==51) {
                     core.status.usingCenterFly = true;
-                    var fillstyle = 'rgba(255,0,0,0.5)';
+                    core.setAlpha('ui', 0.5);
-                    if (core.canUseItem('centerFly')) fillstyle = 'rgba(0,255,0,0.5)';
+                    core.fillRect('ui',(12-core.getHeroLoc('x'))*32,(12-core.getHeroLoc('y'))*32,32,32,core.canUseItem('centerFly')?'#00FF00':'#FF0000');
-                    core.fillRect('ui',(12-core.getHeroLoc('x'))*32,(12-core.getHeroLoc('y'))*32,32,32,fillstyle);
+                    core.setAlpha('ui', 1);
                     core.drawTip("请确认当前中心对称飞行器的位置");
                 }
             }
@@ -1600,10 +1601,16 @@ core.prototype.changeFloor = function (floorId, stair, heroLoc, time, callback)
     }
 
     window.setTimeout(function () {
-        // console.log('地图切换到' + floorId);
         core.playSound('floor', 'mp3');
         core.mapChangeAnimate('show', time/2, function () {
-            core.statusBar.floor.innerHTML = core.status.maps[floorId].name;
+
+            // 根据文字判断是否斜体
+            var floorName = core.status.maps[floorId].name;
+            core.statusBar.floor.innerHTML = floorName;
+            if (/^[+-]?\d+$/.test(floorName))
+                core.statusBar.floor.style.fontStyle = 'italic';
+            else core.statusBar.floor.style.fontStyle = 'normal';
+
             core.updateStatusBar();
             core.drawMap(floorId, function () {
                 setTimeout(function() {
@@ -2406,30 +2413,23 @@ core.prototype.hasBetweenAttack = function(x,y) {
 
 core.prototype.setFg = function(color, time, callback) {
     time = time || 750;
-    core.setOpacity('fg', 1);
 
-    var reset = false;
+    if (!core.isset(core.status.curtainColor)) {
-
+        core.status.curtainColor = [0,0,0,0];
-    if (!core.isset(core.status.event.data.currentColor)) {
-        core.status.event.data.currentColor = [0,0,0,0];
     }
 
-    var fromColor = core.status.event.data.currentColor;
+    var fromColor = core.status.curtainColor;
 
-    if (!core.isset(color)) {
+    if (!core.isset(color))
         color = [0,0,0,0];
-        reset = true;
+    if (color.length==3)
-    }
-    if (color.length==3) {
         color.push(1);
-    }
     if (color[3]<0) color[3]=0;
     if (color[3]>1) color[3]=1;
 
     var step=0;
     var changeAnimate = setInterval(function() {
         step++;
-        core.clearMap('fg', 0, 0, 416, 416);
 
         var nowAlpha = fromColor[3]+(color[3]-fromColor[3])*step/25;
         var nowR = parseInt(fromColor[0]+(color[0]-fromColor[0])*step/25);
@@ -2439,19 +2439,13 @@ core.prototype.setFg = function(color, time, callback) {
         if (nowG<0) nowG=0; if (nowG>255) nowG=255;
         if (nowB<0) nowB=0; if (nowB>255) nowB=255;
 
-        core.setAlpha('fg', nowAlpha);
+        var toRGB = "#"+((1<<24)+(nowR<<16)+(nowG<<8)+nowB).toString(16).slice(1);
-        var toRGB = "#"+((1<<24)+(nowR<<16)+(nowG<<8)+nowB).toString(16).slice(1)
+        core.dom.curtain.style.background = toRGB;
-        core.fillRect('fg', 0, 0, 416, 416, toRGB);
+        core.dom.curtain.style.opacity = nowAlpha;
 
         if (step>=25) {
             clearInterval(changeAnimate);
-            if (reset) {
+            core.status.curtainColor = color;
-                core.clearMap('fg', 0, 0, 416, 416);
-                delete core.status.event.data.currentColor;
-                core.setAlpha('fg', 1);
-                core.updateFg();
-            }
-            else core.status.event.data.currentColor = color;
             if (core.isset(callback)) callback();
         }
     }, time/25);
@@ -2501,6 +2495,7 @@ core.prototype.nextY = function () {
  */
 core.prototype.updateFg = function () {
 
+    /*
     // 如果存在颜色
     if (core.isset(core.status.event.data) && core.isset(core.status.event.data.currentColor)) {
         var color=core.status.event.data.currentColor;
@@ -2508,6 +2503,7 @@ core.prototype.updateFg = function () {
         core.fillRect("fg",0,0,416,416,"#"+((1<<24)+(color[0]<<16)+(color[1]<<8)+color[2]).toString(16).slice(1));
         return;
     }
+    */
 
     if (!core.isset(core.status.thisMap) || !core.isset(core.status.thisMap.blocks)) return;
     // 更新显伤
@@ -3324,7 +3320,6 @@ core.prototype.updateStatusBar = function () {
         core.setStatus('hp', Math.min(core.values.HPMAX, core.getStatus('hp')));
     }
 
-    // core.statusBar.floor.innerHTML = core.maps.maps[core.status.floorId].name;
     var statusList = ['hp', 'atk', 'def', 'mdef', 'money', 'experience'];
     statusList.forEach(function (item) {
         core.statusBar[item].innerHTML = core.getStatus(item);
@@ -3521,6 +3516,15 @@ core.prototype.resize = function(clientWidth, clientHeight) {
                 border: '3px #fff solid',
             }
         },
+        {
+            id: 'curtain',
+            rules: {
+                width: (canvasWidth - SPACE*2) + unit,
+                height:(canvasWidth - SPACE*2) + unit,
+                top: (canvasTop + SPACE) + unit,
+                right: SPACE + unit,
+            }
+        },
         {
             id: 'floorMsgGroup',
             rules:{
@@ -3602,6 +3606,12 @@ core.prototype.resize = function(clientWidth, clientHeight) {
                 display: mdefDisplay
             }
         },
+        {
+            id: 'hard',
+            rules: {
+                lineHeight: toolsHeight + unit
+            }
+        }
     ]
     core.domRenderer();
 }

libs/floors/sample0.js

@@ -4,7 +4,7 @@
 main.floors.sample0 = {
     "floorId": "sample0", // 楼层唯一标识符，需要和名字完全一致
     "title": "样板 0 层", // 楼层中文名
-    "name": 0, // 显示在状态栏中的层数
+    "name": "0", // 显示在状态栏中的层数
     "canFlyTo": true, // 该楼能否被楼传器飞到（不能的话在该楼也不允许使用楼传器）
     "canUseQuickShop": true, // 该层是否允许使用快捷商店
     "defaultGround": "ground", // 默认地面的图块ID（terrains中）

libs/floors/sample1.js

@@ -4,7 +4,7 @@
 main.floors.sample1 = {
     "floorId": "sample1", // 楼层唯一标识符，需要和名字完全一致
     "title": "样板 1 层", // 楼层中文名
-    "name": 1, // 显示在状态栏中的层数
+    "name": "样板1层", // 显示在状态栏中的层数
     "canFlyTo": true, // 该楼能否被楼传器飞到（不能的话在该楼也不允许使用楼传器）
     "canUseQuickShop": true, // 该层是否允许使用快捷商店
     "defaultGround": "grass", // 默认地面的图块ID（terrains中）

libs/floors/sample2.js

@@ -4,7 +4,7 @@
 main.floors.sample2 = {
     "floorId": "sample2", // 楼层唯一标识符，需要和名字完全一致
     "title": "主塔 40 层", // 楼层中文名
-    "name": 40, // 显示在状态栏中的层数
+    "name": "-40", // 显示在状态栏中的层数
     "canFlyTo": false, // 该楼能否被楼传器飞到（不能的话在该楼也不允许使用楼传器）
     "canUseQuickShop": true, // 该层是否允许使用快捷商店
     "defaultGround": "snowGround", // 默认地面的图块ID（terrains中）

main.js

@@ -20,6 +20,7 @@ function main() {
         'toolBar': document.getElementById('toolBar'),
         'tools': document.getElementsByClassName('tools'),
         'gameCanvas': document.getElementsByClassName('gameCanvas'),
+        'curtain': document.getElementById('curtain'),
         'startButtons': document.getElementById('startButtons'),
         'playGame': document.getElementById('playGame'),
         'loadGame': document.getElementById('loadGame'),
@@ -32,6 +33,7 @@ function main() {
         'statusLabels': document.getElementsByClassName('statusLabel'),
         'mdefCol': document.getElementById('mdefCol'),
         'expCol': document.getElementById('expCol'),
+        'hard': document.getElementById('hard'),
     };
     this.loadList = [
         'items', 'icons', 'maps', 'enemys', 'events', 'data', 'ui', 'core'

styles.css

@@ -21,7 +21,7 @@
     position: fixed;
     top: 10px;
     left: 10px;
-    z-index: 12;
+    z-index: 13;
 }
 
 #startPanel {
@@ -32,7 +32,7 @@
     left: 0;
     background-color: #fff;
     overflow: hidden;
-    z-index: 8;
+    z-index: 9;
 }
 
 #startTop {
@@ -42,7 +42,7 @@
     top: 0;
     left: 0;
     background-color: #000;
-    z-index: 11;
+    z-index: 12;
 }
 
 #startTopProgressBar {
@@ -52,7 +52,7 @@
     position: absolute;
     top: 5%;
     background-color: #fff;
-    z-index: 12;
+    z-index: 13;
 }
 
 #startTopProgress {
@@ -67,7 +67,7 @@
     position: absolute;
     top: 8%;
     left: 5%;
-    z-index: 12;
+    z-index: 13;
 }
 
 #startBackground {
@@ -77,12 +77,12 @@
     height: 100%;
     width: auto;
     transform:translate(-50%,-50%);
-    z-index: 9;
+    z-index: 10;
 }
 
 #startLogo {
     position: absolute;
-    z-index: 9;
+    z-index: 10;
     left: 0;
     right: 0;
     margin-left: auto;
@@ -95,7 +95,7 @@
 
 #startTitle {
     position: absolute;
-    z-index: 10;
+    z-index: 11;
 }
 
 #startButtonGroup {
@@ -106,7 +106,7 @@
     background-color: #000;
     opacity: 0.85;
     display: none;
-    z-index: 9;
+    z-index: 10;
     bottom: 0;
     margin-bottom: 7%;
 }
@@ -142,7 +142,7 @@
     display: none;
     color: #fff;
     background-color: #000;
-    z-index: 7;
+    z-index: 8;
 }
 
 #logoLabel {
@@ -170,7 +170,7 @@
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     background: url(images/ground.png) round;
-    z-index: 6;
+    z-index: 7;
     display: none;
 }
 #statusBar .status{
@@ -198,7 +198,7 @@
 #toolBar {
     position: absolute;
     background: url(images/ground.png) round;
-    z-index: 5;
+    z-index: 6;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -232,6 +232,13 @@ span#poison, span#weak, span#curse {
     -webkit-box-sizing: border-box;
 }
 
+#curtain {
+    z-index: 5;
+    position: absolute;
+    opacity: 0;
+    background: #000000;
+}
+
 #bg {
     z-index: 1;
 }
@@ -240,20 +247,20 @@ span#poison, span#weak, span#curse {
     z-index: 2;
 }
 
-#hero {
+#fg {
     z-index: 3;
 }
 
-#fg {
+#hero {
     z-index: 4;
 }
 
 #ui {
-    z-index: 5;
+    z-index: 6;
 }
 
 #data {
-    z-index: 6;
+    z-index: 7;
 }
 
 .clearfix:before,

更新说明.txt

@@ -5,4 +5,4 @@ Ctrl快速跳过对话  √
 直接内嵌了诸多默认的terrains素材  √
 自动定位到上次存/读档位置  √
 设置储存  √
-setFg使用方法更新
+修改setFg的实现方法  √