diff --git a/packages-user/client-modules/src/render/components/input.tsx b/packages-user/client-modules/src/render/components/input.tsx
index 68e1eca..9f219b4 100644
--- a/packages-user/client-modules/src/render/components/input.tsx
+++ b/packages-user/client-modules/src/render/components/input.tsx
@@ -155,7 +155,7 @@ export const Input = defineComponent(
now = now.parent;
}
- // 应用内边距偏移.
+ // 应用内边距偏移
const { clientLeft, clientTop } = canvas;
const trans = new Transform();
trans.translate(clientLeft, clientTop);
diff --git a/packages-user/client-modules/src/render/shared.ts b/packages-user/client-modules/src/render/shared.ts
index 9a84166..add5d24 100644
--- a/packages-user/client-modules/src/render/shared.ts
+++ b/packages-user/client-modules/src/render/shared.ts
@@ -2,18 +2,20 @@
export const MAP_BLOCK_WIDTH = 15;
export const MAP_BLOCK_HEIGHT = 15;
-// 状态栏像素宽高
-export const STATUS_BAR_WIDTH = 180;
-export const STATUS_BAR_HEIGHT = 32 * MAP_BLOCK_HEIGHT;
-
-// 是否启用右侧状态栏
-export const ENABLE_RIGHT_STATUS_BAR = true;
-export const STATUS_BAR_COUNT = ENABLE_RIGHT_STATUS_BAR ? 2 : 1;
-
// 地图像素宽高
export const MAP_WIDTH = 32 * MAP_BLOCK_WIDTH;
export const MAP_HEIGHT = 32 * MAP_BLOCK_HEIGHT;
+// 状态栏像素宽高
+export const STATUS_BAR_WIDTH = 180;
+export const STATUS_BAR_HEIGHT = 32 * MAP_BLOCK_HEIGHT;
+// 右侧状态栏的横坐标
+export const RIGHT_STATUS_POS = STATUS_BAR_WIDTH + MAP_WIDTH;
+
+// 是否启用右侧状态栏
+export const ENABLE_RIGHT_STATUS_BAR = true;
+export const STATUS_BAR_COUNT = ENABLE_RIGHT_STATUS_BAR ? 2 : 1;
+
// 游戏画面像素宽高，宽=地图宽度+状态栏宽度*状态栏数量
export const MAIN_WIDTH = MAP_WIDTH + STATUS_BAR_WIDTH * STATUS_BAR_COUNT;
export const MAIN_HEIGHT = MAP_HEIGHT;
diff --git a/packages-user/client-modules/src/render/ui/main.tsx b/packages-user/client-modules/src/render/ui/main.tsx
index f146135..fae5423 100644
--- a/packages-user/client-modules/src/render/ui/main.tsx
+++ b/packages-user/client-modules/src/render/ui/main.tsx
@@ -19,8 +19,12 @@ import {
import { Textbox, Tip } from '../components';
import { GameUI } from '@motajs/system-ui';
import {
+ ENABLE_RIGHT_STATUS_BAR,
MAIN_HEIGHT,
MAIN_WIDTH,
+ MAP_HEIGHT,
+ MAP_WIDTH,
+ RIGHT_STATUS_POS,
STATUS_BAR_HEIGHT,
STATUS_BAR_WIDTH
} from '../shared';
@@ -71,7 +75,7 @@ const MainScene = defineComponent(() => {
const mainTextboxProps: Props = {
text: '',
hidden: true,
- loc: [0, 330, 480, 150],
+ loc: [0, MAP_HEIGHT - 150, MAIN_WIDTH, 150],
zIndex: 30,
fillStyle: '#fff',
titleFill: 'gold',
@@ -80,7 +84,7 @@ const MainScene = defineComponent(() => {
winskin: 'winskin2.png',
interval: 100,
lineHeight: 4,
- width: 480
+ width: MAP_WIDTH
};
const map = shallowRef();
@@ -267,10 +271,13 @@ const MainScene = defineComponent(() => {
status={leftStatus}
hidden={hideStatus.value}
>
-
+
{
/>
-
+
{
noevent
>
diff --git a/packages-user/data-base/src/game.ts b/packages-user/data-base/src/game.ts
index cfc9f51..51f0f50 100644
--- a/packages-user/data-base/src/game.ts
+++ b/packages-user/data-base/src/game.ts
@@ -165,7 +165,7 @@ class GameListener extends EventEmitter {
constructor() {
super();
if (main.replayChecking) return;
- if (!!window.core) {
+ if (window.core) {
this.init();
} else {
loading.once('coreInit', () => {
@@ -176,84 +176,80 @@ class GameListener extends EventEmitter {
private init() {
// ----- block
-
- const data = core.canvas.data.canvas;
-
- const getBlockLoc = (px: number, py: number, size: number) => {
- return [
- Math.floor(((px * 32) / size + core.bigmap.offsetX) / 32),
- Math.floor(((py * 32) / size + core.bigmap.offsetY) / 32)
- ];
- };
-
- // hover & leave & mouseMove
- data.addEventListener('mousemove', e => {
- if (
- core.status.lockControl ||
- !core.isPlaying() ||
- !core.status.floorId
- )
- return;
- this.emit('mouseMove', e);
- const {
- x: px,
- y: py,
- size
- } = core.actions._getClickLoc(e.offsetX, e.offsetY);
- const [bx, by] = getBlockLoc(px, py, size);
- const blocks = core.getMapBlocksObj();
- if (this.mouseX !== bx || this.mouseY !== by) {
- const lastBlock = blocks[`${this.mouseX},${this.mouseY}`];
- const block = blocks[`${bx},${by}`];
- if (!!lastBlock) {
- this.emit('leaveBlock', lastBlock, e, false);
- }
- if (!!block) {
- this.emit('hoverBlock', block, e);
- this.mouseX = bx;
- this.mouseY = by;
- } else {
- this.mouseX = -1;
- this.mouseY = -1;
- }
- }
- });
- data.addEventListener('mouseleave', e => {
- if (
- core.status.lockControl ||
- !core.isPlaying() ||
- !core.status.floorId
- )
- return;
- const blocks = core.getMapBlocksObj();
- const lastBlock = blocks[`${this.mouseX},${this.mouseY}`];
- if (!!lastBlock) {
- this.emit('leaveBlock', lastBlock, e, true);
- }
- this.mouseX = -1;
- this.mouseY = -1;
- });
- // click
- data.addEventListener('click', e => {
- if (
- core.status.lockControl ||
- !core.isPlaying() ||
- !core.status.floorId
- )
- return;
- const {
- x: px,
- y: py,
- size
- } = core.actions._getClickLoc(e.offsetX, e.offsetY);
- const [bx, by] = getBlockLoc(px, py, size);
- const blocks = core.getMapBlocksObj();
- const block = blocks[`${bx},${by}`];
- if (!!block) {
- this.emit('clickBlock', block, e);
- }
- });
-
+ // const data = core.canvas.data.canvas;
+ // const getBlockLoc = (px: number, py: number, size: number) => {
+ // return [
+ // Math.floor(((px * 32) / size + core.bigmap.offsetX) / 32),
+ // Math.floor(((py * 32) / size + core.bigmap.offsetY) / 32)
+ // ];
+ // };
+ // // hover & leave & mouseMove
+ // data.addEventListener('mousemove', e => {
+ // if (
+ // core.status.lockControl ||
+ // !core.isPlaying() ||
+ // !core.status.floorId
+ // )
+ // return;
+ // this.emit('mouseMove', e);
+ // const {
+ // x: px,
+ // y: py,
+ // size
+ // } = core.actions._getClickLoc(e.offsetX, e.offsetY);
+ // const [bx, by] = getBlockLoc(px, py, size);
+ // const blocks = core.getMapBlocksObj();
+ // if (this.mouseX !== bx || this.mouseY !== by) {
+ // const lastBlock = blocks[`${this.mouseX},${this.mouseY}`];
+ // const block = blocks[`${bx},${by}`];
+ // if (lastBlock) {
+ // this.emit('leaveBlock', lastBlock, e, false);
+ // }
+ // if (block) {
+ // this.emit('hoverBlock', block, e);
+ // this.mouseX = bx;
+ // this.mouseY = by;
+ // } else {
+ // this.mouseX = -1;
+ // this.mouseY = -1;
+ // }
+ // }
+ // });
+ // data.addEventListener('mouseleave', e => {
+ // if (
+ // core.status.lockControl ||
+ // !core.isPlaying() ||
+ // !core.status.floorId
+ // )
+ // return;
+ // const blocks = core.getMapBlocksObj();
+ // const lastBlock = blocks[`${this.mouseX},${this.mouseY}`];
+ // if (lastBlock) {
+ // this.emit('leaveBlock', lastBlock, e, true);
+ // }
+ // this.mouseX = -1;
+ // this.mouseY = -1;
+ // });
+ // // click
+ // data.addEventListener('click', e => {
+ // if (
+ // core.status.lockControl ||
+ // !core.isPlaying() ||
+ // !core.status.floorId
+ // )
+ // return;
+ // const {
+ // x: px,
+ // y: py,
+ // size
+ // } = core.actions._getClickLoc(e.offsetX, e.offsetY);
+ // const [bx, by] = getBlockLoc(px, py, size);
+ // const blocks = core.getMapBlocksObj();
+ // const block = blocks[`${bx},${by}`];
+ // if (block) {
+ // this.emit('clickBlock', block, e);
+ // }
+ // });
// ----- mouse
}
}
diff --git a/public/libs/control.js b/public/libs/control.js
index 16448fd..7fda678 100644
--- a/public/libs/control.js
+++ b/public/libs/control.js
@@ -876,39 +876,6 @@ control.prototype.setHeroOpacity = function (
////// 设置画布偏移
control.prototype.setGameCanvasTranslate = function (canvas, x, y) {
// Deprecated. Use RenderItem.transform instead.
- var c = core.dom.gameCanvas[canvas];
- x = x * core.domStyle.scale;
- y = y * core.domStyle.scale;
- c.style.transform = 'translate(' + x + 'px,' + y + 'px)';
- c.style.webkitTransform = 'translate(' + x + 'px,' + y + 'px)';
- c.style.OTransform = 'translate(' + x + 'px,' + y + 'px)';
- c.style.MozTransform = 'translate(' + x + 'px,' + y + 'px)';
- if (main.mode === 'editor' && editor.isMobile) {
- c.style.transform =
- 'translate(' +
- (x / core._PX_) * 96 +
- 'vw,' +
- (y / core._PY_) * 96 +
- 'vw)';
- c.style.webkitTransform =
- 'translate(' +
- (x / core._PX_) * 96 +
- 'vw,' +
- (y / core._PY_) * 96 +
- 'vw)';
- c.style.OTransform =
- 'translate(' +
- (x / core._PX_) * 96 +
- 'vw,' +
- (y / core._PY_) * 96 +
- 'vw)';
- c.style.MozTransform =
- 'translate(' +
- (x / core._PX_) * 96 +
- 'vw,' +
- (y / core._PY_) * 96 +
- 'vw)';
- }
};
////// 加减画布偏移
@@ -3115,13 +3082,11 @@ control.prototype.resize = function () {
if (!core.domStyle.availableScale.includes(core.domStyle.scale)) {
core.domStyle.scale = 1;
}
- core.dom.gameDraw.style.top = '0';
} else {
// 竖屏
core.domStyle.isVertical = true;
core.domStyle.scale = window.innerWidth / core._PX_;
core.domStyle.availableScale = [];
- core.dom.gameDraw.style.top = '10vh';
}
if (!core.domStyle.isVertical) {
@@ -3132,11 +3097,6 @@ control.prototype.resize = function () {
core.domStyle.scale = target - 0.25;
}
- const pw = (480 + 180 * 2) * core.domStyle.scale;
- const ph = 480 * core.domStyle.scale;
- core.dom.gameDraw.style.width = `${pw}px`;
- core.dom.gameDraw.style.height = `${ph}px`;
-
this._doResize({});
this.setToolbarButton();
core.updateStatusBar();
@@ -3147,54 +3107,7 @@ control.prototype._resize_gameGroup = function (obj) {
};
control.prototype._resize_canvas = function (obj) {
- var innerWidth = core._PX_ * core.domStyle.scale + 'px',
- innerHeight = core._PY_ * core.domStyle.scale + 'px';
-
- for (var i = 0; i < core.dom.gameCanvas.length; ++i) {
- core.dom.gameCanvas[i].style.width = innerWidth;
- core.dom.gameCanvas[i].style.height = innerHeight;
- var ctx = core.dom.gameCanvas[i].getContext('2d');
- core.resizeCanvas(ctx, core._PX_, core._PY_);
- }
-
- // resize dynamic canvas
- if (!core.isPlaying()) {
- for (var name in core.dymCanvas) {
- var ctx = core.dymCanvas[name],
- canvas = ctx.canvas;
- // core.maps._setHDCanvasSize(ctx, parseFloat(canvas.getAttribute('_width')), parseFloat(canvas.getAttribute('_height')));
- canvas.style.left =
- parseFloat(canvas.getAttribute('_left')) * core.domStyle.scale +
- 'px';
- canvas.style.top =
- parseFloat(canvas.getAttribute('_top')) * core.domStyle.scale +
- 'px';
- var scale = canvas.getAttribute('_scale') || 1;
- core.resizeCanvas(
- canvas,
- (canvas.width * scale) / core.domStyle.scale,
- (canvas.height * scale) / core.domStyle.scale
- );
- }
- } else {
- for (var name in core.dymCanvas) {
- var ctx = core.dymCanvas[name],
- canvas = ctx.canvas;
- canvas.style.width = canvas.width / devicePixelRatio + 'px';
- canvas.style.height = canvas.height / devicePixelRatio + 'px';
- canvas.style.left =
- parseFloat(canvas.getAttribute('_left')) * core.domStyle.scale +
- 'px';
- canvas.style.top =
- parseFloat(canvas.getAttribute('_top')) * core.domStyle.scale +
- 'px';
- }
- }
- // resize next
- main.dom.next.style.width = main.dom.next.style.height =
- 5 * core.domStyle.scale + 'px';
- main.dom.next.style.borderBottomWidth =
- main.dom.next.style.borderRightWidth = 4 * core.domStyle.scale + 'px';
+ // Deprecated.
};
control.prototype._resize_toolBar = function (obj) {
diff --git a/public/libs/ui.js b/public/libs/ui.js
index 2fd93c3..486f625 100644
--- a/public/libs/ui.js
+++ b/public/libs/ui.js
@@ -934,8 +934,6 @@ ui.prototype.closePanel = function () {
ui.prototype.clearUI = function () {
core.status.boxAnimateObjs = [];
core.deleteCanvas('_selector');
- main.dom.next.style.display = 'none';
- main.dom.next.style.opacity = 1;
core.clearMap('ui');
core.setAlpha('ui', 1);
core.setOpacity('ui', 1);
@@ -1099,7 +1097,7 @@ ui.prototype._getPosition = function (content) {
////// 绘制系统选择光标
ui.prototype._drawWindowSelector = function (background, x, y, w, h) {
- (w = Math.round(w)), (h = Math.round(h));
+ ((w = Math.round(w)), (h = Math.round(h)));
var ctx = core.ui.createCanvas('_selector', x, y, w, h, 165);
this._drawSelector(ctx, background, w, h);
};
@@ -2056,12 +2054,10 @@ ui.prototype._animateUI = function (type, ctx, callback) {
opacity = 1;
}
core.setOpacity(ctx, opacity);
- core.dom.next.style.opacity = opacity;
core.status.event.animateUI = setInterval(function () {
if (type == 'show') opacity += 0.05;
else opacity -= 0.05;
core.setOpacity(ctx, opacity);
- core.dom.next.style.opacity = opacity;
if (opacity >= 1 || opacity <= 0) {
clearInterval(core.status.event.animateUI);
delete core.status.event.animateUI;
@@ -2156,13 +2152,6 @@ ui.prototype.drawTextBox = function (content, config) {
// Step 6: 绘制光标
if (main.mode == 'play') {
- main.dom.next.style.display = 'block';
- main.dom.next.style.borderRightColor =
- main.dom.next.style.borderBottomColor = core.arrayToRGB(
- textAttribute.text
- );
- main.dom.next.style.top =
- (vPos.bottom - 20) * core.domStyle.scale + 'px';
var left = (hPos.left + hPos.right) / 2;
if (
posInfo.position == 'up' &&
@@ -2171,7 +2160,6 @@ ui.prototype.drawTextBox = function (content, config) {
Math.abs(posInfo.px * 32 + 16 - left) < 50
)
left = hPos.right - 64;
- main.dom.next.style.left = left * core.domStyle.scale + 'px';
}
return config;
};
diff --git a/public/main.js b/public/main.js
index a911786..be9eea7 100644
--- a/public/main.js
+++ b/public/main.js
@@ -20,16 +20,12 @@ function main() {
this.dom = {
body: document.body,
- game: document.getElementById('game'),
gameDraw: document.getElementById('game-draw'),
- gameCanvas: document.getElementsByClassName('gameCanvas'),
- data: document.getElementById('data'),
inputDiv: document.getElementById('inputDiv'),
inputMessage: document.getElementById('inputMessage'),
inputBox: document.getElementById('inputBox'),
inputYes: document.getElementById('inputYes'),
- inputNo: document.getElementById('inputNo'),
- next: document.getElementById('next')
+ inputNo: document.getElementById('inputNo')
};
this.mode = 'play';
this.loadList = [
@@ -198,10 +194,6 @@ main.prototype.loadSync = function (mode, callback) {
};
main.prototype.loadAsync = async function (mode, callback) {
- for (var i = 0; i < main.dom.gameCanvas.length; i++) {
- main.canvas[main.dom.gameCanvas[i].id] =
- main.dom.gameCanvas[i].getContext('2d');
- }
main.mode = mode;
// 加载全塔属性代码
diff --git a/public/styles.css b/public/styles.css
index 9b14aa7..5ab6172 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -18,7 +18,11 @@ body {
}
#game-draw {
- position: relative;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
overflow: hidden;
}