StatusBar Canvas
This commit is contained in:
oc
parent
04cbc7697a
commit
2676230273
@ -432,16 +432,13 @@ actions.prototype.getClickLoc = function (x, y) {
|
||||
var size = 32;
|
||||
size = size * core.domStyle.scale;
|
||||
|
||||
switch (core.domStyle.screenMode) {// 这里的3是指statusBar和游戏画布之间的白线宽度
|
||||
case 'vertical':
|
||||
statusBar.x = 0;
|
||||
statusBar.y = core.dom.statusBar.offsetHeight + 3;
|
||||
break;
|
||||
case 'horizontal':
|
||||
case 'bigScreen':
|
||||
statusBar.x = core.dom.statusBar.offsetWidth + 3;
|
||||
statusBar.y = 0;
|
||||
break;
|
||||
if (core.domStyle.isVertical) {
|
||||
statusBar.x = 0;
|
||||
statusBar.y = core.dom.statusBar.offsetHeight + 3;
|
||||
}
|
||||
else {
|
||||
statusBar.x = core.dom.statusBar.offsetWidth + 3;
|
||||
statusBar.y = 0;
|
||||
}
|
||||
|
||||
var left = core.dom.gameGroup.offsetLeft + statusBar.x;
|
||||
|
||||
@ -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 //////
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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 () {
|
||||
|
||||
|
||||
@ -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 来判定当前是否是竖屏模式
|
||||
|
||||
// 开始绘制；横竖屏分别绘制
|
||||
if (core.domStyle.screenMode != 'vertical') {
|
||||
console.log("横屏");
|
||||
}
|
||||
else {
|
||||
console.log("竖屏");
|
||||
ctx.fillStyle = core.status.globalAttribute.statusBarColor || core.initStatus.globalAttribute.statusBarColor;
|
||||
ctx.font = 'italic bold 18px Verdana';
|
||||
|
||||
// 距离左侧边框6像素，上侧边框9像素，行距约为39像素
|
||||
var leftOffset = 6, topOffset = 9, lineHeight = 39;
|
||||
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 () {
|
||||
// 浏览地图时参与的统计项目
|
||||
|
||||
Loading…
Reference in New Issue
Block a user