curtain -> canvas

editor-mobile.html

@@ -408,7 +408,6 @@
     <div id="gameDraw">
         <div id="gif"></div>
         <div id="gif2"></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>
@@ -418,6 +417,7 @@
         <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='route' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='curtain' 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>

editor.html

@@ -393,7 +393,6 @@
     <div id="gameDraw">
         <div id="gif"></div>
         <div id="gif2"></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>
@@ -403,6 +402,7 @@
         <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='route' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='curtain' 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>

index.html

@@ -111,7 +111,6 @@
     <div id="gameDraw">
         <div id="gif"></div>
         <div id="gif2"></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>
@@ -121,6 +120,7 @@
         <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='route' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='curtain' 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/control.js

@@ -187,8 +187,6 @@ control.prototype.showStartAnimate = function (callback) {
     core.dom.startButtonGroup.style.display = 'none';
     core.dom.startButtons.style.display = 'block';
     core.dom.levelChooseButtons.style.display = 'none';
-    core.dom.curtain.style.background = "#000000";
-    core.dom.curtain.style.opacity = 0;
     core.status.played = false;
     core.clearStatus();
     core.clearMap('all');
@@ -1451,8 +1449,9 @@ control.prototype.setFg = function(color, time, callback) {
 
     if (time==0) {
         // 直接变色
-        core.dom.curtain.style.background = core.arrayToRGB(color);
+        core.clearMap('curtain');
-        core.dom.curtain.style.opacity = color[3];
+        core.setAlpha('curtain', color[3]);
+        core.fillRect('curtain', 0, 0, 416, 416, core.arrayToRGB(color));
         core.status.curtainColor = color;
         if (core.isset(callback)) callback();
         return;
@@ -1467,8 +1466,9 @@ control.prototype.setFg = function(color, time, callback) {
         var nowR = parseInt(fromColor[0]+(color[0]-fromColor[0])*step/25);
         var nowG = parseInt(fromColor[1]+(color[1]-fromColor[1])*step/25);
         var nowB = parseInt(fromColor[2]+(color[2]-fromColor[2])*step/25);
-        core.dom.curtain.style.background = core.arrayToRGB([nowR,nowG,nowB]);
+        core.clearMap('curtain');
-        core.dom.curtain.style.opacity = nowAlpha;
+        core.setAlpha('curtain', nowAlpha);
+        core.fillRect('curtain', 0, 0, 416, 416, core.arrayToRGB([nowR,nowG,nowB]));
 
         if (step>=25) {
             clearInterval(changeAnimate);
@@ -2844,6 +2844,7 @@ control.prototype.resize = function(clientWidth, clientHeight) {
                 height:(canvasWidth - SPACE*2) + unit,
             }
         },
+        /*
         {
             id: 'curtain',
             rules: {
@@ -2851,6 +2852,7 @@ control.prototype.resize = function(clientWidth, clientHeight) {
                 height:(canvasWidth - SPACE*2) + unit,
             }
         },
+        */
         {
             id: 'gameDraw',
             rules: {

libs/events.js

@@ -1236,15 +1236,17 @@ events.prototype.changeFloor = function (floorId, stair, heroLoc, time, callback
                     var color = core.floors[floorId].color;
 
                     // 直接变色
-                    core.dom.curtain.style.background = core.arrayToRGB(color);
+                    core.clearMap('curtain');
                     if (core.isset(color[3]))
-                        core.dom.curtain.style.opacity = color[3];
+                        core.setAlpha('curtain', color[3]);
-                    else core.dom.curtain.style.opacity=1;
+                    else
+                        core.setAlpha('curtain', 1);
+                    core.fillRect('curtain', 0, 0, 416, 416, core.arrayToRGB(color));
                     core.status.curtainColor = color;
                 }
                 else {
-                    core.dom.curtain.style.background = "#000000";
+                    core.clearMap('curtain');
-                    core.dom.curtain.style.opacity = 0;
+                    core.setAlpha('curtain', 0);
                 }
             }
 

libs/ui.js

@@ -18,6 +18,8 @@ ui.prototype.init = function () {
 ui.prototype.clearMap = function (map, x, y, width, height) {
     if (map == 'all') {
         for (var m in core.canvas) {
+            // 不擦除curtain层
+            if (m=='curtain') continue;
             core.canvas[m].clearRect(0, 0, core.bigmap.width*32, core.bigmap.height*32);
         }
         core.dom.gif.innerHTML = "";

main.js

@@ -42,7 +42,6 @@ function main() {
         'gameCanvas': document.getElementsByClassName('gameCanvas'),
         'gif': document.getElementById('gif'),
         'gif2': document.getElementById('gif2'),
-        'curtain': document.getElementById('curtain'),
         'gameDraw': document.getElementById('gameDraw'),
         'startButtons': document.getElementById('startButtons'),
         'playGame': document.getElementById('playGame'),

styles.css

@@ -246,13 +246,6 @@ span#poison, span#weak, span#curse, span#pickaxe, span#bomb, span#fly {
     overflow: hidden;
 }
 
-#curtain {
-    z-index: 100;
-    position: absolute;
-    opacity: 0;
-    background: #000000;
-}
-
 #gameDraw {
     position: absolute;
     background: #000000;
@@ -296,6 +289,10 @@ span#poison, span#weak, span#curse, span#pickaxe, span#bomb, span#fly {
     z-index: 95;
 }
 
+#curtain {
+    z-index: 100;
+}
+
 #ui {
     z-index: 110;
 }

更新说明.txt

@@ -1,7 +1,9 @@
 HTML5魔塔样板V2.4.1
 
-可叠加的三图层绘制图块
+增加背景层和前景层的图块绘制，多层图块可叠加
-专门的装备页面；装备系统大改造
+背景层/前景层图块的显示、隐藏、修改等事件
+专门的装备页面（Q键开启）；装备系统大改造
+仿RM的灯光效果，通过插件函数方式给出
 将状态栏更新和阻激夹域的计算移动到脚本编辑中
 增加控制免疫阻激夹域的flag:no_zone等
 打字机效果时点击显示全部文字