StatusBar Canvas

libs/actions.js

@@ -432,16 +432,13 @@ actions.prototype.getClickLoc = function (x, y) {
     var size = 32;
     size = size * core.domStyle.scale;
 
-    switch (core.domStyle.screenMode) {// 这里的3是指statusBar和游戏画布之间的白线宽度
+    if (core.domStyle.isVertical) {
-        case 'vertical':
+        statusBar.x = 0;
-            statusBar.x = 0;
+        statusBar.y = core.dom.statusBar.offsetHeight + 3;
-            statusBar.y = core.dom.statusBar.offsetHeight + 3;
+    }
-            break;
+    else {
-        case 'horizontal':
+        statusBar.x = core.dom.statusBar.offsetWidth + 3;
-        case 'bigScreen':
+        statusBar.y = 0;
-            statusBar.x = core.dom.statusBar.offsetWidth + 3;
-            statusBar.y = 0;
-            break;
     }
 
     var left = core.dom.gameGroup.offsetLeft + statusBar.x;

libs/control.js

@@ -2877,31 +2877,30 @@ control.prototype.updateGlobalAttribute = function (name) {
     if (!core.isset(attribute)) return;
     switch (name) {
         case 'statusLeftBackground':
-            if (core.domStyle.screenMode == 'horizontal' || core.domStyle.screenMode == 'bigScreen') {
+            if (!core.domStyle.isVertical) {
                 core.dom.statusBar.style.background = attribute[name];
             }
             break;
         case 'statusTopBackground':
-            if (core.domStyle.screenMode == 'vertical') {
+            if (core.domStyle.isVertical) {
                 core.dom.statusBar.style.background = attribute[name];
             }
             break;
         case 'toolsBackground':
-            if (core.domStyle.screenMode == 'vertical') {
+            if (core.domStyle.isVertical) {
                 core.dom.toolBar.style.background = attribute[name];
             }
             break;
         case 'borderColor':
             {
                 var border = '3px ' + attribute[name] + ' solid';
-                var isVertical = core.domStyle.screenMode == 'vertical';
                 core.dom.statusBar.style.borderTop = border;
                 core.dom.statusBar.style.borderLeft = border;
-                core.dom.statusBar.style.borderRight = isVertical?'':border;
+                core.dom.statusBar.style.borderRight = core.domStyle.isVertical?'':border;
                 core.dom.gameDraw.style.border = border;
                 core.dom.toolBar.style.borderBottom = border;
                 core.dom.toolBar.style.borderLeft = border;
-                core.dom.toolBar.style.borderRight = isVertical?'':border;
+                core.dom.toolBar.style.borderRight = core.domStyle.isVertical?'':border;
                 break;
             }
         case 'statusBarColor':
@@ -2928,7 +2927,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;
+    if (!core.domStyle.isVertical) useButton = false;
 
     core.domStyle.toolbarBtn = useButton;
     if (useButton) {
@@ -2946,7 +2945,7 @@ control.prototype.setToolbarButton = function (useButton) {
         ["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";
+        core.statusBar.image.shop.style.display = core.domStyle.isVertical ? "block":"none";
     }
 }
 
@@ -3050,6 +3049,7 @@ control.prototype.resize = function(clientWidth, clientHeight) {
         var tempWidth = DEFAULT_CANVAS_WIDTH * scale;
         if(!isHorizontal){ //竖屏
             core.domStyle.screenMode = 'vertical';
+            core.domStyle.isVertical = true;
             //显示快捷商店图标
             shopDisplay = 'block';
 
@@ -3086,6 +3086,7 @@ control.prototype.resize = function(clientWidth, clientHeight) {
             toolbarFontSize = DEFAULT_FONT_SIZE * scale;
         }else { //横屏
             core.domStyle.screenMode = 'horizontal';
+            core.domStyle.isVertical = false;
             shopDisplay = 'none';
             gameGroupWidth = tempWidth + DEFAULT_BAR_WIDTH * scale;
             gameGroupHeight = tempWidth;
@@ -3118,6 +3119,7 @@ control.prototype.resize = function(clientWidth, clientHeight) {
     }else { //大屏设备 pc端
         core.domStyle.scale = 1;
         core.domStyle.screenMode = 'bigScreen';
+        core.domStyle.isVertical = false;
         shopDisplay = 'none';
 
         gameGroupWidth = DEFAULT_CANVAS_WIDTH + DEFAULT_BAR_WIDTH;
@@ -3300,7 +3302,7 @@ control.prototype.resize = function(clientWidth, clientHeight) {
     core.domRenderer();
     this.setToolbarButton();
 
-    if (core.domStyle.screenMode == 'vertical') {
+    if (core.domStyle.isVertical) {
         core.dom.statusCanvas.width = 416;
         core.dom.statusCanvas.height = col * BASE_LINEHEIGHT + SPACE + 6;
     }
@@ -3308,6 +3310,7 @@ control.prototype.resize = function(clientWidth, clientHeight) {
         core.dom.statusCanvas.width = 129;
         core.dom.statusCanvas.height = 416;
     }
+    this.updateStatusBar();
 }
 
 ////// 渲染DOM //////

libs/core.js

@@ -77,6 +77,8 @@ function core() {
     this.domStyle = {
         styles: [],
         scale: 1.0,
+        screenMode: null,
+        isVertical: false,
         toolbarBtn: false,
         showStatusBar: true,
     }
@@ -1386,6 +1388,11 @@ core.prototype.updateStatusBar = function () {
     core.control.updateStatusBar();
 }
 
+////// 绘制状态栏 //////
+core.prototype.drawStatusBar = function () {
+    core.ui.drawStatusBar();
+}
+
 ////// 屏幕分辨率改变后重新自适应 //////
 core.prototype.resize = function(clientWidth, clientHeight) {
     core.control.resize(clientWidth, clientHeight);

libs/ui.js

@@ -2394,6 +2394,12 @@ ui.prototype.drawKeyBoard = function () {
     core.fillText("ui", "返回游戏", 416-80, offset-3, '#FFFFFF', 'bold 15px '+globalFont);
 }
 
+////// 绘制状态栏 /////
+ui.prototype.drawStatusBar = function () {
+    if (this.uidata.drawStatusBar)
+        this.uidata.drawStatusBar();
+}
+
 ////// 绘制“数据统计”界面 //////
 ui.prototype.drawStatistics = function () {
 

project/functions.js

@@ -863,6 +863,8 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a =
 
 	// 难度
 	core.statusBar.hard.innerHTML = core.status.hard;
+	// 状态栏绘制
+	core.drawStatusBar();
 
 	// 更新阻激夹域的伤害值
 	core.updateCheckBlock();
@@ -1010,18 +1012,56 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a =
 	// 如果是隐藏状态栏模式，直接返回
 	if (!core.domStyle.showStatusBar) return;
 	
-	// 动态计算要绘制的项目
+	// 作为样板，只绘制楼层、生命、攻击、防御、魔防、金币、钥匙这七个内容
-	var toDraw = core.control.needDraw();
+	// 需要其他的请自行进行修改；横竖屏都需要进行适配绘制。
-	console.log(toDraw);
+	// （可以使用Chrome浏览器开控制台来模拟手机上的竖屏模式的显示效果，具体方式自行百度）
+	// 横屏模式下的画布大小是 129*416
+	// 竖屏模式下的画布大小是 416*(32*rows+9) 其中rows为状态栏行数，即全塔属性中statusCanvasRowsOnMobile值
+	// 可以使用 core.domStyle.isVertical 来判定当前是否是竖屏模式
 	
-	// 开始绘制；横竖屏分别绘制
+	ctx.fillStyle = core.status.globalAttribute.statusBarColor || core.initStatus.globalAttribute.statusBarColor;
-	if (core.domStyle.screenMode != 'vertical') {
+	ctx.font = 'italic bold 18px Verdana';
-		console.log("横屏");
+	
-	}
+	// 距离左侧边框6像素，上侧边框9像素，行距约为39像素
-	else {
+	var leftOffset = 6, topOffset = 9, lineHeight = 39;
-		console.log("竖屏");
+	if (core.domStyle.isVertical) { // 竖屏模式，行高32像素
+		leftOffset = 6; topOffset = 6; lineHeight = 32;
 	}
 	
+	var toDraw = ["floor", "hp", "atk", "def", "mdef", "money"];
+	for (var index = 0; index < toDraw.length; index++) {
+		// 绘制下一个数据
+		var name = toDraw[index];
+		// 图片大小25x25
+		ctx.drawImage(core.statusBar.icons[name], leftOffset, topOffset, 25, 25);
+		// 文字内容
+		var text = (core.statusBar[name]||{}).innerText || " ";
+		// 斜体判定：如果不是纯数字，斜体会非常难看，需要取消
+		if (!/^\d*$/.test(text)) ctx.font = 'bold 18px Verdana';
+		// 绘制文字
+		ctx.fillText(text, leftOffset + 36, topOffset + 20);
+		ctx.font = 'italic bold 18px Verdana';
+		// 计算下一个绘制的坐标
+		if (core.domStyle.isVertical) {
+			// 竖屏模式
+			if (index % 3 != 2) leftOffset += 131;
+			else {
+				leftOffset = 6;
+				topOffset += lineHeight;
+			}
+		}
+		else {
+			// 横屏模式
+			topOffset += lineHeight;
+		}
+	}
+	// 绘制三色钥匙
+	ctx.fillStyle = '#FFCCAA';
+	ctx.fillText(core.statusBar.yellowKey.innerText, leftOffset + 5, topOffset + 20);
+	ctx.fillStyle = '#AAAADD';
+	ctx.fillText(core.statusBar.blueKey.innerText, leftOffset + 40, topOffset + 20);
+	ctx.fillStyle = '#FF8888';
+	ctx.fillText(core.statusBar.redKey.innerText, leftOffset + 75, topOffset + 20);
 },
         "drawStatistics": function () {
 	// 浏览地图时参与的统计项目