update dom layout

index.html

@@ -50,37 +50,56 @@
         <p id='versionLabel'></p>
         <p id='floorNameLabel'></p>
     </div>
-    <div id='statusBar'>
+    <div id='statusBar' class="clearfix">
-        <img src='images/floor.png' id="img-floor">
+        <div class="status">
-        <p class='statusLabel' id='floor'></p>
+            <img src='images/floor.png' id="img-floor">
-        <img src='images/hp.png' id="img-hp">
+            <p class='statusLabel' id='floor'></p>
-        <p class='statusLabel' id='hp'></p>
+        </div>
-        <img src='images/atk.png' id="img-atk">
+        <div class="status">
-        <p class='statusLabel' id='atk'></p>
+            <img src='images/hp.png' id="img-hp">
-        <img src='images/def.png' id="img-def">
+            <p class='statusLabel' id='hp'></p>
-        <p class='statusLabel' id='def'></p>
+        </div>
-        <img src='images/mdef.png' id="img-mdef">
+        <div class="status">
-        <p class='statusLabel' id='mdef'></p>
+            <img src='images/atk.png' id="img-atk">
-        <img src='images/money.png' id="img-money">
+            <p class='statusLabel' id='atk'></p>
-        <p class='statusLabel' id='money'></p>
+        </div>
-        <img src='images/experience.png' id="img-experience">
+        <div class="status">
-        <p class='statusLabel' id='experience'></p>
+            <img src='images/def.png' id="img-def">
-        <p class='statusLabel' id='yellowKey' style="color:#FFCCAA"></p>
+            <p class='statusLabel' id='def'></p>
-        <p class='statusLabel' id='blueKey' style="color:#AAAADD"></p>
+        </div>
-        <p class='statusLabel' id='redKey' style="color:#FF8888"></p>
+        <div class="status" id="mdefCol">
-        <p class='statusLabel' id='poison' style="color: #AFFCA8;"></p>
+            <img src='images/mdef.png' id="img-mdef">
-        <p class='statusLabel' id='weak' style="color: #FECCD0;"></p>
+            <p class='statusLabel' id='mdef'></p>
-        <p class='statusLabel' id='curse' style="color: #C2F4E7;"></p>
+        </div>
-        <img src="images/book.png" id='img-book'>
+        <div class="status">
-        <img src="images/fly.png" id='img-fly'>
+            <img src='images/money.png' id="img-money">
-        <img src="images/toolbox.png" id='img-toolbox'>
+            <p class='statusLabel' id='money'></p>
-        <img src="images/shop.png" id='img-shop'>
+        </div>
-        <img src="images/save.png" id='img-save'>
+        <div class="status" id="expCol">
-        <img src="images/load.png" id=img-load>
+            <img src='images/experience.png' id="img-experience">
-        <img src="images/settings.png" id='img-settings'>
+            <p class='statusLabel' id='experience'></p>
-        <p class=statusLabel id="hard"></p>
+        </div>
+        <div class="status">
+            <span class='statusLabel' id='yellowKey' style="color:#FFCCAA"></span>
+            <span class='statusLabel' id='blueKey' style="color:#AAAADD"></span>
+            <span class='statusLabel' id='redKey' style="color:#FF8888"></span>
+        </div>
+        <div class="status">
+            <span class='statusLabel' id='poison' style="color: #AFFCA8;"></span>
+            <span class='statusLabel' id='weak' style="color: #FECCD0;"></span>
+            <span class='statusLabel' id='curse' style="color: #C2F4E7;"></span>
+        </div>
+    </div>
+    <div id="toolBar" class="clearfix">
+        <img src="images/book.png" class="tools" id='img-book'>
+        <img src="images/fly.png" class="tools" id='img-fly'>
+        <img src="images/toolbox.png" class="tools" id='img-toolbox'>
+        <img src="images/shop.png" class="tools" id='img-shop'>
+        <img src="images/save.png" class="tools" id='img-save'>
+        <img src="images/load.png" class="tools" id=img-load>
+        <img src="images/settings.png" class="tools" id='img-settings'>
+        <p class="statusLabel tools" id="hard"></p>
     </div>
-    <div id="toolBar"></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='fg' width='416' height='416'></canvas>

libs/core.js

@@ -41,15 +41,10 @@ function core() {
         'playedSound': null,
         'playedBgm': null,
     }
