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

Compare commits

base: hypercross:71ccb8732e5450bcd2c7f34b6a4f371abd4b1f91
Branches Tags
hypercross:master
..
compare: hypercross:3e064f437b5ad88ad2bb02bcffec8484bdd55fb5
Branches Tags
hypercross:master

No commits in common. "71ccb8732e5450bcd2c7f34b6a4f371abd4b1f91" and "3e064f437b5ad88ad2bb02bcffec8484bdd55fb5" have entirely different histories.
71ccb8732e ... 3e064f437b

4 changed files with 49 additions and 74 deletions
Show Stats Expand all files Collapse all files

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

@ -57,15 +57,15 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
// Info text
this.infoText = this.add.text(
20,
BOARD_OFFSET.y,
BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE + 30,
'',
{
fontSize: '15px',
fontSize: '20px',
fontFamily: 'Arial',
color: '#4b5563',
}
);
).setOrigin(0.5);
// Update info text when UI state changes
this.addEffect(() => {
@ -80,13 +80,12 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
const boardLeft = BOARD_OFFSET.x;
const boardTop = BOARD_OFFSET.y;
const boardRight = BOARD_OFFSET.x + BOARD_SIZE * CELL_SIZE;
const boardBottom = BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE;
// Red cards label - 棋盘下方
// Red cards label
const redLabel = this.add.text(
boardLeft + (BOARD_SIZE * CELL_SIZE) / 2,
boardBottom + 10,
"RED",
boardLeft - CARD_WIDTH - 60 + CARD_WIDTH / 2,
boardTop + 50 + 2 * (CARD_HEIGHT + 15) + 10,
"RED's Cards",
{
fontSize: '16px',
fontFamily: 'Arial',
@ -95,27 +94,47 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
).setOrigin(0.5, 0);
this.cardLabelContainers.set('red', redLabel);
// Black cards label - 棋盘上方
// Black cards label
const blackLabel = this.add.text(
boardLeft + (BOARD_SIZE * CELL_SIZE) / 2,
boardTop - 10,
"BLACK",
boardRight + 60 + CARD_WIDTH / 2,
boardTop + 50 + 2 * (CARD_HEIGHT + 15) + 10,
"BLACK's Cards",
{
fontSize: '16px',
fontFamily: 'Arial',
color: '#3b82f6',
}
).setOrigin(0.5, 1);
).setOrigin(0.5, 0);
this.cardLabelContainers.set('black', blackLabel);
// Spare card label
const boardCenterX = boardLeft + (BOARD_SIZE * CELL_SIZE) / 2;
const spareLabel = this.add.text(
boardCenterX,
boardTop - 50,
'Spare Card',
{
fontSize: '16px',
fontFamily: 'Arial',
color: '#6b7280',
}
).setOrigin(0.5, 0);
this.cardLabelContainers.set('spare', spareLabel);
}
private updateInfoText(): void {
const currentPlayer = this.state.currentPlayer;
const selectedCard = this.uiState.value.selectedCard;
const selectedPiece = this.uiState.value.selectedPiece;
if (this.state.winner) {
this.infoText.setText(`${this.state.winner} wins!`);
} else if (!selectedCard) {
this.infoText.setText(`${currentPlayer}'s turn - Select a card first`);
} else if (!selectedPiece) {
this.infoText.setText(`Card: ${selectedCard} - Select a piece to move`);
} else {
this.infoText.setText(`Turn ${this.state.turn + 1}\n\n${currentPlayer}`);
this.infoText.setText(`${currentPlayer}'s turn (Turn ${this.state.turn + 1})`);
}
}
@ -141,15 +160,15 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
g.strokePath();
this.add.text(
20,
20,
BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
BOARD_OFFSET.y - 40,
'Onitama',
{
fontSize: '28px',
fontFamily: 'Arial',
color: '#1f2937',
}
);
).setOrigin(0.5);
}
private setupInput(): void {

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

@ -23,19 +23,14 @@ export class CardContainer extends Phaser.GameObjects.Container {
private highlightRect: Phaser.GameObjects.Rectangle | null = null;
private highlightTween: Phaser.Tweens.Tween | null = null;
private _cardId: string;
private _rotation: number = 0;
constructor(scene: OnitamaScene, cardId: string, card: Card, rotation: number = 0) {
constructor(scene: OnitamaScene, cardId: string, card: Card) {
super(scene, 0, 0);
this._cardId = cardId;
this._rotation = rotation;
// 将容器添加到场景
scene.add.existing(this);
// 应用旋转
this.angle = rotation;
// 创建卡牌视觉
this.createCardVisual(card);
@ -47,26 +42,6 @@ export class CardContainer extends Phaser.GameObjects.Container {
this.addHighlightEffect(scene);
}
/**
* 更新卡牌旋转（带动画）
*/
setRotation(rotation: number, animated: boolean = false): this {
if (animated) {
const currentAngle = this.angle;
const tween = this.scene.tweens.add({
targets: this,
angle: { from: currentAngle, to: rotation },
duration: 400,
ease: 'Back.easeOut',
});
(this.scene as OnitamaScene).addTweenInterruption(tween);
} else {
this.angle = rotation;
}
this._rotation = rotation;
return this;
}
/**
* 高亮卡牌
*/
@ -250,26 +225,21 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
const boardTop = BOARD_OFFSET.y;
const boardRight = BOARD_OFFSET.x + BOARD_SIZE * CELL_SIZE;
const boardCenterX = boardLeft + (BOARD_SIZE * CELL_SIZE) / 2;
const boardBottom = BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE;
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: boardLeft - CARD_WIDTH - 60 + 60,
y: boardTop + 80 + data.index * (CARD_HEIGHT + 15),
};
} 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: boardRight + 60 + 40,
y: boardTop + 80 + data.index * (CARD_HEIGHT + 15),
};
} else {
// 备用卡牌在棋盘左侧，垂直居中
const boardCenterY = boardTop + (BOARD_SIZE * CELL_SIZE) / 2;
return {
x: boardLeft - CARD_WIDTH,
y: boardCenterY,
x: boardCenterX,
y: boardTop - CARD_HEIGHT - 20,
};
}
}
@ -281,20 +251,6 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
}
onUpdate(data: CardSpawnData, obj: CardContainer): void {
const isBlackTurn = this.scene.state.currentPlayer === 'black';
// 检查卡牌是否需要旋转
let targetRotation = 0;
if (data.position === 'black') {
targetRotation = -180; // 黑方卡牌始终旋转
} else if (data.position === 'spare' && isBlackTurn) {
targetRotation = -180; // 备用卡牌在黑方回合旋转
}
if (obj.angle !== targetRotation) {
obj.setRotation(targetRotation, true);
}
// 只在位置实际变化时才播放移动动画
if (!this.hasPositionChanged(data)) {
this.previousData.set(data.cardId, { ...data });
@ -329,8 +285,7 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
return emptyContainer;
}
// 计算旋转角度 - 初始不旋转，后续由 onUpdate 处理
const container = new CardContainer(this.scene, data.cardId, card, 0);
const container = new CardContainer(this.scene, data.cardId, card);
const pos = this.getCardPosition(data);
container.x = pos.x;
container.y = pos.y;

3
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: 200, y: 180 };
export const BOARD_SIZE = 5;
export function boardToScreen(boardX: number, boardY: number): { x: number; y: number } {
@ -228,6 +228,7 @@ export class PawnSpawner implements Spawner<Pawn, PawnContainer> {
targets: obj,
scale: 0,
alpha: 0,
y: obj.y - 30,
duration: 300,
ease: 'Back.easeIn',
onComplete: () => obj.destroy(),

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

@ -19,8 +19,8 @@ export default function App(props: { gameModule: any, gameScene: { new(): Phaser
const label = useComputed(() => gameHost.value.gameHost.status.value === 'running' ? 'Restart' : 'Start');
const phaserConfig: Partial<Phaser.Types.Core.GameConfig> = {
width: 700,
height: 800,
width: 800,
height: 700,
};
return (