AncTe/HumanBreak
1
1
Fork 0
mirror of https://github.com/unanmed/HumanBreak.git synced 2025-10-09 04:11:46 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Compare commits

base: AncTe:d2e35919be06142dbc65bbaacd92445f471f3489
Branches Tags
AncTe:master
AncTe:template
AncTe:dev
AncTe:dev-strawberry
AncTe:template-v2.A
AncTe:dev-qdzwxe
AncTe:dev-coderzhlh
AncTe:gh-pages
AncTe:dev-06NeverSeeYou
...
compare: AncTe:81e96e31f08cc5544b16c1e00888268214b890f5
Branches Tags
AncTe:template
AncTe:dev
AncTe:dev-strawberry
AncTe:template-v2.A
AncTe:dev-qdzwxe
AncTe:dev-coderzhlh
AncTe:gh-pages
AncTe:dev-06NeverSeeYou
AncTe:master

5 Commits
d2e35919be ... 81e96e31f0

Author SHA1 Message Date
AncTe
81e96e31f0
Merge 4c6343227f into 820dc5bf4c 2025-09-25 05:00:27 +00:00
unanmed
4c6343227f fix: 寻路路径在大地图下错位 2025-09-25 13:00:13 +08:00
unanmed
721edefaba chore: 删除 game-draw 中的其他内容，只保留 render-main 2025-09-25 12:56:45 +08:00
unanmed
a89bf40e50 chore: 添加压缩包过大时的可能解决方案 2025-09-25 11:29:03 +08:00
unanmed
9a175e9afe fix: vite.config.ts 端口与 hotReload 端口不一致 2025-09-25 11:10:21 +08:00
13 changed files with 212 additions and 245 deletions
Show Stats 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);

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

@ -1,10 +1,21 @@
// 地图格子宽高，此处仅影响画面，不影响游戏内逻辑，游戏内逻辑地图大小请在 core.js 中修改
export const MAP_BLOCK_WIDTH = 15;
export const MAP_BLOCK_HEIGHT = 15;
// 地图像素宽高
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_WIDTH = 180;
export const STATUS_BAR_HEIGHT = 480; 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 ENABLE_RIGHT_STATUS_BAR = true;
export const STATUS_BAR_COUNT = ENABLE_RIGHT_STATUS_BAR ? 2 : 1;
export const MAP_WIDTH = 480; // 游戏画面像素宽高，宽=地图宽度+状态栏宽度*状态栏数量
export const MAP_HEIGHT = 480; export const MAIN_WIDTH = MAP_WIDTH + STATUS_BAR_WIDTH * STATUS_BAR_COUNT;
export const MAIN_HEIGHT = MAP_HEIGHT;
export const MAIN_WIDTH = 480 + 180 * 2;
export const MAIN_HEIGHT = 480;

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

