hypercross
/
boardgame-phaser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: fix onitama sizing

This commit is contained in:
hyper 2026-04-12 19:17:22 +08:00
parent e5b53c6332
commit 02d2f45da2
5 changed files with 36 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/onitama-game/src/scenes/MenuScene.ts
View File

@ -17,12 +17,12 @@ const MENU_CONFIG = {
},
button: {
width: 200,
height: 60,
height: 80,
},
positions: {
titleY: -100,
titleY: -120,
buttonY: 40,
subtitleY: 140,
subtitleY: 160,
},
} as const;

16
packages/onitama-game/src/scenes/OnitamaScene.ts
View File

@ -60,11 +60,11 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
// Info text
this.infoText = this.add.text(
20,
40,
BOARD_OFFSET.y,
'',
{
fontSize: '15px',
fontSize: '16px',
fontFamily: 'Arial',
color: '#4b5563',
}
@ -94,7 +94,7 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
// Red cards label - 棋盘下方
const redLabel = this.add.text(
boardLeft + (BOARD_SIZE * CELL_SIZE) / 2,
boardBottom + 10,
boardBottom + 40,
"RED",
{
fontSize: '16px',
@ -107,7 +107,7 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
// Black cards label - 棋盘上方
const blackLabel = this.add.text(
boardLeft + (BOARD_SIZE * CELL_SIZE) / 2,
boardTop - 10,
boardTop - 40,
"BLACK",
{
fontSize: '16px',
@ -150,8 +150,8 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
g.strokePath();
this.add.text(
20,
20,
40,
40,
'Onitama',
{
fontSize: '28px',
@ -231,8 +231,8 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
/** 创建菜单按钮 */
private createMenuButton(): void {
const buttonX = this.game.scale.width - 80;
const buttonY = 30;
const buttonX = 680;
const buttonY = 40;
this.menuButtonBg = this.add.rectangle(buttonX, buttonY, 120, 40, 0x6b7280)
.setInteractive({ useHandCursor: true });

37
packages/onitama-game/src/spawners/CardSpawner.ts
View File

@ -5,9 +5,10 @@ import type { OnitamaScene } from '@/scenes/OnitamaScene';
import { BOARD_OFFSET, CELL_SIZE } from './PawnSpawner';
import { effect } from "@preact/signals-core";
export const CARD_WIDTH = 100;
export const CARD_HEIGHT = 140;
export const CARD_WIDTH = 80;
export const CARD_HEIGHT = 120;
const BOARD_SIZE = 5;
const CARD_SPACING = 100; // 确保每张卡牌至少 80x80 区域
export interface CardSpawnData {
cardId: string;
@ -176,7 +177,7 @@ export class CardContainer extends Phaser.GameObjects.Container {
.setStrokeStyle(2, 0x6b7280);
this.add(bg);
const title = (this.scene as OnitamaScene).add.text(0, -CARD_HEIGHT / 2 + 15, card.id, {
const title = (this.scene as OnitamaScene).add.text(0, -CARD_HEIGHT / 2 + 16, card.id, {
fontSize: '12px',
fontFamily: 'Arial',
color: '#1f2937',
@ -184,11 +185,11 @@ export class CardContainer extends Phaser.GameObjects.Container {
this.add(title);
const grid = (this.scene as OnitamaScene).add.graphics();
const cellSize = 16;
const cellSize = 14;
const gridWidth = 5 * cellSize;
const gridHeight = 5 * cellSize;
const gridStartX = -gridWidth / 2;
const gridStartY = -gridHeight / 2 + 30;
const gridStartY = -gridHeight / 2 + 20;
for (let row = 0; row < 5; row++) {
for (let col = 0; col < 5; col++) {
@ -209,7 +210,7 @@ export class CardContainer extends Phaser.GameObjects.Container {
}
this.add(grid);
const playerText = (this.scene as OnitamaScene).add.text(0, CARD_HEIGHT / 2 - 15, card.startingPlayer, {
const playerText = (this.scene as OnitamaScene).add.text(0, CARD_HEIGHT / 2 - 16, card.startingPlayer, {
fontSize: '10px',
fontFamily: 'Arial',
color: '#6b7280',
@ -255,20 +256,20 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
if (data.position === 'red') {
// 红方卡牌在棋盘下方，水平排列
return {
x: boardLeft + BOARD_SIZE * CELL_SIZE / 2 - (data.index - 0.5) * (CARD_WIDTH + 15),
y: boardBottom + CARD_HEIGHT - 30,
x: boardCenterX - (data.index - 0.5) * CARD_SPACING,
y: boardBottom + CARD_HEIGHT / 2 + 40,
};
} else if (data.position === 'black') {
// 黑方卡牌在棋盘上方，水平排列
return {
x: boardLeft + BOARD_SIZE * CELL_SIZE / 2 - (data.index - 0.5) * (CARD_WIDTH + 15),
y: boardTop - CARD_HEIGHT + 30,
x: boardCenterX - (data.index - 0.5) * CARD_SPACING,
y: boardTop - CARD_HEIGHT / 2 - 40,
};
} else {
// 备用卡牌在棋盘左侧，垂直居中
const boardCenterY = boardTop + (BOARD_SIZE * CELL_SIZE) / 2;
return {
x: boardLeft - CARD_WIDTH,
x: boardLeft - CARD_WIDTH / 2 - 40,
y: boardCenterY,
};
}
@ -308,7 +309,7 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
targets: obj,
x: pos.x,
y: pos.y,
duration: 350,
duration: 600,
ease: 'Back.easeOut',
});
@ -329,8 +330,16 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
return emptyContainer;
}
// 计算旋转角度 - 初始不旋转，后续由 onUpdate 处理
const container = new CardContainer(this.scene, data.cardId, card, 0);
// 计算初始旋转角度
const isBlackTurn = this.scene.state.currentPlayer === 'black';
let initialRotation = 0;
if (data.position === 'black') {
initialRotation = -180;
} else if (data.position === 'spare' && isBlackTurn) {
initialRotation = -180;
}
const container = new CardContainer(this.scene, data.cardId, card, initialRotation);
const pos = this.getCardPosition(data);
container.x = pos.x;
container.y = pos.y;

2
packages/onitama-game/src/spawners/PawnSpawner.ts
View File

@ -6,7 +6,7 @@ import type { OnitamaUIState } from '@/state';
import { effect } from "@preact/signals-core";
export const CELL_SIZE = 80;
export const BOARD_OFFSET = { x: 240, y: 200 };
export const BOARD_OFFSET = { x: 240, y: 240 };
export const BOARD_SIZE = 5;
export function boardToScreen(boardX: number, boardY: number): { x: number; y: number } {

2
packages/onitama-game/src/ui/App.tsx
View File

@ -15,7 +15,7 @@ export default function App() {
return (
<div className="flex flex-col h-screen">
<div className="flex-1 flex relative justify-center items-center">
<PhaserGame initialScene="MenuScene">
<PhaserGame initialScene="MenuScene" config={{ width: 720, height: 840 }}>
<PhaserScene sceneKey="MenuScene" scene={menuScene} />
<PhaserScene sceneKey="OnitamaScene" scene={gameScene} data={{gameHost}}/>
</PhaserGame>