-    // 各元素位置、大小信息
+    // 样式
-    this.position = {
+    this.domStyle = {
-        'gameGroup': {},
+        styles: [],
-        'canvas': {},
+        scale: 1.0,
-        'statusBar': {},
-        'toolBar': {},
-        'items': {},
-        'scale': 1.0,
-        'screenMode': 'bigScreen',
     }
     this.initStatus = {
         'played': false,
@@ -564,28 +559,23 @@ core.prototype.onup = function () {
 }
 
 core.prototype.getClickLoc = function (x, y) {
-
+    
-    if (!core.isset(core.position.canvas.top)) return null;
-
     var statusBar = {'x': 0, 'y': 0};
     var size = 32;
-    size = size * core.position.scale;
+    size = size * core.domStyle.scale;
 
-    switch (core.position.screenMode) {// 这里的3是指statusBar和游戏画布之间的白线宽度
+    switch (core.domStyle.screenMode) {// 这里的3是指statusBar和游戏画布之间的白线宽度
         case 'vertical':
             statusBar.x = 0;
-            statusBar.y = core.position.statusBar.height + 3;
+            statusBar.y = core.dom.statusBar.offsetHeight + 3;
             break;
         case 'horizontal':
-            statusBar.x = core.position.statusBar.width + 3;
-            console.log(core.position.statusBar.width)
-            statusBar.y = 0;
-            break;
         case 'bigScreen':
-            statusBar.x = core.position.statusBar.width + 3;
+            statusBar.x = core.dom.statusBar.offsetWidth + 3;
             statusBar.y = 0;
             break;
     }
+    
     var left = core.dom.gameGroup.offsetLeft + statusBar.x;
     var top = core.dom.gameGroup.offsetTop + statusBar.y;
     var loc={'x': x - left, 'y': y - top, 'size': size};
@@ -2652,9 +2642,13 @@ core.prototype.updateStatusBar = function () {
     keys.forEach(function (key) {
         core.statusBar[key].innerHTML = core.setTwoDigits(core.status.hero.items.keys[key]);
     })
-    core.statusBar.poison.innerHTML = core.hasFlag('poison')?"毒":"";
+    if(core.flags.enableDebuff){
-    core.statusBar.weak.innerHTML = core.hasFlag('weak')?"衰":"";
+        core.statusBar.poison.innerHTML = core.hasFlag('poison')?"毒":"";
-    core.statusBar.curse.innerHTML = core.hasFlag('curse')?"咒":"";
+        core.statusBar.weak.innerHTML = core.hasFlag('weak')?"衰":"";
+        core.statusBar.curse.innerHTML = core.hasFlag('curse')?"咒":"";
+    }
+    
+
     core.statusBar.hard.innerHTML = core.status.hard;
     if (core.hasItem('book')) {
         core.statusBar.image.book.style.opacity = 1;
@@ -2670,344 +2664,257 @@ core.prototype.updateStatusBar = function () {
 }
 
 core.prototype.resize = function(clientWidth, clientHeight) {
-
+    
-    // 画布大小
+    // 默认画布大小
-    var canvasWidth = 416;
+    var DEFAULT_CANVAS_WIDTH = 422;
-    // 竖屏状态下，默认StatusBar高度（不计算边框）
+    // 默认边栏宽度
-    var statusBarHeight = 83;
+    var DEFAULT_BAR_WIDTH = 132;
-    // 竖屏状态下，底端默认ToolBar高度（不计算边框）
+    
-    var toolBarHeight = 49;
+    var BASE_LINEHEIGHT = 32;
-
+    var SPACE = 3;
-    // 横屏状态下，默认StatusBar宽度（不计算边框）
+    var DEFAULT_FONT_SIZE = 16;
-    var statusBarWidth = 132;
+    //适配宽度阈值
-	
+    var ADAPT_WIDTH = DEFAULT_CANVAS_WIDTH;
-    //适配宽度阈值， 6为两倍的边框宽度
+    //判断横竖屏
-    var ADAPT_WIDTH = canvasWidth + 6;
-
     var width = clientWidth;
     var isHorizontal = false;
-    if(clientWidth > clientHeight && clientHeight < 422){
+    if(clientWidth > clientHeight && clientHeight < ADAPT_WIDTH){
         isHorizontal = true;
         width = clientHeight;
     }
+    // 各元素大小的变量声明
+    var gameGroupWidth, gameGroupHeight, 
+        canvasWidth, canvasTop, canvasLeft,
+        statusBarWidth, statusBarHeight, statusBarBorder,
+        statusWidth, statusHeigth, statusMaxWidth,statusLabelsLH,
+        toolBarWidth, toolBarHeight, toolBarTop, toolBarBorder,
+        toolsWidth, toolsHeight,toolsMargin,toolsPMaxwidth,
+        fontSize, margin;
 
+    var shopDisplay, mdefDispaly, expDispaly;
+    mdefDispaly = core.flags.enableMDef ? 'block' : 'none';
+    expDispaly = core.flags.enableExperience ? 'block' : 'none';
+
+    statusBarBorder = '3px #fff solid';
+    toolBarBorder = '3px #fff solid';
     // 移动端
     if (width < ADAPT_WIDTH) {
         var zoom = (ADAPT_WIDTH - width) / 4.22;
         var scale = 1 - zoom / 100;
 
-        core.position.scale = scale;
+        core.domStyle.scale = scale;
-        canvasWidth = width - 6;
+
+        canvasWidth = width;
+        fontSize = DEFAULT_FONT_SIZE * scale;
 
         if(!isHorizontal){ //竖屏
-            core.position.screenMode = 'vertical';
+            core.domStyle.screenMode = 'vertical';
+            //显示快捷商店图标
+            shopDisplay = 'block';
+            //判断应该显示几行
+            var col = core.flags.enableMDef || core.flags.enableExperience || core.flags.enableDebuff ? 3 : 2;
+
+            var tempTopBarH = scale * (BASE_LINEHEIGHT * col + SPACE * 2) + 6;
+            var tempBotBarH = scale * (BASE_LINEHEIGHT + SPACE * 4) + 6;
+
+            gameGroupHeight = width + tempTopBarH + tempBotBarH;
             
-            statusBarHeight *= scale;
+            gameGroupWidth = width
-            toolBarHeight *= scale;
+            canvasTop = tempTopBarH;
-    
+            canvasLeft = 0;
-            core.position.gameGroup = {
+            toolBarWidth = statusBarWidth = width;
-                'width': canvasWidth,
+            statusBarHeigth = tempTopBarH; //一共有3行加上两个padding空隙
-                'height': width+statusBarHeight+toolBarHeight,
+            statusBarBorder = '3px #fff solid';
-                'top': (clientHeight-width-statusBarHeight-toolBarHeight)/2, 
-                'left': 3
-            }
-    
-            // 这几项都是相对gameGroup的位置
-            core.position.statusBar = {
-                'width': canvasWidth, 
-                'height': statusBarHeight,
-                'top': 0,
-                'left': 0,
-                'fontSize': 16 * scale
-            }
-            core.position.canvas = {
-                'width': canvasWidth,
-                'height': canvasWidth,
-                'top': statusBarHeight, // 3px计算在内边框
-                'left': 0,
-                'borderLeft': '',
-                'borderTop': '3px #fff solid', 
-                'borderBottom': '3px #fff solid'
-            }
-            core.position.toolBar = {
-                'display': 'block', 
-                'width': canvasWidth, 'height': toolBarHeight,
-                'top': statusBarHeight + 3 + canvasWidth,
-            }
-    
-            var icon_firstline = 8 * scale, icon_secondline = 44 * scale;
-            var icon_toolline = core.position.toolBar.top + 13 * scale;
-            var icon_toolline_per = 46 * scale;
-    
-            var text_firstline = 14 * scale, text_secondline = 50 * scale, text_thirdline = 75 * scale;
-            var text_toolline = core.position.toolBar.top + 18 * scale;
 
-            // 如果同时启用mdef和experience，则不显示当前层数
+            statusHeigth = scale*BASE_LINEHEIGHT * .8;
-            if (core.flags.enableMDef && core.flags.enableExperience) {
+            statusLabelsLH = .8 * BASE_LINEHEIGHT *scale;
-                core.position.items = {
+            statusMaxWidth = scale * DEFAULT_BAR_WIDTH * .95;
-                    'image': {
+            toolBarHeight = tempBotBarH;
-                        'size': 32*scale,
-                        'floor': {'top': 0, 'left': 0, 'display': 'none'},
-                        'hp': {'top': icon_firstline, 'left': 8 * scale},
-                        'atk': {'top': icon_firstline, 'left': 126 * scale},
-                        'def': {'top': icon_firstline, 'left': 226 * scale},
-                        'mdef': {'top': icon_secondline, 'left': 8 * scale, 'display': 'block'},
-                        'money': {'top': icon_secondline, 'left': 108 * scale},
-                        'experience': {'top': icon_secondline, 'left': 208 * scale, 'display': 'block'},
-                        'book': {'top': icon_toolline, 'left': 8 * scale},
-                        'fly': {'top': icon_toolline, 'left': 8 * scale + icon_toolline_per},
-                        'toolbox': {'top': icon_toolline, 'left': 8 * scale + icon_toolline_per * 2},
-                        'shop': {'top': icon_toolline, 'left': 8*scale+icon_toolline_per*3, 'display': 'block'},
-                        'save': {'top': icon_toolline, 'left': 8 * scale + icon_toolline_per * 4},
-                        'load': {'top': icon_toolline, 'left': 8 * scale + icon_toolline_per * 5},
-                        'settings': {'top': icon_toolline, 'left': 8 * scale + icon_toolline_per * 6}
-                    },
-                    'floor': {'top': 0, 'left': 0, 'display': 'none'},
-                    'hp': {'top': text_firstline, 'left': 42 * scale},
-                    'atk': {'top': text_firstline, 'left': 160 * scale},
-                    'def': {'top': text_firstline, 'left': 260 * scale},
-                    'mdef': {'top': text_secondline, 'left': 42 * scale, 'display': 'block'},
-                    'money': {'top': text_secondline, 'left': 144 * scale},
-                    'experience': {'top': text_secondline, 'left': 242 * scale, 'display': 'block'},
-                    'yellowKey': {'top': text_secondline, 'left': 308 * scale},
-                    'blueKey': {'top': text_secondline, 'left': 342 * scale},
-                    'redKey': {'top': text_secondline, 'left': 376 * scale},
-                    'poison': {'top': text_firstline, 'left': 330* scale},
-                    'weak': {'top': text_firstline, 'left': 355* scale},
-                    'curse': {'top': text_firstline, 'left': 380*scale},
-                    'hard': {'top': text_toolline, 'left': 320*scale}
-                }
-            }
 
-            // 否则显示层数
+            toolBarTop = statusBarHeigth + width;
-            else {
+            toolBarBorder = '3px #fff solid';
-                core.position.items = {
+            toolsHeight = scale * BASE_LINEHEIGHT;
-                    'image': {
+            toolsPMaxwidth = scale * DEFAULT_BAR_WIDTH * .4;
-                        'size': 32*scale,
+            borderRight = '3px #fff solid';
-                        'floor': {'top': icon_firstline, 'left': 8 * scale, 'display': 'block'},
+            
-                        'hp': {'top': icon_firstline, 'left': 90 * scale},
+            margin = scale * SPACE * 2;
-                        'atk': {'top': icon_firstline, 'left': 208 * scale},
+            toolsMargin = scale * SPACE * 4;
-                        'def': {'top': icon_firstline, 'left': 308 * scale},
-                        'mdef': {'top': icon_secondline, 'left': 8 * scale, 'display': core.flags.enableMDef?'block':'none'},
-                        'money': {'top': icon_secondline, 'left': (core.flags.enableMDef?108:8) * scale},
-                        'experience': {'top': icon_secondline, 'left': 108 * scale, 'display': core.flags.enableExperience?'block':'none'},
-                        'book': {'top': icon_toolline, 'left': 8 * scale},
-                        'fly': {'top': icon_toolline, 'left': 8 * scale + icon_toolline_per},
-                        'toolbox': {'top': icon_toolline, 'left': 8 * scale + icon_toolline_per * 2},
-                        'shop': {'top': icon_toolline, 'left': 8*scale+icon_toolline_per*3, 'display': 'block'},
-                        'save': {'top': icon_toolline, 'left': 8 * scale + icon_toolline_per * 4},
-                        'load': {'top': icon_toolline, 'left': 8 * scale + icon_toolline_per * 5},
-                        'settings': {'top': icon_toolline, 'left': 8 * scale + icon_toolline_per * 6}
-                    },
-                    'floor': {'top': text_firstline, 'left': 44 * scale},
-                    'hp': {'top': text_firstline, 'left': 124 * scale},
-                    'atk': {'top': text_firstline, 'left': 242 * scale},
-                    'def': {'top': text_firstline, 'left': 342 * scale},
-                    'mdef': {'top': text_secondline, 'left': 44*scale, 'display': core.flags.enableMDef?'block':'none'},
-                    'money': {'top': text_secondline, 'left': (core.flags.enableMDef?144:44) * scale},
-                    'experience': {'top': text_secondline, 'left': 142 * scale, 'display': core.flags.enableExperience?'block':'none'},
-                    'yellowKey': {'top': text_secondline, 'left': 216 * scale},
-                    'blueKey': {'top': text_secondline, 'left': 250 * scale},
-                    'redKey': {'top': text_secondline, 'left': 284 * scale},
-                    'poison': {'top': text_secondline, 'left': 330* scale},
-                    'weak': {'top': text_secondline, 'left': 355* scale},
-                    'curse': {'top': text_secondline, 'left': 380*scale},
-                    'hard': {'top': text_toolline, 'left': 320*scale}
-                }
-            }
         }else { //横屏
-            core.position.screenMode = 'horizontal';
+            core.domStyle.screenMode = 'horizontal';
-            statusBarWidth *= scale
+            shopDisplay = 'none';
+            gameGroupWidth = width + DEFAULT_BAR_WIDTH * scale;
+            gameGroupHeight = width;
+            canvasTop = 0;
+            canvasLeft = DEFAULT_BAR_WIDTH * scale;
+            toolBarWidth = statusBarWidth = DEFAULT_BAR_WIDTH * scale;
+            statusBarHeigth = scale * BASE_LINEHEIGHT * 9 + SPACE * 2; //一共有9行加上两个padding空隙
+            statusBarBorder = '3px #fff solid';
 
-            core.position.gameGroup = {
+            statusHeigth = scale*BASE_LINEHEIGHT * .8;
-                'width': statusBarWidth + canvasWidth + 3, 
+            statusLabelsLH = .8 * BASE_LINEHEIGHT *scale;
-                'height': canvasWidth,
+            toolBarHeight = width - statusBarHeigth;
-                'top': 3, 
+            toolBarTop = scale*BASE_LINEHEIGHT * 9 + SPACE * 2;
-                'left': (clientWidth - width - statusBarWidth)/2,
+            toolBarBorder = '3px #fff solid';
-            }
+            toolsHeight = scale * BASE_LINEHEIGHT;
-    
+            borderRight = '';
-            // 这几项都是相对gameGroup的位置
+            statusMaxWidth = scale * DEFAULT_BAR_WIDTH;
-            core.position.statusBar = {
+            toolsPMaxwidth = scale * DEFAULT_BAR_WIDTH;
-                'top': 0, 'left': 0,
+
-                'width': statusBarWidth,
+            margin = scale * SPACE * 2;
-                'height': canvasWidth,
+            toolsMargin = 2 * SPACE * scale;
-                'fontSize': 16 * scale
-            }
-            core.position.canvas = {
-                'borderTop': '', 
-                'borderLeft': '3px #fff solid',
-                'borderBottom': '',
-                'top': 0, 
-                'left': statusBarWidth, 
-                'width': canvasWidth, 
-                'height': canvasWidth
-            }
-            core.position.toolBar = {
-                'display': 'none', 'top': 0, 'left': 0, 'width': 0, 'height': 0
-            }
-            core.resizeIconHorizontal(scale);
         }
         
     }else { //大屏设备 pc端
-        core.position.scale = 1;
+        core.domStyle.scale = 1;
-        core.position.screenMode = 'bigScreen';
+        core.domStyle.screenMode = 'bigScreen';
+        shopDisplay = 'none';
+        
+        gameGroupWidth = DEFAULT_CANVAS_WIDTH + DEFAULT_BAR_WIDTH;
+        gameGroupHeight = DEFAULT_CANVAS_WIDTH;
+        canvasWidth = DEFAULT_CANVAS_WIDTH;
+        canvasTop = 0;
+        canvasLeft = DEFAULT_BAR_WIDTH;
 
-        var totalWidth = statusBarWidth + 3 + canvasWidth;
+        toolBarWidth = statusBarWidth = DEFAULT_BAR_WIDTH;
-
+        statusBarHeigth = BASE_LINEHEIGHT * 9 + SPACE * 2; //一共有9行
-        core.position.gameGroup = {
+        
-            'top': (clientHeight-canvasWidth)/2,
+        statusHeigth = BASE_LINEHEIGHT * .8;
-            'left': (width-totalWidth)/2,
+        statusLabelsLH = .8 * BASE_LINEHEIGHT;
-            'width': totalWidth, 'height': canvasWidth
+        toolBarHeight = DEFAULT_CANVAS_WIDTH - statusBarHeigth;
-        }
+        toolBarTop = BASE_LINEHEIGHT * 9 + SPACE * 2;
-
+        
-        // 这几项都是相对gameGroup的位置
+        toolsHeight = BASE_LINEHEIGHT;
-        core.position.statusBar = {
+        borderRight = '';
-            'top': 0, 'left': 0,
+        fontSize = DEFAULT_FONT_SIZE;
-            'width': statusBarWidth, 'height': canvasWidth,
+        statusMaxWidth = DEFAULT_BAR_WIDTH;
-            'fontSize': 16
+        toolsPMaxwidth = DEFAULT_BAR_WIDTH * .9;
-        }
+        margin = SPACE * 2;
-        core.position.canvas = {
+        toolsMargin = 2 * SPACE;
-            'borderTop': '', 'borderBottom': '', 'borderLeft': '3px #fff solid',
-            'top': 0, 'left': statusBarWidth, 'width': canvasWidth, 'height': canvasWidth
-        }
-        core.position.toolBar = {
-            'display': 'none', 'top': 0, 'left': 0, 'width': 0, 'height': 0
-        }
-        core.resizeIconHorizontal(1);
     }
-    core.resetSize();
+
+    var unit = 'px'
+    core.domStyle.styles = [
+        {   id: 'gameGroup',
+            rules:{
+                width: gameGroupWidth + unit,
+                height: gameGroupHeight + unit,
+                top: (clientHeight-gameGroupHeight)/2 + unit,
+                left: (clientWidth-gameGroupWidth)/2 + unit,
+            }
+        },
+        {   className: 'gameCanvas',
+            rules:{
+                width: canvasWidth + unit, 
+                height: canvasWidth + unit,
+                top: canvasTop + unit,
+                left: canvasLeft + unit, 
+
+                border: '3px #fff solid',
+            }
+        },
+        {   id: 'statusBar',
+            rules:{
+                width: statusBarWidth + unit,
+                height: statusBarHeigth + unit,
+                top: 0,
+                left: 0,
+                padding: SPACE + unit,
+
+                borderTop: statusBarBorder,
+                borderLeft: statusBarBorder,
+                borderRight: borderRight,
+                fontSize: fontSize + unit
+            }
+        },
+        {   className: 'status',
+            rules:{
+                width: '100%',
+                maxWidth: statusMaxWidth + unit,
+                height: statusHeigth + unit,
+                margin: margin/2 + unit
+            }
+        },
+        {
+            className: 'statusLabels',
+            rules:{
+                marginLeft: margin + unit,
+                lineHeight: statusLabelsLH + unit,
+            }
+        },
+        {   id: 'toolBar',
+            rules:{
+                width: toolBarWidth + unit,
+                height: toolBarHeight + unit,
+                top: toolBarTop +unit,
+                left: 0,
+                padding: SPACE + unit,
+                borderBottom: toolBarBorder,
+                borderLeft: toolBarBorder,
+                borderRight: borderRight,
+                fontSize: fontSize + unit
+            }
+        },
+        {   className: 'tools',
+            rules:{
+                height: toolsHeight + unit,
+                maxWidth: toolsPMaxwidth + unit,
+                marginLeft: toolsMargin + unit,
+                marginTop: margin + unit,
+            }
+        },
+        {
+            imgId: 'shop',
+            rules:{
+                display: shopDisplay
+            }
+        },
+        {
+            id: 'expCol',
+            rules: {
+                display: expDispaly
+            }
+        },
+        {
+            id: 'mdefCol',
+            rules: {
+                display: mdefDispaly
+            }
+        },
+    ]
+    core.domRenderer();
 }
 
-core.prototype.resizeIconHorizontal = function(scale) {
+core.prototype.domRenderer = function(){
-    var first_col = 8 * scale, second_col = 50 * scale, third_col = 92 * scale;
+    var styles = core.domStyle.styles;
-    var first_icon_row = 20 * scale, first_text_row = 28 * scale, first_tool_row = 303 * scale;
-    var per_row = 36 * scale, tool_per_row = 40*scale;
 
-    // 如果同时启用mdef和experience，则不显示当前层数
+    for(var i=0; i<styles.length; i++){
-    if (core.flags.enableMDef && core.flags.enableExperience) {
+        if(styles[i].hasOwnProperty('rules')){
-        core.position.items = {
+            var rules = styles[i].rules;
-            'image': {
+            var rulesProp = Object.keys(rules);
-                'size': 32*scale,
+
-                'floor': {'top': 0, 'left': 0, 'display': 'none'},
+            if(styles[i].hasOwnProperty('className')){
-                'hp': {'top': first_icon_row , 'left': first_col},
+                var className = styles[i].className
-                'atk': {'top': first_icon_row + per_row, 'left': first_col},
+                for(var j=0; j<core.dom[className].length; j++)
-                'def': {'top': first_icon_row + per_row * 2, 'left': first_col},
+                    for(var k=0; k<rulesProp.length; k++)
-                'mdef': {'top': first_icon_row + per_row * 3, 'left': first_col, 'display': 'block'},
+                        core.dom[className][j].style[rulesProp[k]] = rules[rulesProp[k]];
-                'money': {'top': first_icon_row + per_row * 4, 'left': first_col},
+            }
-                'experience': {'top': first_icon_row + per_row * 5, 'left': first_col, 'display': 'block'},
+            if(styles[i].hasOwnProperty('id')){
-                'book': {'top': first_tool_row, 'left': first_col},
+                var id = styles[i].id;
-                'fly': {'top': first_tool_row, 'left': second_col},
+
-                'toolbox': {'top': first_tool_row, 'left': third_col},
+                for(var j=0; j<rulesProp.length; j++)
-                'shop': {'top': 0, 'left': 0, 'display': 'none'},
+                    core.dom[id].style[rulesProp[j]] = rules[rulesProp[j]];
-                'save': {'top': first_tool_row + tool_per_row, 'left': first_col},
+            }
-                'load': {'top': first_tool_row + tool_per_row, 'left': second_col},
+            if(styles[i].hasOwnProperty('imgId')){
-                'settings': {'top': first_tool_row + tool_per_row, 'left': third_col}
+                var imgId = styles[i].imgId;
-            },
+
-            'floor': {'top': 0, 'left': 0, 'display': 'none'},
+                for(var j=0; j<rulesProp.length; j++)
-            'hp': {'top': first_text_row, 'left': second_col},
+                core.statusBar.image[imgId].style[rulesProp[j]] = rules[rulesProp[j]];
-            'atk': {'top': first_text_row + per_row, 'left': second_col},
+            }
-            'def': {'top': first_text_row + per_row * 2, 'left': second_col},
-            'mdef': {'top': first_text_row + per_row * 3, 'left': second_col, 'display': 'block'},
-            'money': {'top': first_text_row + per_row * 4, 'left': second_col},
-            'experience': {'top': first_text_row + per_row * 5, 'left': second_col, 'display': 'block'},
-            'yellowKey': {'top': first_text_row + per_row * 6, 'left': first_col},
-            'blueKey':{'top': first_text_row + per_row * 6, 'left': second_col},
-            'redKey': {'top': first_text_row + per_row * 6, 'left': third_col},
-            'poison': {'top': first_text_row + per_row * 6.75, 'left': first_col+10 * scale},
-            'weak': {'top': first_text_row + per_row * 6.75, 'left': first_col + 35 * scale},
-            'curse': {'top': first_text_row + per_row * 6.75, 'left': first_col + 60 * scale},
-            'hard': {'top': 383*scale, 'left': 0}
-        }
-    }
-    // 否则显示层数
-    else {
-        core.position.items = {
-            'image': {
-                'size': 32*scale,
-                'floor': {'top': first_icon_row, 'left': first_col, 'display': 'block'},
-                'hp': {'top': first_icon_row + per_row, 'left': first_col},
-                'atk': {'top': first_icon_row + per_row * 2, 'left': first_col},
-                'def': {'top': first_icon_row + per_row * 3, 'left': first_col},
-                'mdef': {'top': first_icon_row + per_row * 4, 'left': first_col, 'display': core.flags.enableMDef?'block':'none'},
-                'money': {'top': first_icon_row + per_row * (core.flags.enableMDef?5:4), 'left': first_col},
-                'experience': {'top': first_icon_row + per_row * 5, 'left': first_col, 'display': core.flags.enableExperience?'block':'none'},
-                'book': {'top': first_tool_row, 'left': first_col},
-                'fly': {'top': first_tool_row, 'left': second_col},
-                'toolbox': {'top': first_tool_row, 'left': third_col},
-                'shop': {'top': 0, 'left': 0, 'display': 'none'},
-                'save': {'top': first_tool_row + tool_per_row, 'left': first_col},
-                'load': {'top': first_tool_row + tool_per_row, 'left': second_col},
-                'settings': {'top': first_tool_row + tool_per_row, 'left': third_col}
-            },
-            'floor': {'top': first_text_row, 'left': second_col, 'display': 'block'},
-            'hp': {'top': first_text_row + per_row, 'left': second_col},
-            'atk': {'top': first_text_row + per_row * 2, 'left': second_col},
-            'def': {'top': first_text_row + per_row * 3, 'left': second_col},
-            'mdef': {'top': first_text_row + per_row * 4, 'left': second_col, 'display': core.flags.enableMDef?'block':'none'},
-            'money': {'top': first_text_row + per_row * (core.flags.enableMDef?5:4), 'left': second_col},
-            'experience': {'top': first_text_row + per_row * 5, 'left': second_col, 'display': core.flags.enableExperience?'block':'none'},
-            'yellowKey': {'top': first_text_row + per_row * 6, 'left': first_col},
-            'blueKey':{'top': first_text_row + per_row * 6, 'left': second_col},
-            'redKey': {'top': first_text_row + per_row * 6, 'left': third_col},
-            'poison': {'top': first_text_row + per_row * 6.75, 'left': first_col+10 * scale},
-            'weak': {'top': first_text_row + per_row * 6.75, 'left': first_col + 35 * scale},
-            'curse': {'top': first_text_row + per_row * 6.75, 'left': first_col + 60 * scale},
-            'hard': {'top': 383*scale, 'left': 0}
         }
+        
     }
 }
-
+    
-core.prototype.resetSize = function () {
-
-    core.dom.gameGroup.style.left = core.position.gameGroup.left + "px";
-    core.dom.gameGroup.style.top = core.position.gameGroup.top + "px";
-    core.dom.gameGroup.style.width = core.position.gameGroup.width + "px";
-    core.dom.gameGroup.style.height = core.position.gameGroup.height + "px";
-
-    core.dom.statusBar.style.width = core.position.statusBar.width + "px";
-    core.dom.statusBar.style.height = core.position.statusBar.height + "px";
-    core.dom.statusBar.style.fontSize = core.position.statusBar.fontSize + "px";
-
-    core.dom.toolBar.style.top = core.position.toolBar.top + "px";
-    core.dom.toolBar.style.width = core.position.toolBar.width + "px";
-    core.dom.toolBar.style.height = core.position.toolBar.height + "px";
-    core.dom.toolBar.style.display = core.position.toolBar.display;
-
-    core.dom.floorMsgGroup.style.width = core.position.canvas.width + "px";
-
-    for (var i = 0; i < core.dom.gameCanvas.length; i++) {
-        core.dom.gameCanvas[i].style.borderTop = core.position.canvas.borderTop;
-        core.dom.gameCanvas[i].style.borderLeft = core.position.canvas.borderLeft;
-        core.dom.gameCanvas[i].style.top = core.position.canvas.top + "px";
-        core.dom.gameCanvas[i].style.left = core.position.canvas.left + "px";
-        core.dom.gameCanvas[i].style.width = core.position.canvas.width + "px";
-        core.dom.gameCanvas[i].style.height = core.position.canvas.height + "px";
-    }
-
-    // images
-    for (var item in core.statusBar.image) {
-        if (core.isset(core.position.items.image[item].display))
-            core.statusBar.image[item].style.display = core.position.items.image[item].display;
-        else
-            core.statusBar.image[item].style.display = 'block';
-        core.statusBar.image[item].style.width = core.position.items.image.size + "px";
-        core.statusBar.image[item].style.height = core.position.items.image.size + "px";
-        core.statusBar.image[item].style.top = core.position.items.image[item].top + "px";
-        core.statusBar.image[item].style.left = core.position.items.image[item].left + "px";
-    }
-
-    // texts
-    for (var item in core.statusBar) {
-        if (item == 'image') continue;
-        if (core.isset(core.position.items[item].display))
-            core.statusBar[item].style.display = core.position.items[item].display;
-        else
-            core.statusBar[item].style.display = 'block';
-        core.statusBar[item].style.top = core.position.items[item].top + "px";
-        core.statusBar[item].style.left = core.position.items[item].left + "px";
-    }
-
-}
 
 /**
  * 系统机制 end

libs/data.js

@@ -117,10 +117,7 @@ data.prototype.init = function() {
         /****** 角色状态相关 ******/
         "enableMDef": false, // 是否涉及勇士的魔防值；如果此项为false，则状态栏不会显示勇士的魔防值
         "enableExperience": true, // 是否涉及经验值；如果此项为false，则状态栏和怪物手册均将不会显示经验值
-        // 重要说明：如果enableMDef和enableExperience均为true，则在状态栏不会显示当前楼层！！！！ //
+        "enableDebuff": true, // 是否涉及debuff，支持三项"poison" 毒"weak": 衰"curse": 咒
-
-
-
         /****** 道具相关 ******/
         "flyNearStair": true, // 是否需要在楼梯边使用传送器
         "bombTrigger": true, // 使用炸弹后是否触发怪物事件（如开门）

main.js

@@ -17,7 +17,9 @@ function main() {
         'versionLabel': document.getElementById('versionLabel'),
         'floorNameLabel': document.getElementById('floorNameLabel'),
         'statusBar': document.getElementById('statusBar'),
+        'status': document.getElementsByClassName('status'),
         'toolBar': document.getElementById('toolBar'),
+        'tools': document.getElementsByClassName('tools'),
         'gameCanvas': document.getElementsByClassName('gameCanvas'),
         'startButtons': document.getElementById('startButtons'),
         'playGame': document.getElementById('playGame'),
@@ -28,7 +30,9 @@ function main() {
         'normalLevel': document.getElementById('normalLevel'),
         'hardLevel': document.getElementById('hardLevel'),
         'data': document.getElementById('data'),
-        'statusLabels': document.getElementsByClassName('statusLabel')
+        'statusLabels': document.getElementsByClassName('statusLabel'),
+        'mdefCol': document.getElementById('mdefCol'),
+        'expCol': document.getElementById('expCol'),
     };
     // console.log('加载游戏容器和开始界面dom对象完成 如下');
     // console.log(this.dom);
@@ -246,7 +250,7 @@ main.dom.data.onmousewheel = function(e) {
     try {
         if (e.wheelDelta)
             main.core.onmousewheel(Math.sign(e.wheelDelta))
-        else if (e.detal)
+        else if (e.detail)
             main.core.onmousewheel(Math.sign(e.detail));
     } catch (ee) {}
 }

styles.css

@@ -7,9 +7,16 @@ html, body {
     overflow: hidden;
 }
 
+@font-face {
+    font-family: number;
+    src: url("fonts/number.ttf");
+}
+
 #gameGroup {
     position: absolute;
-    outline: 3px #fff solid;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
     background-color: #000;
 }
 
@@ -131,7 +138,7 @@ html, body {
 }
 
 #floorMsgGroup {
-    width: 416px;
+    width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
@@ -164,45 +171,68 @@ html, body {
 
 #statusBar {
     position: absolute;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
     background: url(images/ground.png) round;
     z-index: 6;
 }
-
+#statusBar .status{
+    position: relative;
+    display: block;
+    float: left;
+}
+.status img{
+    vertical-align: middle;
+    width: 1.6em;
+    height: 1.6em;
+}
+#statusBar span{
+    color: white;
+    font: bold italic 1.1em Verdana;
+}
+#statusBar p {
+    display: inline-block;
+    vertical-align: middle;
+    width: 60%;
+    margin: 0;
+    color: white;
+    font: bold italic 1.1em Verdana;
+}
 #toolBar {
     position: absolute;
     background: url(images/ground.png) round;
     z-index: 5;
-    display: none;
+    box-sizing: border-box;
-    left: 0px;
+    -moz-box-sizing: border-box;
-    border-top: 3px #fff solid;
+    -webkit-box-sizing: border-box;
+}
+#toolBar .tools{
+    position: relative;
+    display: block;
+    float: left;
 }
 
-#statusBar img {
+p#hard {
-    position: absolute;
+    width: 6em;
-    display: none;
+    vertical-align: middle;
-}
+    display: inline-block;
-
-#statusBar p {
-    position: absolute;
-    color: white;
-    font: bold italic 1.1em Verdana;
-    margin: 0;
-}
-
-#statusBar p#hard {
     color: red;
     font: bold normal 1.1em "Arial Black";
     text-align: center;
-    right: 0;
+    margin: 0 6px 6px 0;
 }
 
-p#poison, p#weak, p#curse {
+span#poison, span#weak, span#curse {
     font-style: normal;
     font-size: 1em;
 }
 
 .gameCanvas {
     position: absolute;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
 }
 
 #bg {
@@ -228,3 +258,11 @@ p#poison, p#weak, p#curse {
 #data {
     z-index: 6;
 }
+
+.clearfix:before,
+.clearfix:after {
+   content: ".";
+   display: block;
+   height: 0;
+   visibility: hidden;
+}