415 lines
12 KiB
TypeScript
415 lines
12 KiB
TypeScript
import Phaser from 'phaser';
|
|
import type {BoopState, BoopPart, PlayerType, PieceType} from '@/game/boop';
|
|
import { GameHostScene } from 'boardgame-phaser';
|
|
import { spawnEffect, type Spawner } from 'boardgame-phaser';
|
|
import type { ReadonlySignal } from '@preact/signals-core';
|
|
import {commands} from "@/game/boop";
|
|
|
|
const BOARD_SIZE = 6;
|
|
const CELL_SIZE = 80;
|
|
const BOARD_OFFSET = { x: 80, y: 100 };
|
|
|
|
export class GameScene extends GameHostScene<BoopState> {
|
|
private boardContainer!: Phaser.GameObjects.Container;
|
|
private gridGraphics!: Phaser.GameObjects.Graphics;
|
|
private turnText!: Phaser.GameObjects.Text;
|
|
private infoText!: Phaser.GameObjects.Text;
|
|
private winnerOverlay?: Phaser.GameObjects.Container;
|
|
private whiteSupplyText!: Phaser.GameObjects.Text;
|
|
private blackSupplyText!: Phaser.GameObjects.Text;
|
|
private pieceTypeSelector!: Phaser.GameObjects.Container;
|
|
private selectedPieceType: PieceType = 'kitten';
|
|
private kittenButton!: Phaser.GameObjects.Container;
|
|
private catButton!: Phaser.GameObjects.Container;
|
|
|
|
constructor() {
|
|
super('GameScene');
|
|
}
|
|
|
|
create(): void {
|
|
super.create();
|
|
|
|
this.boardContainer = this.add.container(0, 0);
|
|
this.gridGraphics = this.add.graphics();
|
|
this.drawGrid();
|
|
this.createSupplyUI();
|
|
|
|
this.disposables.add(spawnEffect(new BoopPartSpawner(this, this.gameHost.state)));
|
|
|
|
this.watch(() => {
|
|
const winner = this.state.winner;
|
|
if (winner) {
|
|
this.showWinner(winner);
|
|
} else if (this.winnerOverlay) {
|
|
this.winnerOverlay.destroy();
|
|
this.winnerOverlay = undefined;
|
|
}
|
|
});
|
|
|
|
this.watch(() => {
|
|
const currentPlayer = this.state.currentPlayer;
|
|
this.updateTurnText(currentPlayer);
|
|
this.updateSupplyUI();
|
|
this.updatePieceTypeSelector();
|
|
});
|
|
|
|
this.createPieceTypeSelector();
|
|
this.setupInput();
|
|
}
|
|
|
|
private setupInput(): void {
|
|
for (let row = 0; row < BOARD_SIZE; row++) {
|
|
for (let col = 0; col < BOARD_SIZE; col++) {
|
|
const x = BOARD_OFFSET.x + col * CELL_SIZE + CELL_SIZE / 2;
|
|
const y = BOARD_OFFSET.y + row * CELL_SIZE + CELL_SIZE / 2;
|
|
|
|
const zone = this.add.zone(x, y, CELL_SIZE, CELL_SIZE).setInteractive();
|
|
|
|
zone.on('pointerdown', () => {
|
|
if (this.state.winner) return;
|
|
if (this.isCellOccupied(row, col)) return;
|
|
|
|
const cmd = commands.play(this.state.currentPlayer, row, col, this.selectedPieceType);
|
|
const error = this.gameHost.onInput(cmd);
|
|
if (error) {
|
|
console.warn('Invalid move:', error);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
private drawGrid(): void {
|
|
const g = this.gridGraphics;
|
|
g.lineStyle(2, 0x6b7280);
|
|
|
|
for (let i = 1; i < BOARD_SIZE; i++) {
|
|
g.lineBetween(
|
|
BOARD_OFFSET.x + i * CELL_SIZE,
|
|
BOARD_OFFSET.y,
|
|
BOARD_OFFSET.x + i * CELL_SIZE,
|
|
BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE,
|
|
);
|
|
g.lineBetween(
|
|
BOARD_OFFSET.x,
|
|
BOARD_OFFSET.y + i * CELL_SIZE,
|
|
BOARD_OFFSET.x + BOARD_SIZE * CELL_SIZE,
|
|
BOARD_OFFSET.y + i * CELL_SIZE,
|
|
);
|
|
}
|
|
|
|
g.strokePath();
|
|
|
|
this.add.text(BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2, BOARD_OFFSET.y - 50, 'Boop Game', {
|
|
fontSize: '32px',
|
|
fontFamily: 'Arial',
|
|
color: '#1f2937',
|
|
}).setOrigin(0.5);
|
|
|
|
this.turnText = this.add.text(
|
|
BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
|
|
BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE + 30,
|
|
'',
|
|
{
|
|
fontSize: '22px',
|
|
fontFamily: 'Arial',
|
|
color: '#4b5563',
|
|
}
|
|
).setOrigin(0.5);
|
|
|
|
this.infoText = this.add.text(
|
|
BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
|
|
BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE + 60,
|
|
'Click to place kitten. Cats win with 3 in a row!',
|
|
{
|
|
fontSize: '16px',
|
|
fontFamily: 'Arial',
|
|
color: '#6b7280',
|
|
}
|
|
).setOrigin(0.5);
|
|
|
|
this.updateTurnText(this.state.currentPlayer);
|
|
}
|
|
|
|
private createSupplyUI(): void {
|
|
const boardCenterX = BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2;
|
|
const uiY = BOARD_OFFSET.y - 20;
|
|
|
|
// 白色玩家储备
|
|
this.whiteSupplyText = this.add.text(
|
|
boardCenterX - 150,
|
|
uiY,
|
|
'',
|
|
{
|
|
fontSize: '16px',
|
|
fontFamily: 'Arial',
|
|
color: '#ffffff',
|
|
backgroundColor: '#000000',
|
|
padding: { x: 10, y: 5 },
|
|
}
|
|
).setOrigin(0.5).setDepth(100);
|
|
|
|
// 黑色玩家储备
|
|
this.blackSupplyText = this.add.text(
|
|
boardCenterX + 150,
|
|
uiY,
|
|
'',
|
|
{
|
|
fontSize: '16px',
|
|
fontFamily: 'Arial',
|
|
color: '#ffffff',
|
|
backgroundColor: '#333333',
|
|
padding: { x: 10, y: 5 },
|
|
}
|
|
).setOrigin(0.5).setDepth(100);
|
|
|
|
this.updateSupplyUI();
|
|
}
|
|
|
|
private updateSupplyUI(): void {
|
|
const white = this.state.players.white;
|
|
const black = this.state.players.black;
|
|
|
|
this.whiteSupplyText.setText(
|
|
`⚪ WHITE\n🐾 ${white.kitten.supply} | 🐱 ${white.cat.supply}`
|
|
);
|
|
|
|
this.blackSupplyText.setText(
|
|
`⚫ BLACK\n🐾 ${black.kitten.supply} | 🐱 ${black.cat.supply}`
|
|
);
|
|
|
|
// 高亮当前玩家
|
|
const isWhiteTurn = this.state.currentPlayer === 'white';
|
|
this.whiteSupplyText.setStyle({ backgroundColor: isWhiteTurn ? '#fbbf24' : '#000000' });
|
|
this.blackSupplyText.setStyle({ backgroundColor: !isWhiteTurn ? '#fbbf24' : '#333333' });
|
|
}
|
|
|
|
private createPieceTypeSelector(): void {
|
|
const boardCenterX = BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2;
|
|
const selectorY = BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE + 100;
|
|
|
|
this.pieceTypeSelector = this.add.container(boardCenterX, selectorY);
|
|
|
|
// 标签文字
|
|
const label = this.add.text(-120, 0, '放置:', {
|
|
fontSize: '18px',
|
|
fontFamily: 'Arial',
|
|
color: '#4b5563',
|
|
}).setOrigin(0.5, 0.5);
|
|
|
|
// 小猫按钮
|
|
this.kittenButton = this.createPieceButton('kitten', '🐾 小猫', -30);
|
|
this.catButton = this.createPieceButton('cat', '🐱 大猫', 50);
|
|
|
|
this.pieceTypeSelector.add([label, this.kittenButton, this.catButton]);
|
|
this.updatePieceTypeSelector();
|
|
}
|
|
|
|
private createPieceButton(type: PieceType, text: string, xOffset: number): Phaser.GameObjects.Container {
|
|
const container = this.add.container(xOffset, 0);
|
|
|
|
const bg = this.add.rectangle(0, 0, 100, 40, 0xe5e7eb)
|
|
.setStrokeStyle(2, 0x9ca3af);
|
|
|
|
const textObj = this.add.text(0, 0, text, {
|
|
fontSize: '16px',
|
|
fontFamily: 'Arial',
|
|
color: '#1f2937',
|
|
}).setOrigin(0.5);
|
|
|
|
container.add([bg, textObj]);
|
|
|
|
// 使按钮可交互
|
|
bg.setInteractive({ useHandCursor: true });
|
|
bg.on('pointerdown', () => {
|
|
this.selectedPieceType = type;
|
|
this.updatePieceTypeSelector();
|
|
});
|
|
|
|
// 存储引用以便后续更新
|
|
if (type === 'kitten') {
|
|
this.kittenButton = container;
|
|
} else {
|
|
this.catButton = container;
|
|
}
|
|
|
|
return container;
|
|
}
|
|
|
|
private updatePieceTypeSelector(): void {
|
|
if (!this.kittenButton || !this.catButton) return;
|
|
|
|
const white = this.state.players.white;
|
|
const black = this.state.players.black;
|
|
const currentPlayer = this.state.players[this.state.currentPlayer];
|
|
const isWhiteTurn = this.state.currentPlayer === 'white';
|
|
|
|
// 更新按钮状态
|
|
const kittenAvailable = currentPlayer.kitten.supply > 0;
|
|
const catAvailable = currentPlayer.cat.supply > 0;
|
|
|
|
// 更新小猫按钮
|
|
const kittenBg = this.kittenButton.list[0] as Phaser.GameObjects.Rectangle;
|
|
const kittenText = this.kittenButton.list[1] as Phaser.GameObjects.Text;
|
|
const isKittenSelected = this.selectedPieceType === 'kitten';
|
|
|
|
kittenBg.setFillStyle(isKittenSelected ? 0xfbbf24 : (kittenAvailable ? 0xe5e7eb : 0xd1d5db));
|
|
kittenText.setText(`🐾 小猫 (${currentPlayer.kitten.supply})`);
|
|
|
|
// 更新大猫按钮
|
|
const catBg = this.catButton.list[0] as Phaser.GameObjects.Rectangle;
|
|
const catText = this.catButton.list[1] as Phaser.GameObjects.Text;
|
|
const isCatSelected = this.selectedPieceType === 'cat';
|
|
|
|
catBg.setFillStyle(isCatSelected ? 0xfbbf24 : (catAvailable ? 0xe5e7eb : 0xd1d5db));
|
|
catText.setText(`🐱 大猫 (${currentPlayer.cat.supply})`);
|
|
|
|
// 如果选中的类型不可用，切换到可用的
|
|
if (!kittenAvailable && this.selectedPieceType === 'kitten' && catAvailable) {
|
|
this.selectedPieceType = 'cat';
|
|
this.updatePieceTypeSelector();
|
|
} else if (!catAvailable && this.selectedPieceType === 'cat' && kittenAvailable) {
|
|
this.selectedPieceType = 'kitten';
|
|
this.updatePieceTypeSelector();
|
|
}
|
|
}
|
|
|
|
private updateTurnText(player: PlayerType): void {
|
|
if (this.turnText) {
|
|
const whitePieces = this.state.players.white;
|
|
const blackPieces = this.state.players.black;
|
|
const current = player === 'white' ? whitePieces : blackPieces;
|
|
|
|
this.turnText.setText(
|
|
`${player.toUpperCase()}'s turn | Kittens: ${current.kitten.supply} | Cats: ${current.cat.supply}`
|
|
);
|
|
}
|
|
}
|
|
|
|
private showWinner(winner: PlayerType | 'draw' | null): void {
|
|
if (this.winnerOverlay) {
|
|
this.winnerOverlay.destroy();
|
|
}
|
|
|
|
this.winnerOverlay = this.add.container();
|
|
|
|
const text = winner === 'draw' ? "It's a draw!" : winner ? `${winner.toUpperCase()} wins!` : '';
|
|
|
|
const bg = this.add.rectangle(
|
|
BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
|
|
BOARD_OFFSET.y + (BOARD_SIZE * CELL_SIZE) / 2,
|
|
BOARD_SIZE * CELL_SIZE,
|
|
BOARD_SIZE * CELL_SIZE,
|
|
0x000000,
|
|
0.6,
|
|
).setInteractive({ useHandCursor: true });
|
|
|
|
bg.on('pointerdown', () => {
|
|
this.gameHost.setup('setup');
|
|
});
|
|
|
|
this.winnerOverlay.add(bg);
|
|
|
|
const winText = this.add.text(
|
|
BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
|
|
BOARD_OFFSET.y + (BOARD_SIZE * CELL_SIZE) / 2,
|
|
text,
|
|
{
|
|
fontSize: '40px',
|
|
fontFamily: 'Arial',
|
|
color: '#fbbf24',
|
|
},
|
|
).setOrigin(0.5);
|
|
|
|
this.winnerOverlay.add(winText);
|
|
|
|
this.tweens.add({
|
|
targets: winText,
|
|
scale: 1.2,
|
|
duration: 500,
|
|
yoyo: true,
|
|
repeat: 1,
|
|
});
|
|
}
|
|
|
|
private isCellOccupied(row: number, col: number): boolean {
|
|
return !!this.state.board.partMap[`${row},${col}`];
|
|
}
|
|
}
|
|
|
|
class BoopPartSpawner implements Spawner<BoopPart, Phaser.GameObjects.Container> {
|
|
constructor(public readonly scene: GameScene, public readonly state: ReadonlySignal<BoopState>) {}
|
|
|
|
*getData() {
|
|
for (const part of Object.values(this.state.value.pieces)) {
|
|
yield part;
|
|
}
|
|
}
|
|
|
|
getKey(part: BoopPart): string {
|
|
return part.id;
|
|
}
|
|
|
|
onUpdate(part: BoopPart, obj: Phaser.GameObjects.Container): void {
|
|
const [row, col] = part.position;
|
|
const x = BOARD_OFFSET.x + col * CELL_SIZE + CELL_SIZE / 2;
|
|
const y = BOARD_OFFSET.y + row * CELL_SIZE + CELL_SIZE / 2;
|
|
|
|
// 使用 tween 动画平滑移动棋子
|
|
this.scene.tweens.add({
|
|
targets: obj,
|
|
x: x,
|
|
y: y,
|
|
duration: 200,
|
|
ease: 'Power2',
|
|
});
|
|
}
|
|
|
|
onSpawn(part: BoopPart) {
|
|
const [row, col] = part.position;
|
|
const x = BOARD_OFFSET.x + col * CELL_SIZE + CELL_SIZE / 2;
|
|
const y = BOARD_OFFSET.y + row * CELL_SIZE + CELL_SIZE / 2;
|
|
|
|
const container = this.scene.add.container(x, y);
|
|
|
|
const isCat = part.pieceType === 'cat';
|
|
const baseColor = part.player === 'white' ? 0xffffff : 0x333333;
|
|
const strokeColor = part.player === 'white' ? 0x000000 : 0xffffff;
|
|
|
|
// 绘制圆形背景
|
|
const circle = this.scene.add.circle(0, 0, CELL_SIZE * 0.4, baseColor)
|
|
.setStrokeStyle(3, strokeColor);
|
|
|
|
// 添加文字标识
|
|
const text = isCat ? '🐱' : '🐾';
|
|
const textObj = this.scene.add.text(0, 0, text, {
|
|
fontSize: `${isCat ? 40 : 32}px`,
|
|
fontFamily: 'Arial',
|
|
}).setOrigin(0.5);
|
|
|
|
container.add([circle, textObj]);
|
|
|
|
// 添加落子动画
|
|
container.setScale(0);
|
|
this.scene.tweens.add({
|
|
targets: container,
|
|
scale: 1,
|
|
duration: 200,
|
|
ease: 'Back.easeOut',
|
|
});
|
|
|
|
return container;
|
|
}
|
|
|
|
onDespawn(obj: Phaser.GameObjects.Container) {
|
|
this.scene.tweens.add({
|
|
targets: obj,
|
|
alpha: 0,
|
|
scale: 0.5,
|
|
duration: 200,
|
|
ease: 'Back.easeIn',
|
|
onComplete: () => obj.destroy(),
|
|
});
|
|
}
|
|
}
|