AncTe/HumanBreak
1
1
Fork 0
mirror of https://github.com/unanmed/HumanBreak.git synced 2025-09-26 01:51:48 +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> <body>
<!-- injection --> <!-- injection -->
<div id="game"> <div id="game-draw">
<div id="game-draw"> <canvas id="render-main"></canvas>
<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> </div>
<div id='inputDiv'> <div id='inputDiv'>
<div id='inputDialog'> <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; now = now.parent;
} }
// 应用内边距偏移. // 应用内边距偏移
const { clientLeft, clientTop } = canvas; const { clientLeft, clientTop } = canvas;
const trans = new Transform(); const trans = new Transform();
trans.translate(clientLeft, clientTop); 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_WIDTH = 15;
export const MAP_BLOCK_HEIGHT = 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_WIDTH = 32 * MAP_BLOCK_WIDTH;
export const MAP_HEIGHT = 32 * MAP_BLOCK_HEIGHT; 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_WIDTH = MAP_WIDTH + STATUS_BAR_WIDTH * STATUS_BAR_COUNT;
export const MAIN_HEIGHT = MAP_HEIGHT; 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 { Textbox, Tip } from '../components';
import { GameUI } from '@motajs/system-ui'; import { GameUI } from '@motajs/system-ui';
import { import {
ENABLE_RIGHT_STATUS_BAR,
MAIN_HEIGHT, MAIN_HEIGHT,
MAIN_WIDTH, MAIN_WIDTH,
MAP_HEIGHT,
MAP_WIDTH,
RIGHT_STATUS_POS,
STATUS_BAR_HEIGHT, STATUS_BAR_HEIGHT,
STATUS_BAR_WIDTH STATUS_BAR_WIDTH
} from '../shared'; } from '../shared';
@ -71,7 +75,7 @@ const MainScene = defineComponent(() => {
const mainTextboxProps: Props<typeof Textbox> = { const mainTextboxProps: Props<typeof Textbox> = {
text: '', text: '',
hidden: true, hidden: true,
loc: [0, 330, 480, 150], loc: [0, MAP_HEIGHT - 150, MAIN_WIDTH, 150],
zIndex: 30, zIndex: 30,
fillStyle: '#fff', fillStyle: '#fff',
titleFill: 'gold', titleFill: 'gold',
@ -80,7 +84,7 @@ const MainScene = defineComponent(() => {
winskin: 'winskin2.png', winskin: 'winskin2.png',
interval: 100, interval: 100,
lineHeight: 4, lineHeight: 4,
width: 480 width: MAP_WIDTH
}; };
const map = shallowRef<LayerGroup>(); const map = shallowRef<LayerGroup>();
@ -267,10 +271,13 @@ const MainScene = defineComponent(() => {
status={leftStatus} status={leftStatus}
hidden={hideStatus.value} hidden={hideStatus.value}
></LeftStatusBar> ></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 <container
id="map-draw" id="map-draw"
loc={[180, 0, 480, 480]} loc={[STATUS_BAR_WIDTH, 0, MAP_WIDTH, MAP_HEIGHT]}
zIndex={10} zIndex={10}
onClick={clickMap} onClick={clickMap}
onDown={downMap} onDown={downMap}
@ -295,17 +302,20 @@ const MainScene = defineComponent(() => {
/> />
<sprite <sprite
noevent noevent
loc={[0, 0, 480, 480]} loc={[0, 0, MAP_WIDTH, MAP_HEIGHT]}
ref={mapMiscSprite} ref={mapMiscSprite}
zIndex={170} zIndex={170}
render={renderMapMisc} render={renderMapMisc}
/> />
</container> </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 <RightStatusBar
loc={[480 + 180, 0, STATUS_BAR_WIDTH, STATUS_BAR_HEIGHT]} loc={[RIGHT_STATUS_POS, 0, STATUS_BAR_WIDTH, STATUS_BAR_HEIGHT]}
status={rightStatus} status={rightStatus}
hidden={hideStatus.value} hidden={hideStatus.value && ENABLE_RIGHT_STATUS_BAR}
></RightStatusBar> ></RightStatusBar>
<container <container
loc={[0, 0, MAIN_WIDTH, MAIN_HEIGHT]} loc={[0, 0, MAIN_WIDTH, MAIN_HEIGHT]}
@ -322,12 +332,17 @@ const MainScene = defineComponent(() => {
noevent noevent
></g-rect> ></g-rect>
<g-line <g-line
line={[180, 0, 480 + 180, 0]} line={[STATUS_BAR_WIDTH, 0, RIGHT_STATUS_POS, 0]}
hidden={!hideStatus.value} hidden={!hideStatus.value}
zIndex={100} zIndex={100}
/> />
<g-line <g-line
line={[180, 480, 480 + 180, 480]} line={[
STATUS_BAR_WIDTH,
MAP_HEIGHT,
RIGHT_STATUS_POS,
MAP_HEIGHT
]}
hidden={!hideStatus.value} hidden={!hideStatus.value}
zIndex={100} zIndex={100}
/> />

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

@ -165,7 +165,7 @@ class GameListener extends EventEmitter<ListenerEvent> {
constructor() { constructor() {
super(); super();
if (main.replayChecking) return; if (main.replayChecking) return;
if (!!window.core) { if (window.core) {
this.init(); this.init();
} else { } else {
loading.once('coreInit', () => { loading.once('coreInit', () => {
@ -176,84 +176,80 @@ class GameListener extends EventEmitter<ListenerEvent> {
private init() { private init() {
// ----- block // ----- block
// const data = core.canvas.data.canvas;
const data = core.canvas.data.canvas; // const getBlockLoc = (px: number, py: number, size: number) => {
// return [
const getBlockLoc = (px: number, py: number, size: number) => { // Math.floor(((px * 32) / size + core.bigmap.offsetX) / 32),
return [ // Math.floor(((py * 32) / size + core.bigmap.offsetY) / 32)
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 (
// hover & leave & mouseMove // core.status.lockControl ||
data.addEventListener('mousemove', e => { // !core.isPlaying() ||
if ( // !core.status.floorId
core.status.lockControl || // )
!core.isPlaying() || // return;
!core.status.floorId // this.emit('mouseMove', e);
) // const {
return; // x: px,
this.emit('mouseMove', e); // y: py,
const { // size
x: px, // } = core.actions._getClickLoc(e.offsetX, e.offsetY);
y: py, // const [bx, by] = getBlockLoc(px, py, size);
size // const blocks = core.getMapBlocksObj();
} = core.actions._getClickLoc(e.offsetX, e.offsetY); // if (this.mouseX !== bx || this.mouseY !== by) {
const [bx, by] = getBlockLoc(px, py, size); // const lastBlock = blocks[`${this.mouseX},${this.mouseY}`];
const blocks = core.getMapBlocksObj(); // const block = blocks[`${bx},${by}`];
if (this.mouseX !== bx || this.mouseY !== by) { // if (lastBlock) {
const lastBlock = blocks[`${this.mouseX},${this.mouseY}`]; // this.emit('leaveBlock', lastBlock, e, false);
const block = blocks[`${bx},${by}`]; // }
if (!!lastBlock) { // if (block) {
this.emit('leaveBlock', lastBlock, e, false); // this.emit('hoverBlock', block, e);
} // this.mouseX = bx;
if (!!block) { // this.mouseY = by;
this.emit('hoverBlock', block, e); // } else {
this.mouseX = bx; // this.mouseX = -1;
this.mouseY = by; // this.mouseY = -1;
} else { // }
this.mouseX = -1; // }
this.mouseY = -1; // });
} // data.addEventListener('mouseleave', e => {
} // if (
}); // core.status.lockControl ||
data.addEventListener('mouseleave', e => { // !core.isPlaying() ||
if ( // !core.status.floorId
core.status.lockControl || // )
!core.isPlaying() || // return;
!core.status.floorId // const blocks = core.getMapBlocksObj();
) // const lastBlock = blocks[`${this.mouseX},${this.mouseY}`];
return; // if (lastBlock) {
const blocks = core.getMapBlocksObj(); // this.emit('leaveBlock', lastBlock, e, true);
const lastBlock = blocks[`${this.mouseX},${this.mouseY}`]; // }
if (!!lastBlock) { // this.mouseX = -1;
this.emit('leaveBlock', lastBlock, e, true); // this.mouseY = -1;
} // });
this.mouseX = -1; // // click
this.mouseY = -1; // data.addEventListener('click', e => {
}); // if (
// click // core.status.lockControl ||
data.addEventListener('click', e => { // !core.isPlaying() ||
if ( // !core.status.floorId
core.status.lockControl || // )
!core.isPlaying() || // return;
!core.status.floorId // const {
) // x: px,
return; // y: py,
const { // size
x: px, // } = core.actions._getClickLoc(e.offsetX, e.offsetY);
y: py, // const [bx, by] = getBlockLoc(px, py, size);
size // const blocks = core.getMapBlocksObj();
} = core.actions._getClickLoc(e.offsetX, e.offsetY); // const block = blocks[`${bx},${by}`];
const [bx, by] = getBlockLoc(px, py, size); // if (block) {
const blocks = core.getMapBlocksObj(); // this.emit('clickBlock', block, e);
const block = blocks[`${bx},${by}`]; // }
if (!!block) { // });
this.emit('clickBlock', block, e);
}
});
// ----- mouse // ----- mouse
} }
} }

89
public/libs/control.js
View File

@ -876,39 +876,6 @@ control.prototype.setHeroOpacity = function (
////// 设置画布偏移 ////// 设置画布偏移
control.prototype.setGameCanvasTranslate = function (canvas, x, y) { control.prototype.setGameCanvasTranslate = function (canvas, x, y) {
// Deprecated. Use RenderItem.transform instead. // 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)) { if (!core.domStyle.availableScale.includes(core.domStyle.scale)) {
core.domStyle.scale = 1; core.domStyle.scale = 1;
} }
core.dom.gameDraw.style.top = '0';
} else { } else {
// 竖屏 // 竖屏
core.domStyle.isVertical = true; core.domStyle.isVertical = true;
core.domStyle.scale = window.innerWidth / core._PX_; core.domStyle.scale = window.innerWidth / core._PX_;
core.domStyle.availableScale = []; core.domStyle.availableScale = [];
core.dom.gameDraw.style.top = '10vh';
} }
if (!core.domStyle.isVertical) { if (!core.domStyle.isVertical) {
@ -3132,11 +3097,6 @@ control.prototype.resize = function () {
core.domStyle.scale = target - 0.25; 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._doResize({});
this.setToolbarButton(); this.setToolbarButton();
core.updateStatusBar(); core.updateStatusBar();
@ -3147,54 +3107,7 @@ control.prototype._resize_gameGroup = function (obj) {
}; };
control.prototype._resize_canvas = function (obj) { control.prototype._resize_canvas = function (obj) {
var innerWidth = core._PX_ * core.domStyle.scale + 'px', // Deprecated.
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';
}; };
control.prototype._resize_toolBar = function (obj) { 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 () { ui.prototype.clearUI = function () {
core.status.boxAnimateObjs = []; core.status.boxAnimateObjs = [];
core.deleteCanvas('_selector'); core.deleteCanvas('_selector');
main.dom.next.style.display = 'none';
main.dom.next.style.opacity = 1;
core.clearMap('ui'); core.clearMap('ui');
core.setAlpha('ui', 1); core.setAlpha('ui', 1);
core.setOpacity('ui', 1); core.setOpacity('ui', 1);
@ -1099,7 +1097,7 @@ ui.prototype._getPosition = function (content) {
////// 绘制系统选择光标 ////// 绘制系统选择光标
ui.prototype._drawWindowSelector = function (background, x, y, w, h) { 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); var ctx = core.ui.createCanvas('_selector', x, y, w, h, 165);
this._drawSelector(ctx, background, w, h); this._drawSelector(ctx, background, w, h);
}; };
@ -2056,12 +2054,10 @@ ui.prototype._animateUI = function (type, ctx, callback) {
opacity = 1; opacity = 1;
} }
core.setOpacity(ctx, opacity); core.setOpacity(ctx, opacity);
core.dom.next.style.opacity = opacity;
core.status.event.animateUI = setInterval(function () { core.status.event.animateUI = setInterval(function () {
if (type == 'show') opacity += 0.05; if (type == 'show') opacity += 0.05;
else opacity -= 0.05; else opacity -= 0.05;
core.setOpacity(ctx, opacity); core.setOpacity(ctx, opacity);
core.dom.next.style.opacity = opacity;
if (opacity >= 1 || opacity <= 0) { if (opacity >= 1 || opacity <= 0) {
clearInterval(core.status.event.animateUI); clearInterval(core.status.event.animateUI);
delete core.status.event.animateUI; delete core.status.event.animateUI;
@ -2156,13 +2152,6 @@ ui.prototype.drawTextBox = function (content, config) {
// Step 6: 绘制光标 // Step 6: 绘制光标
if (main.mode == 'play') { 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; var left = (hPos.left + hPos.right) / 2;
if ( if (
posInfo.position == 'up' && posInfo.position == 'up' &&
@ -2171,7 +2160,6 @@ ui.prototype.drawTextBox = function (content, config) {
Math.abs(posInfo.px * 32 + 16 - left) < 50 Math.abs(posInfo.px * 32 + 16 - left) < 50
) )
left = hPos.right - 64; left = hPos.right - 64;
main.dom.next.style.left = left * core.domStyle.scale + 'px';
} }
return config; return config;
}; };

10
public/main.js
View File

@ -20,16 +20,12 @@ function main() {
this.dom = { this.dom = {
body: document.body, body: document.body,
game: document.getElementById('game'),
gameDraw: document.getElementById('game-draw'), gameDraw: document.getElementById('game-draw'),
gameCanvas: document.getElementsByClassName('gameCanvas'),
data: document.getElementById('data'),
inputDiv: document.getElementById('inputDiv'), inputDiv: document.getElementById('inputDiv'),
inputMessage: document.getElementById('inputMessage'), inputMessage: document.getElementById('inputMessage'),
inputBox: document.getElementById('inputBox'), inputBox: document.getElementById('inputBox'),
inputYes: document.getElementById('inputYes'), inputYes: document.getElementById('inputYes'),
inputNo: document.getElementById('inputNo'), inputNo: document.getElementById('inputNo')
next: document.getElementById('next')
}; };
this.mode = 'play'; this.mode = 'play';
this.loadList = [ this.loadList = [
@ -198,10 +194,6 @@ main.prototype.loadSync = function (mode, callback) {
}; };
main.prototype.loadAsync = async 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; main.mode = mode;
// 加载全塔属性代码 // 加载全塔属性代码

6
public/styles.css
View File

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