jianghe2nd/mota-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

statusCanvas

Browse Source
This commit is contained in:
oc 2018-12-06 23:29:49 +08:00
parent 75bff6bcd6
commit 519b882758
9 changed files with 141 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
_server/data.comment.js
View File

@ -564,6 +564,18 @@ var data_comment_c456ea59_6018_45ef_8bcc_211a24c627dc =
"_bool": "bool",
"_data": "点击“开始游戏”后是否立刻开始游戏而不显示难度选择界面"
},
"statusCanvas": {
"_leaf": true,
"_type": "checkbox",
"_bool": "bool",
"_data": "是否状态栏canvas化，即手动自定义绘制状态栏。\n如果此项开启，则可在脚本编辑的drawStatusBar中自定义绘制菜单栏。"
},
"statusCanvasRowsOnMobile": {
"_leaf": true,
"_type": "textarea",
"_range": "thiseval==null || (thiseval>0 && thiseval<=4)",
"_data": "竖屏模式下，顶端状态栏canvas化后的行数。\n此项将决定竖屏的状态栏高度，如果设置则不小于1且不大于4。\n仅在statusCanvas开启时才有效"
},
"canOpenBattleAnimate": {
"_leaf": true,
"_type": "checkbox",

6
_server/functions.comment.js
View File

@ -169,6 +169,12 @@ var functions_comment_c456ea59_6018_45ef_8bcc_211a24c627dc =
"_leaf": false,
"_type": "object",
"_data": {
"drawStatusBar": {
"_leaf": true,
"_type": "textarea",
"_lint": true,
"_data": "自定义绘制状态栏。\n当状态栏canvas化开启时，可以在这里对状态栏进行自定义绘制。\n仅当statusCanvas开启时有效。"
},
"drawStatistics": {
"_leaf": true,
"_type": "textarea",

11
editor-mobile.html
View File

@ -353,7 +353,7 @@
<img id="img-hpmax">
<p class='statusLabel statusText' id='hpmax'></p>
</div>
<div class="status">
<div class="status" id='hpCol'>
<img id="img-hp">
<p class='statusLabel statusText' id='hp'></p>
</div>
@ -361,11 +361,11 @@
<img id="img-mana">
<p class='statusLabel statusText' id='mana'></p>
</div>
<div class="status">
<div class="status" id='atkCol'>
<img id="img-atk">
<p class='statusLabel statusText' id='atk'></p>
</div>
<div class="status">
<div class="status" id='defCol'>
<img id="img-def">
<p class='statusLabel statusText' id='def'></p>
</div>
@ -377,7 +377,7 @@
<img id="img-money">
<p class='statusLabel statusText' id='money'></p>
</div>
<div class="status" id="expCol">
<div class="status" id="experienceCol">
<img id="img-experience">
<p class='statusLabel statusText' id='experience'></p>
</div>
@ -404,6 +404,9 @@
<span class='statusLabel' id='weak' style="color: #FECCD0;"></span>
<span class='statusLabel' id='curse' style="color: #C2F4E7;"></span>
</div>
<!-- 状态栏canvas化 -->
<canvas id="statusCanvas"></canvas>
</div>
<div id="toolBar" class="clearfix">
<img class="tools" id='img-book'>

11
editor.html
View File

@ -339,7 +339,7 @@
<img id="img-hpmax">
<p class='statusLabel statusText' id='hpmax'></p>
</div>
<div class="status">
<div class="status" id='hpCol'>
<img id="img-hp">
<p class='statusLabel statusText' id='hp'></p>
</div>
@ -347,11 +347,11 @@
<img id="img-mana">
<p class='statusLabel statusText' id='mana'></p>
</div>
<div class="status">
<div class="status" id='atkCol'>
<img id="img-atk">
<p class='statusLabel statusText' id='atk'></p>
</div>
<div class="status">
<div class="status" id='defCol'>
<img id="img-def">
<p class='statusLabel statusText' id='def'></p>
</div>
@ -363,7 +363,7 @@
<img id="img-money">
<p class='statusLabel statusText' id='money'></p>
</div>
<div class="status" id="expCol">
<div class="status" id="experienceCol">
<img id="img-experience">
<p class='statusLabel statusText' id='experience'></p>
</div>
@ -390,6 +390,9 @@
<span class='statusLabel' id='weak' style="color: #FECCD0;"></span>
<span class='statusLabel' id='curse' style="color: #C2F4E7;"></span>
</div>
<!-- 状态栏canvas化 -->
<canvas id="statusCanvas"></canvas>
</div>
<div id="toolBar" class="clearfix">
<img class="tools" id='img-book'>

11
index.html
View File

@ -58,7 +58,7 @@
<img id="img-hpmax">
<p class='statusLabel statusText' id='hpmax'></p>
</div>
<div class="status">
<div class="status" id='hpCol'>
<img id="img-hp">
<p class='statusLabel statusText' id='hp'></p>
</div>
@ -66,11 +66,11 @@
<img id="img-mana">
<p class='statusLabel statusText' id='mana'></p>
</div>
<div class="status">
<div class="status" id='atkCol'>
<img id="img-atk">
<p class='statusLabel statusText' id='atk'></p>
</div>
<div class="status">
<div class="status" id='defCol'>
<img id="img-def">
<p class='statusLabel statusText' id='def'></p>
</div>
@ -82,7 +82,7 @@
<img id="img-money">
<p class='statusLabel statusText' id='money'></p>
</div>
<div class="status" id="expCol">
<div class="status" id="experienceCol">
<img id="img-experience">
<p class='statusLabel statusText' id='experience'></p>
</div>
@ -109,6 +109,9 @@
<span class='statusLabel' id='weak' style="color: #FECCD0;"></span>
<span class='statusLabel' id='curse' style="color: #C2F4E7;"></span>
</div>
<!-- 状态栏canvas化 -->
<canvas id="statusCanvas" style="position: absolute; left: 0; top: 0;"></canvas>
</div>
<div id="toolBar" class="clearfix">
<img class="tools" id='img-book'>

181
libs/control.js
View File

@ -2907,6 +2907,36 @@ control.prototype.setToolbarButton = function (useButton) {
}
}
control.prototype.needDraw = function(id) {
if (!core.isset(id)) {
var toDraw = [], status = core.dom.status;
for (var i = 0; i<status.length; ++i) {
var dom = core.dom.status[i], idCol = dom.id;
if (idCol.indexOf("Col")!=idCol.length-3) continue;
var id = idCol.substring(0, idCol.length-3);
if (!this.needDraw(id)) continue;
toDraw.push(id);
}
return toDraw;
}
switch (id) {
case 'floor': return core.flags.enableFloor;
case 'name': return core.flags.enableName;
case 'lv': return core.flags.enableLv;
case 'hpmax': return core.flags.enableHPMax;
case 'mana': return core.flags.enableMana;
case 'mdef': return core.flags.enableMDef;
case 'money': return core.flags.enableMoney;
case 'experience': return core.flags.enableExperience && !core.flags.levelUpLeftMode;
case 'up': return core.flags.enableLevelUp;
case 'skill': return core.flags.enableSkill;
case 'key': return core.flags.enableKeys;
case 'pzf': return core.flags.enablePZF;
case 'debuff': return core.flags.enableDebuff;
default: return true;
}
}
////// 屏幕分辨率改变后重新自适应 //////
control.prototype.resize = function(clientWidth, clientHeight) {
if (main.mode=='editor')return;
@ -2936,25 +2966,16 @@ control.prototype.resize = function(clientWidth, clientHeight) {
statusWidth, statusHeight, statusMaxWidth,statusLabelsLH,
toolBarWidth, toolBarHeight, toolBarTop, toolBarBorder,
toolsWidth, toolsHeight,toolsMargin,toolsPMaxwidth,
fontSize, toolbarFontSize, margin, statusBackground, toolsBackground;
fontSize, toolbarFontSize, margin, statusBackground, toolsBackground,
statusCanvasWidth, statusCanvasHeight;
var count = core.dom.statusBar.children.length;
if (!core.flags.enableFloor) count--;
if (!core.flags.enableLv) count--;
if (!core.flags.enableHPMax) count--;
if (!core.flags.enableMDef) count--;
if (!core.flags.enableMoney) count--;
if (!core.flags.enableExperience) count--;
if (!core.flags.enableLevelUp) count--;
if (core.flags.levelUpLeftMode) count--;
if (!core.flags.enableDebuff) count--;
if (!core.flags.enableKeys) count--;
if (!core.flags.enablePZF) count--;
if (!core.flags.enableName) count--;
if (!core.flags.enableMana) count--;
if (!core.flags.enableSkill) count--;
var toDraw = this.needDraw();
var count = toDraw.length;
var statusCanvas = core.flags.statusCanvas, statusCanvasRows = core.flags.statusCanvasRowsOnMobile || 3;
if (count>12) alert("当前状态栏数目("+count+")大于12，请调整到不超过12以避免手机端出现显示问题。");
if (!statusCanvas && count>12) alert("当前状态栏数目("+count+")大于12，请调整到不超过12以避免手机端出现显示问题。");
var col = Math.ceil(count / 3);
if (statusCanvas) col = statusCanvasRows;
var statusLineHeight = BASE_LINEHEIGHT * 9 / count;
var statusLineFontSize = DEFAULT_FONT_SIZE;
@ -2988,9 +3009,6 @@ control.prototype.resize = function(clientWidth, clientHeight) {
core.domStyle.screenMode = 'vertical';
//显示快捷商店图标
shopDisplay = 'block';
//判断应该显示几行
// var col = core.flags.enableMDef || core.flags.enableExperience || core.flags.enableDebuff ? 3 : 2;
var col = parseInt((count-1)/3)+1;
var tempTopBarH = scale * (BASE_LINEHEIGHT * col + SPACE * 2) + 6;
var tempBotBarH = scale * (BASE_LINEHEIGHT + SPACE * 4) + 6;
@ -2998,6 +3016,8 @@ control.prototype.resize = function(clientWidth, clientHeight) {
gameGroupHeight = tempWidth + tempTopBarH + tempBotBarH;
gameGroupWidth = tempWidth
statusCanvasWidth = canvasWidth;
statusCanvasHeight = tempTopBarH;
canvasTop = tempTopBarH;
// canvasLeft = 0;
toolBarWidth = statusBarWidth = canvasWidth;
@ -3031,6 +3051,8 @@ control.prototype.resize = function(clientWidth, clientHeight) {
toolBarWidth = statusBarWidth = DEFAULT_BAR_WIDTH * scale;
statusBarHeight = gameGroupHeight - SPACE;
statusBarBorder = '3px '+borderColor+' solid';
statusCanvasWidth = toolBarWidth + SPACE;
statusCanvasHeight = statusBarHeight;
statusBackground = (core.status.globalAttribute||core.initStatus.globalAttribute).statusLeftBackground;
statusHeight = scale*statusLineHeight * .8;
@ -3065,6 +3087,8 @@ control.prototype.resize = function(clientWidth, clientHeight) {
// statusBarHeight = statusLineHeight * count + SPACE * 2; //一共有9行
statusBackground = (core.status.globalAttribute||core.initStatus.globalAttribute).statusLeftBackground;
statusBarHeight = gameGroupHeight - SPACE;
statusCanvasWidth = toolBarWidth + SPACE;
statusCanvasHeight = statusBarHeight;
statusHeight = statusLineHeight * .8;
statusLabelsLH = .8 * statusLineHeight;
@ -3100,6 +3124,14 @@ control.prototype.resize = function(clientWidth, clientHeight) {
height: (canvasWidth - SPACE*2) + unit,
}
},
{
id: 'statusCanvas',
rules: {
width: (statusCanvasWidth - SPACE*2) + unit,
height: (statusCanvasHeight - SPACE) + unit,
display: statusCanvas?'block':'none'
}
},
{
id: 'gif',
rules: {
@ -3114,15 +3146,6 @@ control.prototype.resize = function(clientWidth, clientHeight) {
height:(canvasWidth - SPACE*2) + unit,
}
},
/*
{
id: 'curtain',
rules: {
width: (canvasWidth - SPACE*2) + unit,
height:(canvasWidth - SPACE*2) + unit,
}
},
*/
{
id: 'gameDraw',
rules: {
@ -3166,7 +3189,8 @@ control.prototype.resize = function(clientWidth, clientHeight) {
width: '100%',
maxWidth: statusMaxWidth + unit,
height: statusHeight + unit,
margin: margin/2 + unit
margin: margin/2 + unit,
display: !statusCanvas?'block':'none'
}
},
{
@ -3212,84 +3236,6 @@ control.prototype.resize = function(clientWidth, clientHeight) {
display: shopDisplay && core.domStyle.showStatusBar
}
},
{
id: 'floorCol',
rules: {
display: core.flags.enableFloor ? 'block': 'none'
}
},
{
id: 'nameCol',
rules: {
display: core.flags.enableName ? 'block': 'none'
}
},
{
id: 'lvCol',
rules: {
display: core.flags.enableLv ? 'block': 'none'
}
},
{
id: 'hpmaxCol',
rules: {
display: core.flags.enableHPMax ? 'block': 'none'
}
},
{
id: 'manaCol',
rules: {
display: core.flags.enableMana ? 'block': 'none'
}
},
{
id: 'mdefCol',
rules: {
display: core.flags.enableMDef ? 'block': 'none'
}
},
{
id: 'moneyCol',
rules: {
display: core.flags.enableMoney ? 'block': 'none'
}
},
{
id: 'expCol',
rules: {
display: core.flags.enableExperience && !core.flags.levelUpLeftMode ? 'block': 'none'
}
},
{
id: 'upCol',
rules: {
display: core.flags.enableLevelUp ? 'block': 'none'
}
},
{
id: 'skillCol',
rules: {
display: core.flags.enableSkill ? 'block': 'none'
}
},
{
id: 'keyCol',
rules: {
display: !core.isset(core.flags.enableKeys)||core.flags.enableKeys?'block':'none'
}
},
{
id: 'pzfCol',
rules: {
display: core.flags.enablePZF?'block':'none'
}
},
{
'id': 'debuffCol',
rules: {
display: core.flags.enableDebuff ? 'block': 'none'
}
},
{
id: 'hard',
rules: {
@ -3298,8 +3244,27 @@ control.prototype.resize = function(clientWidth, clientHeight) {
}
},
]
for (var i = 0; i < core.dom.status.length; ++i) {
var id = core.dom.status[i].id;
core.domStyle.styles.push({
id: id,
rules: {
display: toDraw.indexOf(id.substring(0, id.length-3))>=0 && !statusCanvas ? "block": "none"
}
});
}
core.domRenderer();
this.setToolbarButton();
if (core.domStyle.screenMode == 'vertical') {
core.dom.statusCanvas.width = 416;
core.dom.statusCanvas.height = col * BASE_LINEHEIGHT + SPACE + 6;
}
else {
core.dom.statusCanvas.width = 129;
core.dom.statusCanvas.height = 416;
}
}
////// 渲染DOM //////

6
main.js
View File

@ -55,16 +55,20 @@ function main() {
'nameCol': document.getElementById('nameCol'),
'lvCol': document.getElementById('lvCol'),
'hpmaxCol': document.getElementById('hpmaxCol'),
'hpCol': document.getElementById('hpCol'),
'manaCol': document.getElementById('manaCol'),
'atkCol': document.getElementById('atkCol'),
'defCol': document.getElementById('defCol'),
'mdefCol': document.getElementById('mdefCol'),
'moneyCol': document.getElementById('moneyCol'),
'expCol': document.getElementById('expCol'),
'experienceCol': document.getElementById('experienceCol'),
'upCol': document.getElementById('upCol'),
'keyCol': document.getElementById('keyCol'),
'pzfCol': document.getElementById('pzfCol'),
'debuffCol': document.getElementById('debuffCol'),
'skillCol': document.getElementById('skillCol'),
'hard': document.getElementById('hard'),
'statusCanvas': document.getElementById('statusCanvas')
};
this.mode = 'play';
this.loadList = [

2
project/data.js
View File

@ -369,6 +369,8 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
"useLoop": false,
"startUsingCanvas": false,
"startDirectly": false,
"statusCanvas": false,
"statusCanvasRowsOnMobile": 3,
"canOpenBattleAnimate": true,
"showBattleAnimateConfirm": false,
"battleAnimate": false,

22
project/functions.js
View File

@ -998,6 +998,28 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a =
}
},
"ui": {
"drawStatusBar": function () {
// 如果是非状态栏canvas化，直接返回
if (!core.flags.statusCanvas) return;
var canvas = core.dom.statusCanvas, ctx = canvas.getContext('2d');
// 清空状态栏
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 如果是隐藏状态栏模式，直接返回
if (!core.domStyle.showStatusBar) return;
// 动态计算要绘制的项目
var toDraw = core.control.needDraw();
console.log(toDraw);
// 开始绘制；横竖屏分别绘制
if (core.domStyle.screenMode != 'vertical') {
console.log("横屏");
}
else {
console.log("竖屏");
}
},
"drawStatistics": function () {
// 浏览地图时参与的统计项目