AncTe/HumanBreak
1
1
Fork 0
mirror of https://github.com/unanmed/HumanBreak.git synced 2025-09-26 01:41:45 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: 删除 game-draw 中的其他内容，只保留 render-main

Browse Source
This commit is contained in:
unanmed 2025-09-25 12:56:45 +08:00
parent a89bf40e50
commit 721edefaba
9 changed files with 121 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -20,14 +20,8 @@
<body>
<!-- injection -->
<div id="game">
<div id="game-draw">
<canvas class='gameCanvas' id='curtain'></canvas>
<canvas class='gameCanvas' id='ui'></canvas>
<canvas class='gameCanvas' id='data'>此浏览器不支持HTML5</canvas>
<canvas id="render-main"></canvas>
<div id="next"></div>
</div>
<div id="game-draw">
<canvas id="render-main"></canvas>
</div>
<div id='inputDiv'>
<div id='inputDialog'>

2
packages-user/client-modules/src/render/components/input.tsx
View File

@ -155,7 +155,7 @@ export const Input = defineComponent<InputProps, InputEmits, keyof InputEmits>(
now = now.parent;
}
// 应用内边距偏移.
// 应用内边距偏移
const { clientLeft, clientTop } = canvas;
const trans = new Transform();
trans.translate(clientLeft, clientTop);

18
packages-user/client-modules/src/render/shared.ts
View File

@ -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;

35
packages-user/client-modules/src/render/ui/main.tsx
View File

@ -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<typeof Textbox> = {
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<LayerGroup>();
@ -267,10 +271,13 @@ const MainScene = defineComponent(() => {
status={leftStatus}
hidden={hideStatus.value}
></LeftStatusBar>
<g-line line={[180, 0, 180, 480]} lineWidth={1} />
<g-line
line={[STATUS_BAR_WIDTH, 0, STATUS_BAR_WIDTH, MAIN_HEIGHT]}
lineWidth={1}
/>
<container
id="map-draw"
loc={[180, 0, 480, 480]}
loc={[STATUS_BAR_WIDTH, 0, MAP_WIDTH, MAP_HEIGHT]}
zIndex={10}
onClick={clickMap}
onDown={downMap}
@ -295,17 +302,20 @@ const MainScene = defineComponent(() => {
/>
<sprite
noevent
loc={[0, 0, 480, 480]}
loc={[0, 0, MAP_WIDTH, MAP_HEIGHT]}
ref={mapMiscSprite}
zIndex={170}
render={renderMapMisc}
/>
</container>
<g-line line={[180 + 480, 0, 180 + 480, 480]} lineWidth={1} />
<g-line
line={[RIGHT_STATUS_POS, 0, RIGHT_STATUS_POS, MAP_HEIGHT]}
lineWidth={1}
/>
<RightStatusBar
loc={[480 + 180, 0, STATUS_BAR_WIDTH, STATUS_BAR_HEIGHT]}
loc={[RIGHT_STATUS_POS, 0, STATUS_BAR_WIDTH, STATUS_BAR_HEIGHT]}
status={rightStatus}
hidden={hideStatus.value}
hidden={hideStatus.value && ENABLE_RIGHT_STATUS_BAR}
></RightStatusBar>
<container
loc={[0, 0, MAIN_WIDTH, MAIN_HEIGHT]}
@ -322,12 +332,17 @@ const MainScene = defineComponent(() => {
noevent
></g-rect>
<g-line
line={[180, 0, 480 + 180, 0]}
line={[STATUS_BAR_WIDTH, 0, RIGHT_STATUS_POS, 0]}
hidden={!hideStatus.value}
zIndex={100}
/>
<g-line
line={[180, 480, 480 + 180, 480]}
line={[
STATUS_BAR_WIDTH,
MAP_HEIGHT,
RIGHT_STATUS_POS,
MAP_HEIGHT
]}
hidden={!hideStatus.value}
zIndex={100}
/>

154
packages-user/data-base/src/game.ts
View File

@ -165,7 +165,7 @@ class GameListener extends EventEmitter<ListenerEvent> {
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<ListenerEvent> {
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
}
}

89
public/libs/control.js
View File

@ -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) {

14
public/libs/ui.js
View File

@ -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;
};

10
public/main.js
View File

@ -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;
// 加载全塔属性代码

6
public/styles.css
View File

@ -18,7 +18,11 @@ body {
}
#game-draw {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}