@ -5,7 +5,8 @@ import {
IActionEvent, IActionEvent,
MotaOffscreenCanvas2D, MotaOffscreenCanvas2D,
Sprite, Sprite,
onTick onTick,
transformCanvas
} from '@motajs/render'; } from '@motajs/render';
import { WeatherController } from '../weather'; import { WeatherController } from '../weather';
import { import {
@ -19,8 +20,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 +76,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 +85,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>();
@ -207,7 +212,9 @@ const MainScene = defineComponent(() => {
const renderMapMisc = (canvas: MotaOffscreenCanvas2D) => { const renderMapMisc = (canvas: MotaOffscreenCanvas2D) => {
const step = core.status.stepPostfix; const step = core.status.stepPostfix;
if (!step) return; const camera = map.value?.camera;
if (!step || !camera) return;
transformCanvas(canvas, camera);
const ctx = canvas.ctx; const ctx = canvas.ctx;
ctx.fillStyle = '#fff'; ctx.fillStyle = '#fff';
step.forEach(({ x, y, direction }) => { step.forEach(({ x, y, direction }) => {
@ -267,10 +274,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 +305,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 +335,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
} }
} }

11
packages-user/legacy-plugin-client/src/dev/hotReload.ts
View File

@ -2,9 +2,16 @@
export {}; export {};
/* @__PURE__ */ (function () { interface PortResponse {
server: number;
}
/* @__PURE__ */ (async function () {
if (main.mode !== 'play' || main.replayChecking) return; if (main.mode !== 'play' || main.replayChecking) return;
const res = await fetch('/getPort');
const { server } = (await res.json()) as PortResponse;
/** /**
* 热重载css * 热重载css
* @param {string} data * @param {string} data
@ -127,7 +134,7 @@ export {};
console.log(`Data hot reload: ${data}`); console.log(`Data hot reload: ${data}`);
} }
const ws = new WebSocket('ws://127.0.0.1:3000'); const ws = new WebSocket(`ws://127.0.0.1:${server}`);
ws.addEventListener('open', () => { ws.addEventListener('open', () => {
console.log(`Web socket connect successfully`); console.log(`Web socket connect successfully`);
}); });

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

15
script/build-game.ts
View File

@ -399,7 +399,7 @@ async function buildGame() {
if (level === ClientDataLevel.Error) { if (level === ClientDataLevel.Error) {
logProgress(2, ProgressStatus.Fail); logProgress(2, ProgressStatus.Fail);
process.stderr.write( process.stderr.write(
`客户端似乎引用了数据端内容，请仔细检查后再构建！` `数据端似乎引用了客户端内容，请仔细检查后再构建！`
); );
process.exit(1); process.exit(1);
} }
@ -647,6 +647,19 @@ async function buildGame() {
process.stdout.write( process.stdout.write(
`⚠️ 压缩包大于 100M，可能导致发塔困难，请考虑降低塔的大小\r\n` `⚠️ 压缩包大于 100M，可能导致发塔困难，请考虑降低塔的大小\r\n`
); );
const suggections: string[] = [];
if (dataObject.main.bgms.some(v => !v.endsWith('opuw'))) {
suggections.push(`将 BGM 和音效换用 opus 格式`);
}
if (dataObject.main.images.some(v => !v.endsWith('webp'))) {
suggections.push(`将图片换用无损 webp 格式`);
}
if (suggections.length > 0) {
process.stdout.write(`降低压缩包体积的可能方案：\r\n`);
suggections.forEach((v, i) => {
process.stdout.write(`${i + 1}. ${v}\r\n`);
});
}
} }
process.stdout.write(`压缩包大小：${formatSize(zipSize)}\r\n`); process.stdout.write(`压缩包大小：${formatSize(zipSize)}\r\n`);
process.stdout.write(`源码大小：${formatSize(sourceSize)}\r\n`); process.stdout.write(`源码大小：${formatSize(sourceSize)}\r\n`);

61
script/dev.ts
View File

@ -1,5 +1,10 @@
/* eslint-disable no-console */ /* eslint-disable no-console */
import { createServer } from 'vite'; import {
createServer,
loadConfigFromFile,
mergeConfig,
UserConfig
} from 'vite';
import { Server } from 'http'; import { Server } from 'http';
import { ensureDir, move, pathExists, remove } from 'fs-extra'; import { ensureDir, move, pathExists, remove } from 'fs-extra';
import { readFile, readdir, writeFile } from 'fs/promises'; import { readFile, readdir, writeFile } from 'fs/promises';
@ -500,6 +505,14 @@ const apiGetEsmFiles = async (req: Request, res: Response) => {
return getEsmFile(req, res, path.resolved); return getEsmFile(req, res, path.resolved);
}; };
const apiGetPort = async (_req: Request, res: Response) => {
const port = {
vite: vitePort,
server: serverPort
};
res.end(JSON.stringify(port));
};
/** /**
* 声明某种类型 * 声明某种类型
* @param {string} type 类型 * @param {string} type 类型
@ -677,12 +690,49 @@ async function ensureConfig() {
} }
(async function () { (async function () {
// 1. 启动vite服务 // 1. 加载 vite.config.ts
const vite = await createServer(); const fsHost = `http://127.0.0.1:${serverPort}`;
const config = await loadConfigFromFile({
command: 'serve',
mode: 'development'
});
if (!config) {
console.error(`Cannot load config file.`);
return;
}
const merged = mergeConfig(config.config, {
server: {
proxy: {
'/readFile': fsHost,
'/writeFile': fsHost,
'/writeMultiFiles': fsHost,
'/listFile': fsHost,
'/makeDir': fsHost,
'/moveFile': fsHost,
'/deleteFile': fsHost,
'/getPort': fsHost,
'^/all/.*': fsHost,
'^/forceTem/.*': {
target: fsHost,
changeOrigin: true,
rewrite(path) {
return path.replace(/^\/forceTem/, '');
}
},
'/danmaku': 'https://h5mota.com/backend/tower/barrage.php'
}
}
} satisfies UserConfig);
// 2. 启动vite服务
const vite = await createServer({
...merged,
configFile: false
});
await vite.listen(vitePort); await vite.listen(vitePort);
console.log(`游戏地址：http://localhost:${vitePort}/`); console.log(`游戏地址：http://localhost:${vitePort}/`);
// 2. 启动样板http服务 // 3. 启动样板http服务
await ensureConfig(); await ensureConfig();
const app = express(); const app = express();
@ -700,6 +750,7 @@ async function ensureConfig() {
app.get('/all/__all_floors__.js', apiGetAllFloors); app.get('/all/__all_floors__.js', apiGetAllFloors);
app.get('/all/__all_animates__', apiGetAllAnimates); app.get('/all/__all_animates__', apiGetAllAnimates);
app.get('/esm', apiGetEsmFiles); app.get('/esm', apiGetEsmFiles);
app.get('/getPort', apiGetPort);
const server = app.listen(serverPort); const server = app.listen(serverPort);
@ -710,7 +761,7 @@ async function ensureConfig() {
); );
}); });
// 3. 启动样板ws热重载服务 // 4. 启动样板ws热重载服务
startWsServer(server); startWsServer(server);
process.on('SIGTERM', () => { process.on('SIGTERM', () => {

20
vite.config.ts
View File

@ -5,8 +5,6 @@ import path from 'path';
import postcssPresetEnv from 'postcss-preset-env'; import postcssPresetEnv from 'postcss-preset-env';
import * as glob from 'glob'; import * as glob from 'glob';
const FSHOST = 'http://127.0.0.1:3000/';
const custom = [ const custom = [
'container', 'image', 'sprite', 'shader', 'text', 'comment', 'custom', 'container', 'image', 'sprite', 'shader', 'text', 'comment', 'custom',
'layer', 'layer-group', 'animate', 'damage', 'graphics', 'icon', 'winskin', 'layer', 'layer-group', 'animate', 'damage', 'graphics', 'icon', 'winskin',
@ -57,24 +55,6 @@ export default defineConfig({
} }
}, },
server: { server: {
proxy: {
'/readFile': FSHOST,
'/writeFile': FSHOST,
'/writeMultiFiles': FSHOST,
'/listFile': FSHOST,
'/makeDir': FSHOST,
'/moveFile': FSHOST,
'/deleteFile': FSHOST,
'^/all/.*': FSHOST,
'^/forceTem/.*': {
target: FSHOST,
changeOrigin: true,
rewrite(path) {
return path.replace(/^\/forceTem/, '');
},
},
'/danmaku': 'https://h5mota.com/backend/tower/barrage.php'
},
watch: { watch: {
ignored: ['**/public/**'] ignored: ['**/public/**']
}, },