Update Curtain

2017-12-27 23:45:44 +08:00 · 2017-12-27 23:45:44 +08:00 · 38672bd677
commit 38672bd677
parent 9031a8351f
9 changed files with 70 additions and 50 deletions
--- a/index.html
+++ b/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>
--- a/libs/core.js
+++ b/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)';
-                    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,fillstyle);
+                    core.setAlpha('ui', 0.5);
+                    core.fillRect('ui',(12-core.getHeroLoc('x'))*32,(12-core.getHeroLoc('y'))*32,32,32,core.canUseItem('centerFly')?'#00FF00':'#FF0000');
+                    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.event.data.currentColor)) {
-        core.status.event.data.currentColor = [0,0,0,0];
+    if (!core.isset(core.status.curtainColor)) {
+        core.status.curtainColor = [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)
-        core.fillRect('fg', 0, 0, 416, 416, toRGB);
+        var toRGB = "#"+((1<<24)+(nowR<<16)+(nowG<<8)+nowB).toString(16).slice(1);
+        core.dom.curtain.style.background = toRGB;
+        core.dom.curtain.style.opacity = nowAlpha;

        if (step>=25) {
            clearInterval(changeAnimate);
-            if (reset) {
-                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;
+            core.status.curtainColor = 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();
 }
--- a/libs/floors/sample0.js
+++ b/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中）
--- a/libs/floors/sample1.js
+++ b/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中）
--- a/libs/floors/sample2.js
+++ b/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中）
--- a/main.js
+++ b/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'
--- a/styles.css
+++ b/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,
--- a/常用工具/地图生成器.exe
+++ b/常用工具/地图生成器.exe
--- a/更新说明.txt
+++ b/更新说明.txt
@ -5,4 +5,4 @@ Ctrl快速跳过对话  √
 直接内嵌了诸多默认的terrains素材  √
 自动定位到上次存/读档位置  √
 设置储存  √
-setFg使用方法更新
+修改setFg的实现方法  √