refactor: fix regicide, presumably?
This commit is contained in:
parent
20f722818d
commit
a0412ddd88
|
|
@ -1,6 +1,6 @@
|
|||
import { describe, it, expect, beforeEach, afterEach } from 'vitest';
|
||||
import { createGameHost, GameHost } from 'boardgame-core';
|
||||
import { gameModule, createInitialState } from './regicide';
|
||||
import { gameModule, createInitialState, prompts } from './regicide';
|
||||
import type { RegicideState, Card, Enemy } from './types';
|
||||
|
||||
describe('Regicide Game Module', () => {
|
||||
|
|
@ -14,7 +14,11 @@ describe('Regicide Game Module', () => {
|
|||
afterEach(async () => {
|
||||
// 等待游戏循环完成，然后 dispose
|
||||
await new Promise(resolve => setTimeout(resolve, 50));
|
||||
// 等待 gamePromise 结束，suppress 预期的 cancel 错误
|
||||
gamePromise?.catch(() => {});
|
||||
gameHost.dispose();
|
||||
// 等待 dispose 完成
|
||||
await new Promise(resolve => setTimeout(resolve, 20));
|
||||
});
|
||||
|
||||
describe('Initial State', () => {
|
||||
|
|
@ -92,8 +96,8 @@ describe('Regicide Game Module', () => {
|
|||
const initialHp = enemy.currentHp;
|
||||
const card = state.hand[0];
|
||||
|
||||
// 出牌 - 使用 input 命令格式
|
||||
const error = gameHost.onInput(`input play ${card.id}`);
|
||||
// 出牌 - 使用 tryAnswerPrompt 命令格式
|
||||
const error = gameHost.tryAnswerPrompt(prompts.playerAction, 'play', [card.id]);
|
||||
expect(error).toBeNull(); // 验证成功
|
||||
|
||||
// 等待下一个 prompt
|
||||
|
|
@ -122,7 +126,7 @@ describe('Regicide Game Module', () => {
|
|||
const handSizeBefore = stateBefore.hand.length;
|
||||
|
||||
// 尝试打出不存在的牌 - 应该被 validator 拒绝
|
||||
const error = gameHost.onInput('input play non-existent-card');
|
||||
const error = gameHost.tryAnswerPrompt(prompts.playerAction, 'play', ['non-existent-card']);
|
||||
// 错误会被 catch 并继续循环，所以返回 null
|
||||
expect(error).toBeNull();
|
||||
|
||||
|
|
@ -145,7 +149,7 @@ describe('Regicide Game Module', () => {
|
|||
|
||||
// 出一张牌造成伤害（不一定击败敌人）
|
||||
const card = state.hand[0];
|
||||
gameHost.onInput(`input play ${card.id}`);
|
||||
gameHost.tryAnswerPrompt(prompts.playerAction, 'play', [card.id]);
|
||||
|
||||
// 等待反击阶段或下一个 prompt
|
||||
await waitForPrompt(gameHost);
|
||||
|
|
@ -177,8 +181,8 @@ describe('Regicide Game Module', () => {
|
|||
gamePromise = gameHost.start();
|
||||
await waitForPrompt(gameHost);
|
||||
|
||||
// 放弃回合 - 使用 input 命令格式
|
||||
const error = gameHost.onInput('input yield');
|
||||
// 放弃回合 - 使用 tryAnswerPrompt 命令格式
|
||||
const error = gameHost.tryAnswerPrompt(prompts.playerAction, 'yield', []);
|
||||
|
||||
// 等待处理完成
|
||||
await new Promise(resolve => setTimeout(resolve, 100));
|
||||
|
|
@ -198,8 +202,8 @@ describe('Regicide Game Module', () => {
|
|||
const state = gameHost.state.value;
|
||||
const initialHandSize = state.hand.length;
|
||||
|
||||
// 使用小丑牌 - 使用 input 命令格式
|
||||
const error = gameHost.onInput('input useJester');
|
||||
// 使用小丑牌 - 使用 tryAnswerPrompt 命令格式
|
||||
const error = gameHost.tryAnswerPrompt(prompts.playerAction, 'useJester', []);
|
||||
|
||||
// 等待处理完成
|
||||
await new Promise(resolve => setTimeout(resolve, 100));
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import {
|
||||
createGameCommandRegistry,
|
||||
createPromptDef,
|
||||
IGameContext,
|
||||
GameModule,
|
||||
} from 'boardgame-core';
|
||||
|
|
@ -94,23 +95,26 @@ async function playCard(game: RegicideGame, cardId: string) {
|
|||
if (suits.includes('clubs')) damage *= 2;
|
||||
|
||||
let isImmune = false;
|
||||
if (state.currentEnemy.immunitySuit && suits.includes(state.currentEnemy.immunitySuit)) {
|
||||
const enemy = state.currentEnemy;
|
||||
if (enemy.immunitySuit && suits.includes(enemy.immunitySuit)) {
|
||||
isImmune = true;
|
||||
damage = card.value;
|
||||
}
|
||||
|
||||
const enemy = state.currentEnemy;
|
||||
enemy.currentHp -= damage;
|
||||
const isDefeated = enemy.currentHp <= 0;
|
||||
|
||||
game.produce((state: RegicideState) => {
|
||||
const cardIndex = state.hand.findIndex(c => c.id === cardId);
|
||||
if (cardIndex !== -1) state.hand.splice(cardIndex, 1);
|
||||
state.discardPile.push(card);
|
||||
|
||||
// 计算最终伤害并应用到敌人
|
||||
let finalDamage = damage;
|
||||
const e = state.currentEnemy!;
|
||||
e.currentHp -= finalDamage;
|
||||
const isDefeated = e.currentHp <= 0;
|
||||
|
||||
if (isDefeated) {
|
||||
enemy.isDefeated = true;
|
||||
state.defeatedEnemies.push({ ...enemy });
|
||||
e.isDefeated = true;
|
||||
state.defeatedEnemies.push({ ...e });
|
||||
state.currentEnemy = null;
|
||||
state.phase = 'enemyDefeated';
|
||||
|
||||
|
|
@ -125,13 +129,17 @@ async function playCard(game: RegicideGame, cardId: string) {
|
|||
|
||||
state.currentPlayed = {
|
||||
cards: [card],
|
||||
totalDamage: isImmune ? card.value : damage,
|
||||
totalDamage: isImmune ? card.value : finalDamage,
|
||||
suits,
|
||||
hasJester: false,
|
||||
};
|
||||
});
|
||||
|
||||
return { damage, remainingHp: Math.max(0, enemy.currentHp), isImmune, isDefeated };
|
||||
// 从 produce 后的状态读取结果
|
||||
const finalEnemy = game.value.defeatedEnemies.find(e => e.id === enemy.id) || game.value.currentEnemy;
|
||||
const wasDefeated = game.value.defeatedEnemies.some(e => e.id === enemy.id);
|
||||
|
||||
return { damage, remainingHp: wasDefeated ? 0 : Math.max(0, (game.value.currentEnemy?.currentHp ?? 0)), isImmune, isDefeated: wasDefeated };
|
||||
}
|
||||
|
||||
registry.register('play <cardId:string>', playCard);
|
||||
|
|
@ -166,15 +174,12 @@ async function playCombo(game: RegicideGame, cardIds: string[]) {
|
|||
if (suits.includes('clubs')) damage *= 2;
|
||||
|
||||
let isImmune = false;
|
||||
if (state.currentEnemy!.immunitySuit && suits.includes(state.currentEnemy!.immunitySuit)) {
|
||||
const enemy = state.currentEnemy!;
|
||||
if (enemy.immunitySuit && suits.includes(enemy.immunitySuit)) {
|
||||
isImmune = true;
|
||||
damage = totalValue;
|
||||
}
|
||||
|
||||
const enemy = state.currentEnemy!;
|
||||
enemy.currentHp -= damage;
|
||||
const isDefeated = enemy.currentHp <= 0;
|
||||
|
||||
game.produce((state: RegicideState) => {
|
||||
for (const card of selectedCards) {
|
||||
const cardIndex = state.hand.findIndex(c => c.id === card.id);
|
||||
|
|
@ -182,9 +187,15 @@ async function playCombo(game: RegicideGame, cardIds: string[]) {
|
|||
state.discardPile.push(card);
|
||||
}
|
||||
|
||||
// 计算最终伤害并应用到敌人
|
||||
let finalDamage = damage;
|
||||
const e = state.currentEnemy!;
|
||||
e.currentHp -= finalDamage;
|
||||
const isDefeated = e.currentHp <= 0;
|
||||
|
||||
if (isDefeated) {
|
||||
enemy.isDefeated = true;
|
||||
state.defeatedEnemies.push({ ...enemy });
|
||||
e.isDefeated = true;
|
||||
state.defeatedEnemies.push({ ...e });
|
||||
state.currentEnemy = null;
|
||||
state.phase = 'enemyDefeated';
|
||||
|
||||
|
|
@ -199,13 +210,15 @@ async function playCombo(game: RegicideGame, cardIds: string[]) {
|
|||
|
||||
state.currentPlayed = {
|
||||
cards: selectedCards,
|
||||
totalDamage: isImmune ? totalValue : damage,
|
||||
totalDamage: isImmune ? totalValue : finalDamage,
|
||||
suits,
|
||||
hasJester: false,
|
||||
};
|
||||
});
|
||||
|
||||
return { damage, remainingHp: Math.max(0, enemy.currentHp), isImmune, isDefeated };
|
||||
const wasDefeated = game.value.defeatedEnemies.some(e => e.id === enemy.id);
|
||||
|
||||
return { damage, remainingHp: wasDefeated ? 0 : Math.max(0, (game.value.currentEnemy?.currentHp ?? 0)), isImmune, isDefeated: wasDefeated };
|
||||
}
|
||||
|
||||
registry.register('combo <cardIds>', playCombo);
|
||||
|
|
@ -334,6 +347,16 @@ function calculateVictoryLevel(jestersUsed: number): 'gold' | 'silver' | 'bronze
|
|||
return 'bronze';
|
||||
}
|
||||
|
||||
|
||||
export const prompts = {
|
||||
playerAction: createPromptDef<[action: string, cardIds: string[]]>(
|
||||
'play <action:string> <cardIds:string[]>'
|
||||
),
|
||||
counterattack: createPromptDef<[cardIds: string[]]>(
|
||||
'counterattack <cardIds:string[]>'
|
||||
),
|
||||
};
|
||||
|
||||
// start 函数 - 游戏主循环
|
||||
export async function start(game: RegicideGame) {
|
||||
// 首先执行 setup
|
||||
|
|
@ -345,33 +368,27 @@ export async function start(game: RegicideGame) {
|
|||
|
||||
// 玩家回合 - 等待玩家输入任何命令
|
||||
if (state.phase === 'playerTurn' && state.currentEnemy && !state.currentEnemy.isDefeated) {
|
||||
// 使用通用的 input 命令来等待玩家输入
|
||||
const { inputStr } = await game.prompt(
|
||||
'input <arg1:string> [arg2:string] [arg3:string]',
|
||||
(arg1: string, arg2: string, arg3: string) => {
|
||||
const parts = [arg1, arg2, arg3].filter(a => a !== undefined && a !== '');
|
||||
const { action, cardIds } = await game.prompt(
|
||||
prompts.playerAction,
|
||||
(action: string, cardIds: string[]) => {
|
||||
const parts = cardIds.filter(a => a !== undefined && a !== '');
|
||||
if (parts.length === 0) {
|
||||
throw '请输入有效的命令';
|
||||
}
|
||||
return { inputStr: parts.join(' ') };
|
||||
return { action, cardIds: parts };
|
||||
},
|
||||
state.currentEnemy.id
|
||||
);
|
||||
|
||||
// 解析并执行命令
|
||||
const parts = inputStr.split(' ');
|
||||
const command = parts[0];
|
||||
const args = parts.slice(1);
|
||||
|
||||
try {
|
||||
if (command === 'play' && args.length >= 1) {
|
||||
await playCard(game, args[0]);
|
||||
} else if (command === 'combo' && args.length >= 1) {
|
||||
const cardIds = args[0].split(',');
|
||||
if (action === 'play' && cardIds.length >= 1) {
|
||||
await playCard(game, cardIds[0]);
|
||||
} else if (action === 'combo' && cardIds.length >= 2) {
|
||||
await playCombo(game, cardIds);
|
||||
} else if (command === 'yield') {
|
||||
} else if (action === 'yield') {
|
||||
await yieldTurn(game);
|
||||
} else if (command === 'useJester') {
|
||||
} else if (action === 'useJester') {
|
||||
await useJester(game);
|
||||
} else {
|
||||
// 无效命令，继续等待
|
||||
|
|
@ -389,7 +406,7 @@ export async function start(game: RegicideGame) {
|
|||
if (state.currentEnemy) {
|
||||
const requiredValue = state.currentEnemy.counterDamage;
|
||||
const { cardIds } = await game.prompt(
|
||||
'counterattack <cardIds>',
|
||||
prompts.counterattack,
|
||||
(cardIds: string[]) => {
|
||||
const selectedCards: Card[] = [];
|
||||
for (const cardId of cardIds) {
|
||||
|
|
|
|||
|
|
@ -83,12 +83,3 @@ export interface RegicideState {
|
|||
// 索引签名以满足 Record<string, unknown> 约束
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
// 命令参数类型
|
||||
export interface PlayCardCommand {
|
||||
cardIds: string[];
|
||||
}
|
||||
|
||||
export interface CounterattackCommand {
|
||||
cardIds: string[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
import { h } from 'preact';
|
||||
import { GameUI } from 'boardgame-phaser';
|
||||
import { gameModule } from './game/regicide';
|
||||
import './style.css';
|
||||
import App from "@/ui/App";
|
||||
import { GameScene } from "@/scenes/GameScene";
|
||||
|
||||
const ui = new GameUI({
|
||||
container: document.getElementById('ui-root')!,
|
||||
root: <App gameModule={gameModule} gameScene={GameScene} />,
|
||||
});
|
||||
|
||||
ui.mount();
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
import Phaser from 'phaser';
|
||||
import type { RegicideState, Card, Enemy } from '@/game/types';
|
||||
import { GameHostScene } from 'boardgame-phaser';
|
||||
import { spawnEffect, type Spawner } from 'boardgame-phaser';
|
||||
import { GameUI, CardView, EnemyView, PromptDisplay } from './views';
|
||||
|
||||
const GAME_WIDTH = 800;
|
||||
const GAME_HEIGHT = 700;
|
||||
const CENTER_X = GAME_WIDTH / 2;
|
||||
const HAND_Y = 580;
|
||||
const CARD_SPACING = 70;
|
||||
|
||||
export class GameScene extends GameHostScene<RegicideState> {
|
||||
private gameUI!: GameUI;
|
||||
private promptDisplay!: PromptDisplay;
|
||||
// 追踪当前卡牌容器，用于点击检测
|
||||
public cardContainers: Phaser.GameObjects.Container[] = [];
|
||||
|
||||
constructor() {
|
||||
super('RegicideGameScene');
|
||||
}
|
||||
|
||||
create(): void {
|
||||
super.create();
|
||||
|
||||
// 创建 UI 组件
|
||||
this.gameUI = new GameUI(this);
|
||||
this.promptDisplay = new PromptDisplay(this);
|
||||
|
||||
// 生成效果
|
||||
this.disposables.add(spawnEffect(new EnemySpawner(this)));
|
||||
|
||||
// 手牌管理 - 手动跟踪卡牌容器
|
||||
const cardViews = new Map<string, CardView>();
|
||||
this.addEffect(() => {
|
||||
const hand = this.state.hand;
|
||||
const handSize = hand.length;
|
||||
const spacing = Math.min(CARD_SPACING, 600 / Math.max(1, handSize));
|
||||
const startX = CENTER_X - (handSize - 1) * spacing / 2;
|
||||
|
||||
const currentIds = new Set(hand.map(c => c.id));
|
||||
|
||||
// 移除不存在的卡牌
|
||||
for (const [id, view] of cardViews) {
|
||||
if (!currentIds.has(id)) {
|
||||
this.tweens.add({
|
||||
targets: view.container,
|
||||
alpha: 0,
|
||||
scale: 0.5,
|
||||
y: view.container.y - 100,
|
||||
duration: 200,
|
||||
ease: 'Back.easeIn',
|
||||
onComplete: () => {
|
||||
const idx = this.cardContainers.indexOf(view.container);
|
||||
if (idx !== -1) this.cardContainers.splice(idx, 1);
|
||||
view.destroy();
|
||||
},
|
||||
});
|
||||
cardViews.delete(id);
|
||||
}
|
||||
}
|
||||
|
||||
// 添加或更新卡牌
|
||||
for (let i = 0; i < handSize; i++) {
|
||||
const card = hand[i];
|
||||
const x = startX + i * spacing;
|
||||
let view = cardViews.get(card.id);
|
||||
|
||||
if (!view) {
|
||||
// 新卡牌 - 创建时先放在中心，然后用 tween 动画移到目标位置
|
||||
view = new CardView(this, card, CENTER_X, HAND_Y);
|
||||
cardViews.set(card.id, view);
|
||||
this.cardContainers.push(view.container);
|
||||
|
||||
// 入场动画：从中心移到目标位置
|
||||
this.tweens.add({
|
||||
targets: view.container,
|
||||
x,
|
||||
y: HAND_Y,
|
||||
duration: 300,
|
||||
ease: 'Back.easeOut',
|
||||
});
|
||||
} else {
|
||||
// 已有卡牌 - 更新位置
|
||||
view.setPosition(x, HAND_Y);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 添加状态效果
|
||||
this.addEffect(() => {
|
||||
this.gameUI.updateEnemyDisplay(this, this.state.currentEnemy);
|
||||
});
|
||||
|
||||
this.addEffect(() => {
|
||||
this.gameUI.updatePhaseText(this.state.phase);
|
||||
});
|
||||
|
||||
this.addEffect(() => {
|
||||
if (this.state.isGameOver) {
|
||||
this.gameUI.showGameOver(this, this.state.victoryLevel);
|
||||
} else {
|
||||
this.gameUI.hideGameOver();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听 activePrompt 信号
|
||||
this.addEffect(() => {
|
||||
const schema = this.gameHost.activePromptSchema?.value;
|
||||
const player = this.gameHost.activePromptPlayer?.value;
|
||||
this.promptDisplay.update(schema, player);
|
||||
});
|
||||
|
||||
// 设置背景点击
|
||||
this.setupBackgroundInput();
|
||||
}
|
||||
|
||||
private setupBackgroundInput(): void {
|
||||
this.input.on('pointerdown', (pointer: Phaser.Input.Pointer) => {
|
||||
// 如果点击的是卡牌，不处理
|
||||
if (this.isPointerOnCard(pointer)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 游戏结束时点击任意位置重新开始
|
||||
if (this.state.isGameOver) {
|
||||
this.gameHost.start();
|
||||
} else if (!this.state.currentEnemy && this.state.phase === 'playerTurn') {
|
||||
// 开始游戏
|
||||
this.gameHost.start();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private isPointerOnCard(pointer: Phaser.Input.Pointer): boolean {
|
||||
for (const container of this.cardContainers) {
|
||||
if (!container || !container.active) continue;
|
||||
const bounds = container.getBounds();
|
||||
if (
|
||||
pointer.x >= bounds.left &&
|
||||
pointer.x <= bounds.right &&
|
||||
pointer.y >= bounds.top &&
|
||||
pointer.y <= bounds.bottom
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 敌人生成器
|
||||
class EnemySpawner implements Spawner<Enemy, Phaser.GameObjects.Container> {
|
||||
constructor(public readonly scene: GameScene) {}
|
||||
|
||||
*getData() {
|
||||
if (this.scene.state.currentEnemy && !this.scene.state.currentEnemy.isDefeated) {
|
||||
yield this.scene.state.currentEnemy;
|
||||
}
|
||||
}
|
||||
|
||||
getKey(enemy: Enemy): string {
|
||||
return enemy.id;
|
||||
}
|
||||
|
||||
onUpdate(enemy: Enemy, container: Phaser.GameObjects.Container): void {
|
||||
const view = container.getData('enemyView') as EnemyView | undefined;
|
||||
if (view) {
|
||||
view.setPosition(CENTER_X, 200);
|
||||
view.updateEnemy(enemy);
|
||||
}
|
||||
}
|
||||
|
||||
onSpawn(enemy: Enemy): Phaser.GameObjects.Container {
|
||||
const view = new EnemyView(this.scene, enemy, CENTER_X, 200);
|
||||
const container = view.container;
|
||||
container.setData('enemyView', view);
|
||||
return container;
|
||||
}
|
||||
|
||||
onDespawn(container: Phaser.GameObjects.Container): void {
|
||||
const view = container.getData('enemyView') as EnemyView | undefined;
|
||||
if (view) {
|
||||
this.scene.tweens.add({
|
||||
targets: container,
|
||||
alpha: 0,
|
||||
y: container.y - 150,
|
||||
scale: 0.3,
|
||||
duration: 400,
|
||||
ease: 'Back.easeIn',
|
||||
onComplete: () => view.destroy(),
|
||||
});
|
||||
} else {
|
||||
container.destroy();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,259 @@
|
|||
import Phaser from 'phaser';
|
||||
|
||||
// 伤害数字特效
|
||||
export function showDamageNumber(
|
||||
scene: Phaser.Scene,
|
||||
x: number,
|
||||
y: number,
|
||||
damage: number,
|
||||
color: number = 0xef4444
|
||||
): void {
|
||||
const text = scene.add.text(x, y, `-${damage}`, {
|
||||
fontSize: '32px',
|
||||
fontFamily: 'Arial',
|
||||
color: `#${color.toString(16).padStart(6, '0')}`,
|
||||
fontStyle: 'bold',
|
||||
}).setOrigin(0.5);
|
||||
|
||||
scene.tweens.add({
|
||||
targets: text,
|
||||
y: y - 100,
|
||||
alpha: 0,
|
||||
scale: 1.5,
|
||||
duration: 800,
|
||||
ease: 'Power2',
|
||||
onComplete: () => text.destroy(),
|
||||
});
|
||||
}
|
||||
|
||||
// 治疗数字特效
|
||||
export function showHealNumber(
|
||||
scene: Phaser.Scene,
|
||||
x: number,
|
||||
y: number,
|
||||
amount: number
|
||||
): void {
|
||||
const text = scene.add.text(x, y, `+${amount}`, {
|
||||
fontSize: '28px',
|
||||
fontFamily: 'Arial',
|
||||
color: '#22c55e',
|
||||
fontStyle: 'bold',
|
||||
}).setOrigin(0.5);
|
||||
|
||||
scene.tweens.add({
|
||||
targets: text,
|
||||
y: y - 80,
|
||||
alpha: 0,
|
||||
duration: 800,
|
||||
ease: 'Power2',
|
||||
onComplete: () => text.destroy(),
|
||||
});
|
||||
}
|
||||
|
||||
// 卡牌飞行特效
|
||||
export function flyCardToTarget(
|
||||
scene: Phaser.Scene,
|
||||
card: Phaser.GameObjects.Container,
|
||||
targetX: number,
|
||||
targetY: number,
|
||||
duration: number = 400,
|
||||
onComplete?: () => void
|
||||
): void {
|
||||
const startX = card.x;
|
||||
const startY = card.y;
|
||||
|
||||
// 创建飞行路径
|
||||
const path = [
|
||||
{ x: startX, y: startY },
|
||||
{ x: startX + (targetX - startX) / 2, y: startY - 100 },
|
||||
{ x: targetX, y: targetY },
|
||||
];
|
||||
|
||||
scene.tweens.add({
|
||||
targets: card,
|
||||
x: targetX,
|
||||
y: targetY,
|
||||
scale: 0.5,
|
||||
alpha: 0,
|
||||
duration,
|
||||
ease: 'Back.easeIn',
|
||||
onComplete: () => {
|
||||
if (onComplete) onComplete();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 敌人受击特效
|
||||
export function enemyHitEffect(
|
||||
scene: Phaser.Scene,
|
||||
enemyContainer: Phaser.GameObjects.Container
|
||||
): void {
|
||||
// 红色闪烁
|
||||
const flash = scene.add.rectangle(
|
||||
enemyContainer.x,
|
||||
enemyContainer.y,
|
||||
150,
|
||||
200,
|
||||
0xff0000,
|
||||
0.5
|
||||
);
|
||||
|
||||
scene.tweens.add({
|
||||
targets: flash,
|
||||
alpha: 0,
|
||||
duration: 300,
|
||||
onComplete: () => flash.destroy(),
|
||||
});
|
||||
|
||||
// 震动效果
|
||||
scene.tweens.add({
|
||||
targets: enemyContainer,
|
||||
x: enemyContainer.x + 10,
|
||||
duration: 50,
|
||||
yoyo: true,
|
||||
repeat: 3,
|
||||
});
|
||||
}
|
||||
|
||||
// 敌人死亡特效
|
||||
export function enemyDeathEffect(
|
||||
scene: Phaser.Scene,
|
||||
enemyContainer: Phaser.GameObjects.Container
|
||||
): void {
|
||||
// 粒子爆炸
|
||||
const particles = scene.add.particles(enemyContainer.x, enemyContainer.y, 'particle', {
|
||||
speed: { min: 50, max: 150 },
|
||||
angle: { min: 0, max: 360 },
|
||||
scale: { start: 1, end: 0 },
|
||||
lifespan: 1000,
|
||||
gravityY: 100,
|
||||
quantity: 20,
|
||||
emitting: true,
|
||||
});
|
||||
|
||||
// 淡出并上升
|
||||
scene.tweens.add({
|
||||
targets: enemyContainer,
|
||||
y: enemyContainer.y - 200,
|
||||
alpha: 0,
|
||||
scale: 0.5,
|
||||
duration: 800,
|
||||
ease: 'Back.easeIn',
|
||||
onComplete: () => {
|
||||
enemyContainer.destroy();
|
||||
particles.destroy();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 抽牌特效
|
||||
export function drawCardEffect(
|
||||
scene: Phaser.Scene,
|
||||
fromX: number,
|
||||
fromY: number,
|
||||
toX: number,
|
||||
toY: number
|
||||
): void {
|
||||
// 创建临时卡牌
|
||||
const tempCard = scene.add.rectangle(fromX, fromY, 60, 90, 0x3b82f6, 0.8)
|
||||
.setStrokeStyle(2, 0x60a5fa);
|
||||
|
||||
scene.tweens.add({
|
||||
targets: tempCard,
|
||||
x: toX,
|
||||
y: toY,
|
||||
duration: 300,
|
||||
ease: 'Back.easeOut',
|
||||
onComplete: () => tempCard.destroy(),
|
||||
});
|
||||
}
|
||||
|
||||
// 反击警告特效
|
||||
export function counterattackWarning(
|
||||
scene: Phaser.Scene,
|
||||
x: number,
|
||||
y: number,
|
||||
damage: number
|
||||
): void {
|
||||
const warning = scene.add.text(x, y, `⚠️ 反击伤害: ${damage}`, {
|
||||
fontSize: '24px',
|
||||
fontFamily: 'Arial',
|
||||
color: '#ef4444',
|
||||
fontStyle: 'bold',
|
||||
}).setOrigin(0.5);
|
||||
|
||||
// 闪烁动画
|
||||
scene.tweens.add({
|
||||
targets: warning,
|
||||
alpha: 0.3,
|
||||
duration: 300,
|
||||
yoyo: true,
|
||||
repeat: 2,
|
||||
});
|
||||
|
||||
// 消失
|
||||
scene.time.delayedCall(1500, () => {
|
||||
scene.tweens.add({
|
||||
targets: warning,
|
||||
alpha: 0,
|
||||
y: y - 50,
|
||||
duration: 300,
|
||||
onComplete: () => warning.destroy(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 胜利特效
|
||||
export function victoryEffect(
|
||||
scene: Phaser.Scene,
|
||||
x: number,
|
||||
y: number
|
||||
): void {
|
||||
// 烟花粒子
|
||||
for (let i = 0; i < 3; i++) {
|
||||
scene.time.delayedCall(i * 300, () => {
|
||||
const particles = scene.add.particles(
|
||||
x + (Math.random() - 0.5) * 200,
|
||||
y + (Math.random() - 0.5) * 100,
|
||||
'particle',
|
||||
{
|
||||
speed: { min: 30, max: 100 },
|
||||
angle: { min: 0, max: 360 },
|
||||
scale: { start: 1.5, end: 0 },
|
||||
lifespan: 1500,
|
||||
gravityY: 50,
|
||||
quantity: 30,
|
||||
emitting: true,
|
||||
}
|
||||
);
|
||||
|
||||
scene.time.delayedCall(1500, () => particles.destroy());
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 闪烁文本
|
||||
export function createFlashingText(
|
||||
scene: Phaser.Scene,
|
||||
x: number,
|
||||
y: number,
|
||||
text: string,
|
||||
color: string = '#fbbf24'
|
||||
): Phaser.GameObjects.Text {
|
||||
const flashingText = scene.add.text(x, y, text, {
|
||||
fontSize: '20px',
|
||||
fontFamily: 'Arial',
|
||||
color,
|
||||
fontStyle: 'bold',
|
||||
}).setOrigin(0.5);
|
||||
|
||||
scene.tweens.add({
|
||||
targets: flashingText,
|
||||
alpha: 0.3,
|
||||
duration: 500,
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
});
|
||||
|
||||
return flashingText;
|
||||
}
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
import Phaser from 'phaser';
|
||||
import type { Card } from '@/game/types';
|
||||
import { getCardDisplay, getSuitColor } from '@/game/card-utils';
|
||||
import type { GameScene } from '../GameScene';
|
||||
import { prompts } from '@/game/regicide';
|
||||
|
||||
export const CARD_WIDTH = 80;
|
||||
export const CARD_HEIGHT = 120;
|
||||
|
||||
export class CardView {
|
||||
public readonly container: Phaser.GameObjects.Container;
|
||||
private readonly bg: Phaser.GameObjects.Rectangle;
|
||||
private readonly text: Phaser.GameObjects.Text;
|
||||
private readonly valueText: Phaser.GameObjects.Text;
|
||||
private readonly card: Card;
|
||||
private isHovering = false;
|
||||
private baseY: number;
|
||||
|
||||
constructor(scene: GameScene, card: Card, x: number, y: number) {
|
||||
this.card = card;
|
||||
this.baseY = y;
|
||||
this.container = scene.add.container(x, y);
|
||||
|
||||
// 卡牌背景
|
||||
this.bg = scene.add.rectangle(0, 0, CARD_WIDTH, CARD_HEIGHT, 0xf9fafb)
|
||||
.setStrokeStyle(3, 0x6b7280);
|
||||
|
||||
// 卡牌边框颜色
|
||||
const borderColor = getSuitColor(card.suit);
|
||||
this.bg.setStrokeStyle(3, Phaser.Display.Color.HexStringToColor(borderColor).color);
|
||||
|
||||
// 卡牌文本
|
||||
const display = getCardDisplay(card);
|
||||
const color = getSuitColor(card.suit);
|
||||
this.text = scene.add.text(0, 0, display, {
|
||||
fontSize: '24px',
|
||||
fontFamily: 'Arial',
|
||||
color,
|
||||
fontStyle: 'bold',
|
||||
}).setOrigin(0.5);
|
||||
|
||||
// 卡牌数值提示
|
||||
this.valueText = scene.add.text(0, -CARD_HEIGHT / 2 + 15, `+${card.value}`, {
|
||||
fontSize: '12px',
|
||||
fontFamily: 'Arial',
|
||||
color: '#6b7280',
|
||||
}).setOrigin(0.5);
|
||||
|
||||
this.container.add([this.bg, this.valueText, this.text]);
|
||||
|
||||
// 设置交互
|
||||
this.bg.setInteractive({ useHandCursor: true });
|
||||
this.setupInteraction(scene);
|
||||
|
||||
// 出现动画
|
||||
this.container.setScale(0);
|
||||
scene.tweens.add({
|
||||
targets: this.container,
|
||||
scale: 1,
|
||||
duration: 200,
|
||||
ease: 'Back.easeOut',
|
||||
});
|
||||
}
|
||||
|
||||
setPosition(x: number, y: number): void {
|
||||
this.baseY = y;
|
||||
this.container.setPosition(x, y);
|
||||
}
|
||||
|
||||
hover(offset: number = -30): void {
|
||||
if (!this.isHovering) {
|
||||
this.isHovering = true;
|
||||
const scene = this.container.scene as Phaser.Scene;
|
||||
scene.tweens.add({
|
||||
targets: this.container,
|
||||
y: this.baseY + offset,
|
||||
duration: 100,
|
||||
ease: 'Power2',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
unhover(): void {
|
||||
if (this.isHovering) {
|
||||
this.isHovering = false;
|
||||
const scene = this.container.scene as Phaser.Scene;
|
||||
scene.tweens.add({
|
||||
targets: this.container,
|
||||
y: this.baseY,
|
||||
duration: 100,
|
||||
ease: 'Power2',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
getCard(): Card {
|
||||
return this.card;
|
||||
}
|
||||
|
||||
destroy(): void {
|
||||
this.container.destroy();
|
||||
}
|
||||
|
||||
private setupInteraction(scene: GameScene): void {
|
||||
this.bg.on('pointerover', () => {
|
||||
this.hover();
|
||||
});
|
||||
|
||||
this.bg.on('pointerout', () => {
|
||||
this.unhover();
|
||||
});
|
||||
|
||||
this.bg.on('pointerdown', () => {
|
||||
if (scene.state.phase === 'playerTurn') {
|
||||
scene.gameHost.tryAnswerPrompt(prompts.playerAction, 'play', [this.card.id]);
|
||||
} else if (scene.state.phase === 'enemyCounterattack') {
|
||||
scene.gameHost.tryAnswerPrompt(prompts.counterattack, [this.card.id]);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
import Phaser from 'phaser';
|
||||
import type { Enemy } from '@/game/types';
|
||||
import type { GameScene } from '../GameScene';
|
||||
|
||||
const ENEMY_CARD_WIDTH = 144;
|
||||
const ENEMY_CARD_HEIGHT = 180;
|
||||
|
||||
export class EnemyView {
|
||||
public readonly container: Phaser.GameObjects.Container;
|
||||
private readonly bg: Phaser.GameObjects.Rectangle;
|
||||
private readonly nameText: Phaser.GameObjects.Text;
|
||||
private readonly immunityText: Phaser.GameObjects.Text;
|
||||
private readonly counterText: Phaser.GameObjects.Text;
|
||||
private readonly hpText: Phaser.GameObjects.Text;
|
||||
private enemy: Enemy;
|
||||
|
||||
constructor(scene: GameScene, enemy: Enemy, x: number, y: number) {
|
||||
this.enemy = enemy;
|
||||
this.container = scene.add.container(x, y);
|
||||
|
||||
// 敌人卡牌背景
|
||||
this.bg = scene.add.rectangle(0, 0, ENEMY_CARD_WIDTH, ENEMY_CARD_HEIGHT, 0x1f2937)
|
||||
.setStrokeStyle(4, 0xef4444);
|
||||
|
||||
// 敌人名称
|
||||
const suitSymbols: Record<string, string> = {
|
||||
hearts: '♥',
|
||||
diamonds: '♦',
|
||||
clubs: '♣',
|
||||
spades: '♠',
|
||||
};
|
||||
const suitSymbol = enemy.suit ? suitSymbols[enemy.suit] : '';
|
||||
this.nameText = scene.add.text(0, -40, `${enemy.rank} ${suitSymbol}`, {
|
||||
fontSize: '32px',
|
||||
fontFamily: 'Arial',
|
||||
color: '#fbbf24',
|
||||
fontStyle: 'bold',
|
||||
}).setOrigin(0.5);
|
||||
|
||||
// 花色免疫提示
|
||||
const suitNames: Record<string, string> = {
|
||||
hearts: '红桃 ♥',
|
||||
diamonds: '方片 ♦',
|
||||
clubs: '梅花 ♣',
|
||||
spades: '黑桃 ♠',
|
||||
};
|
||||
const immunityText = enemy.immunitySuit
|
||||
? `🛡️ 免疫: ${suitNames[enemy.immunitySuit]}`
|
||||
: '';
|
||||
this.immunityText = scene.add.text(0, 0, immunityText, {
|
||||
fontSize: '14px',
|
||||
fontFamily: 'Arial',
|
||||
color: '#9ca3af',
|
||||
}).setOrigin(0.5);
|
||||
|
||||
// 反击伤害提示
|
||||
this.counterText = scene.add.text(0, 30, `⚔️ 反击伤害: ${enemy.counterDamage}`, {
|
||||
fontSize: '16px',
|
||||
fontFamily: 'Arial',
|
||||
color: '#ef4444',
|
||||
fontStyle: 'bold',
|
||||
}).setOrigin(0.5);
|
||||
|
||||
// HP提示
|
||||
this.hpText = scene.add.text(0, 60, `❤️ ${enemy.hp} HP`, {
|
||||
fontSize: '16px',
|
||||
fontFamily: 'Arial',
|
||||
color: '#22c55e',
|
||||
fontStyle: 'bold',
|
||||
}).setOrigin(0.5);
|
||||
|
||||
this.container.add([this.bg, this.nameText, this.immunityText, this.counterText, this.hpText]);
|
||||
|
||||
// 出现动画
|
||||
this.container.setScale(0);
|
||||
scene.tweens.add({
|
||||
targets: this.container,
|
||||
scale: 1,
|
||||
duration: 400,
|
||||
ease: 'Back.easeOut',
|
||||
});
|
||||
|
||||
// 抖动效果
|
||||
scene.tweens.add({
|
||||
targets: this.container,
|
||||
x: x + 5,
|
||||
duration: 100,
|
||||
yoyo: true,
|
||||
repeat: 3,
|
||||
});
|
||||
}
|
||||
|
||||
updateEnemy(enemy: Enemy): void {
|
||||
this.enemy = enemy;
|
||||
this.hpText.setText(`❤️ ${enemy.currentHp}/${enemy.hp} HP`);
|
||||
this.counterText.setText(`⚔️ 反击伤害: ${enemy.counterDamage}`);
|
||||
}
|
||||
|
||||
setPosition(x: number, y: number): void {
|
||||
this.container.setPosition(x, y);
|
||||
}
|
||||
|
||||
getEnemy(): Enemy {
|
||||
return this.enemy;
|
||||
}
|
||||
|
||||
destroy(): void {
|
||||
this.container.destroy();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
import Phaser from 'phaser';
|
||||
import type { Enemy, VictoryLevel } from '@/game/types';
|
||||
import type { GameScene } from '../GameScene';
|
||||
import { EnemyView } from './EnemyView';
|
||||
|
||||
const GAME_WIDTH = 800;
|
||||
const GAME_HEIGHT = 700;
|
||||
const CENTER_X = GAME_WIDTH / 2;
|
||||
const ENEMY_Y = 200;
|
||||
const BAR_WIDTH = 200;
|
||||
const BAR_HEIGHT = 20;
|
||||
|
||||
export class GameUI {
|
||||
public readonly container: Phaser.GameObjects.Container;
|
||||
private readonly hpBar: Phaser.GameObjects.Graphics;
|
||||
private readonly infoText: Phaser.GameObjects.Text;
|
||||
private readonly phaseText: Phaser.GameObjects.Text;
|
||||
private gameOverOverlay?: Phaser.GameObjects.Container;
|
||||
private enemyView?: EnemyView;
|
||||
|
||||
constructor(scene: GameScene) {
|
||||
this.container = scene.add.container(0, 0);
|
||||
|
||||
// 创建HP条
|
||||
this.hpBar = scene.add.graphics();
|
||||
|
||||
// 创建文本
|
||||
this.infoText = scene.add.text(CENTER_X, 30, '⚔️ Regicide - 击败所有12个敌人!', {
|
||||
fontSize: '22px',
|
||||
fontFamily: 'Arial',
|
||||
color: '#fbbf24',
|
||||
}).setOrigin(0.5);
|
||||
|
||||
this.phaseText = scene.add.text(CENTER_X, 60, '点击任意位置开始游戏', {
|
||||
fontSize: '16px',
|
||||
fontFamily: 'Arial',
|
||||
color: '#9ca3af',
|
||||
}).setOrigin(0.5);
|
||||
}
|
||||
|
||||
updateEnemyDisplay(scene: GameScene, enemy: Enemy | null): void {
|
||||
this.hpBar.clear();
|
||||
|
||||
if (!enemy) {
|
||||
if (this.enemyView) {
|
||||
this.enemyView.destroy();
|
||||
this.enemyView = undefined;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新或创建敌人视图
|
||||
if (this.enemyView) {
|
||||
this.enemyView.updateEnemy(enemy);
|
||||
} else {
|
||||
this.enemyView = new EnemyView(scene, enemy, CENTER_X, ENEMY_Y);
|
||||
}
|
||||
|
||||
// 绘制HP条
|
||||
this.drawHpBar(enemy);
|
||||
}
|
||||
|
||||
updatePhaseText(phase: string): void {
|
||||
const phaseNames: Record<string, string> = {
|
||||
playerTurn: '🎯 你的回合 - 点击卡牌攻击敌人',
|
||||
enemyCounterattack: '💥 敌人反击! - 点击卡牌抵消伤害',
|
||||
enemyDefeated: '✨ 敌人被击败! 准备迎战下一个敌人',
|
||||
gameOver: '🏁 游戏结束',
|
||||
};
|
||||
this.phaseText.setText(phaseNames[phase] || phase);
|
||||
}
|
||||
|
||||
showGameOver(scene: GameScene, victoryLevel: VictoryLevel): void {
|
||||
if (this.gameOverOverlay) {
|
||||
this.gameOverOverlay.destroy();
|
||||
}
|
||||
|
||||
this.gameOverOverlay = scene.add.container();
|
||||
|
||||
// 半透明背景
|
||||
const bg = scene.add.rectangle(CENTER_X, GAME_HEIGHT / 2, GAME_WIDTH, GAME_HEIGHT, 0x000000, 0.85)
|
||||
.setInteractive({ useHandCursor: true });
|
||||
|
||||
bg.on('pointerdown', () => {
|
||||
scene.gameHost.start();
|
||||
});
|
||||
|
||||
this.gameOverOverlay.add(bg);
|
||||
|
||||
// 游戏结束文本
|
||||
let resultText = '游戏结束';
|
||||
let resultColor = '#ef4444';
|
||||
|
||||
if (victoryLevel === 'gold') {
|
||||
resultText = '🥇 金胜利! 完美通关!';
|
||||
resultColor = '#fbbf24';
|
||||
} else if (victoryLevel === 'silver') {
|
||||
resultText = '🥈 银胜利! 使用1张小丑牌';
|
||||
resultColor = '#9ca3af';
|
||||
} else if (victoryLevel === 'bronze') {
|
||||
resultText = '🥉 铜胜利! 使用2张小丑牌';
|
||||
resultColor = '#b45309';
|
||||
} else {
|
||||
resultText = '💀 失败! 无法抵消反击伤害';
|
||||
}
|
||||
|
||||
const text = scene.add.text(CENTER_X, 250, resultText, {
|
||||
fontSize: '36px',
|
||||
fontFamily: 'Arial',
|
||||
color: resultColor,
|
||||
}).setOrigin(0.5);
|
||||
|
||||
this.gameOverOverlay.add(text);
|
||||
|
||||
const restartText = scene.add.text(CENTER_X, 350, '点击重新开始', {
|
||||
fontSize: '24px',
|
||||
fontFamily: 'Arial',
|
||||
color: '#6b7280',
|
||||
}).setOrigin(0.5);
|
||||
|
||||
this.gameOverOverlay.add(restartText);
|
||||
|
||||
// 动画
|
||||
scene.tweens.add({
|
||||
targets: text,
|
||||
scale: 1.1,
|
||||
duration: 500,
|
||||
yoyo: true,
|
||||
repeat: 2,
|
||||
});
|
||||
}
|
||||
|
||||
hideGameOver(): void {
|
||||
if (this.gameOverOverlay) {
|
||||
this.gameOverOverlay.destroy();
|
||||
this.gameOverOverlay = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
dispose(): void {
|
||||
this.hpBar.destroy();
|
||||
this.infoText.destroy();
|
||||
this.phaseText.destroy();
|
||||
if (this.gameOverOverlay) {
|
||||
this.gameOverOverlay.destroy();
|
||||
}
|
||||
if (this.enemyView) {
|
||||
this.enemyView.destroy();
|
||||
}
|
||||
this.container.destroy();
|
||||
}
|
||||
|
||||
private drawHpBar(enemy: Enemy): void {
|
||||
const hpPercent = enemy.currentHp / enemy.hp;
|
||||
const barX = CENTER_X - BAR_WIDTH / 2;
|
||||
const barY = ENEMY_Y + 100;
|
||||
|
||||
// 背景
|
||||
this.hpBar.fillStyle(0x374151);
|
||||
this.hpBar.fillRoundedRect(barX, barY, BAR_WIDTH, BAR_HEIGHT, 5);
|
||||
|
||||
// 前景
|
||||
const hpColor = hpPercent > 0.5 ? 0x22c55e : hpPercent > 0.25 ? 0xf59e0b : 0xef4444;
|
||||
this.hpBar.fillStyle(hpColor);
|
||||
this.hpBar.fillRoundedRect(barX, barY, BAR_WIDTH * hpPercent, BAR_HEIGHT, 5);
|
||||
|
||||
// 边框
|
||||
this.hpBar.lineStyle(2, 0x6b7280);
|
||||
this.hpBar.strokeRoundedRect(barX, barY, BAR_WIDTH, BAR_HEIGHT, 5);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
import Phaser from 'phaser';
|
||||
import type { Card } from '@/game/types';
|
||||
import { CardView, CARD_WIDTH } from './CardView';
|
||||
import type { GameScene } from '../GameScene';
|
||||
|
||||
const HAND_Y = 580;
|
||||
const MAX_HAND_WIDTH = 600;
|
||||
const CARD_SPACING = 70;
|
||||
|
||||
export class HandContainer {
|
||||
public readonly container: Phaser.GameObjects.Container;
|
||||
private cardViews: Map<string, CardView> = new Map();
|
||||
private centerX: number;
|
||||
private handY: number;
|
||||
|
||||
constructor(scene: GameScene, centerX: number, handY: number = HAND_Y) {
|
||||
this.container = scene.add.container(0, 0);
|
||||
this.centerX = centerX;
|
||||
this.handY = handY;
|
||||
}
|
||||
|
||||
updateCards(scene: GameScene, cards: Card[]): void {
|
||||
const currentCardIds = new Set(cards.map(c => c.id));
|
||||
|
||||
// 移除不在手牌中的卡牌
|
||||
for (const [cardId, view] of this.cardViews) {
|
||||
if (!currentCardIds.has(cardId)) {
|
||||
this.animateCardExit(scene, view);
|
||||
this.cardViews.delete(cardId);
|
||||
}
|
||||
}
|
||||
|
||||
// 更新或创建卡牌
|
||||
const handSize = cards.length;
|
||||
const spacing = Math.min(CARD_SPACING, MAX_HAND_WIDTH / handSize);
|
||||
const startX = this.centerX - (handSize - 1) * spacing / 2;
|
||||
|
||||
for (let i = 0; i < cards.length; i++) {
|
||||
const card = cards[i];
|
||||
const existingView = this.cardViews.get(card.id);
|
||||
|
||||
if (existingView) {
|
||||
// 更新位置
|
||||
const targetX = startX + i * spacing;
|
||||
const targetY = this.handY;
|
||||
existingView.setPosition(targetX, targetY);
|
||||
} else {
|
||||
// 创建新卡牌
|
||||
const x = startX + i * spacing;
|
||||
const view = new CardView(scene, card, x, this.handY);
|
||||
this.cardViews.set(card.id, view);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getCardView(cardId: string): CardView | undefined {
|
||||
return this.cardViews.get(cardId);
|
||||
}
|
||||
|
||||
getAllViews(): CardView[] {
|
||||
return Array.from(this.cardViews.values());
|
||||
}
|
||||
|
||||
dispose(): void {
|
||||
for (const view of this.cardViews.values()) {
|
||||
view.destroy();
|
||||
}
|
||||
this.cardViews.clear();
|
||||
this.container.destroy();
|
||||
}
|
||||
|
||||
private animateCardExit(scene: GameScene, view: CardView): void {
|
||||
scene.tweens.add({
|
||||
targets: view.container,
|
||||
alpha: 0,
|
||||
scale: 0.5,
|
||||
y: view.container.y - 100,
|
||||
duration: 200,
|
||||
ease: 'Back.easeIn',
|
||||
onComplete: () => view.destroy(),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
import Phaser from 'phaser';
|
||||
import type { CommandSchema } from 'boardgame-core';
|
||||
import type { GameScene } from '../GameScene';
|
||||
|
||||
const GAME_WIDTH = 800;
|
||||
const CENTER_X = GAME_WIDTH / 2;
|
||||
|
||||
export class PromptDisplay {
|
||||
public readonly container: Phaser.GameObjects.Container;
|
||||
private readonly bg: Phaser.GameObjects.Graphics;
|
||||
private readonly promptText: Phaser.GameObjects.Text;
|
||||
private readonly playerText: Phaser.GameObjects.Text;
|
||||
private isVisible = false;
|
||||
|
||||
constructor(scene: GameScene) {
|
||||
this.container = scene.add.container(CENTER_X, 450);
|
||||
this.container.setDepth(100);
|
||||
|
||||
// 创建背景
|
||||
this.bg = scene.add.graphics();
|
||||
|
||||
// 提示文本
|
||||
this.promptText = scene.add.text(0, -15, '', {
|
||||
fontSize: '18px',
|
||||
fontFamily: 'Arial',
|
||||
color: '#fbbf24',
|
||||
fontStyle: 'bold',
|
||||
align: 'center',
|
||||
}).setOrigin(0.5);
|
||||
|
||||
// 玩家文本
|
||||
this.playerText = scene.add.text(0, 15, '', {
|
||||
fontSize: '14px',
|
||||
fontFamily: 'Arial',
|
||||
color: '#9ca3af',
|
||||
align: 'center',
|
||||
}).setOrigin(0.5);
|
||||
|
||||
this.container.add([this.bg, this.promptText, this.playerText]);
|
||||
this.container.setVisible(false);
|
||||
}
|
||||
|
||||
update(schema: CommandSchema | null, player: string | null): void {
|
||||
if (!schema) {
|
||||
if (this.isVisible) {
|
||||
this.hide();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.isVisible) {
|
||||
this.show();
|
||||
}
|
||||
|
||||
// 格式化 schema 显示
|
||||
const formattedSchema = this.formatSchema(schema);
|
||||
this.promptText.setText(formattedSchema);
|
||||
|
||||
if (player) {
|
||||
this.playerText.setText(`等待玩家: ${player}`);
|
||||
} else {
|
||||
this.playerText.setText('');
|
||||
}
|
||||
}
|
||||
|
||||
private show(): void {
|
||||
this.isVisible = true;
|
||||
this.container.setVisible(true);
|
||||
this.container.setScale(0);
|
||||
this.container.setAlpha(0);
|
||||
|
||||
const scene = this.container.scene as Phaser.Scene;
|
||||
scene.tweens.add({
|
||||
targets: this.container,
|
||||
scale: 1,
|
||||
alpha: 1,
|
||||
duration: 200,
|
||||
ease: 'Back.easeOut',
|
||||
});
|
||||
|
||||
this.drawBackground();
|
||||
}
|
||||
|
||||
private hide(): void {
|
||||
if (!this.isVisible) return;
|
||||
this.isVisible = false;
|
||||
|
||||
const scene = this.container.scene as Phaser.Scene;
|
||||
scene.tweens.add({
|
||||
targets: this.container,
|
||||
scale: 0.8,
|
||||
alpha: 0,
|
||||
duration: 150,
|
||||
ease: 'Power2',
|
||||
onComplete: () => this.container.setVisible(false),
|
||||
});
|
||||
}
|
||||
|
||||
private drawBackground(): void {
|
||||
this.bg.clear();
|
||||
|
||||
const padding = 20;
|
||||
const width = Math.max(
|
||||
this.promptText.width,
|
||||
this.playerText.width
|
||||
) + padding * 2;
|
||||
const height = 60;
|
||||
|
||||
// 半透明背景
|
||||
this.bg.fillStyle(0x1f2937, 0.9);
|
||||
this.bg.fillRoundedRect(-width / 2, -height / 2, width, height, 10);
|
||||
|
||||
// 边框
|
||||
this.bg.lineStyle(2, 0xfbbf24, 0.6);
|
||||
this.bg.strokeRoundedRect(-width / 2, -height / 2, width, height, 10);
|
||||
}
|
||||
|
||||
private formatSchema(schema: CommandSchema): string {
|
||||
// 格式化命令 schema 为可读字符串
|
||||
const params = schema.params.map(p => {
|
||||
return p.variadic ? `<${p.name}...>` : `<${p.name}>`;
|
||||
}).join(' ');
|
||||
|
||||
return `${schema.name} ${params}`;
|
||||
}
|
||||
|
||||
destroy(): void {
|
||||
this.bg.destroy();
|
||||
this.promptText.destroy();
|
||||
this.playerText.destroy();
|
||||
this.container.destroy();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
export { CardView, CARD_WIDTH, CARD_HEIGHT } from './CardView';
|
||||
export { EnemyView } from './EnemyView';
|
||||
export { HandContainer } from './HandContainer';
|
||||
export { GameUI } from './GameUI';
|
||||
export { PromptDisplay } from './PromptDisplay';
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #111827;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#ui-root {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#ui-root > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import { useComputed } from '@preact/signals';
|
||||
import { createGameHost, type GameModule } from 'boardgame-core';
|
||||
import Phaser from 'phaser';
|
||||
import { h } from 'preact';
|
||||
import { PhaserGame, PhaserScene } from 'boardgame-phaser';
|
||||
|
||||
export default function App<TState extends Record<string, unknown>>(props: { gameModule: GameModule<TState>, gameScene: { new(): Phaser.Scene } }) {
|
||||
|
||||
const gameHost = useComputed(() => {
|
||||
const gameHost = createGameHost(props.gameModule);
|
||||
return { gameHost };
|
||||
});
|
||||
|
||||
const scene = useComputed(() => new props.gameScene());
|
||||
|
||||
const handleReset = async () => {
|
||||
const result = await gameHost.value.gameHost.start();
|
||||
console.log('Game finished!', result);
|
||||
};
|
||||
|
||||
const label = useComputed(() =>
|
||||
gameHost.value.gameHost.status.value === 'running' ? '重新开始' : '开始游戏'
|
||||
);
|
||||
|
||||
// Phaser 画布配置
|
||||
const phaserConfig = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 700,
|
||||
backgroundColor: '#111827',
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="flex flex-col h-screen bg-gray-900">
|
||||
{/* Phaser 游戏场景 */}
|
||||
<div class="flex-1 relative flex items-center justify-center">
|
||||
<PhaserGame config={phaserConfig}>
|
||||
<PhaserScene sceneKey="RegicideGameScene" scene={scene.value} autoStart data={gameHost.value} />
|
||||
</PhaserGame>
|
||||
</div>
|
||||
|
||||
{/* 底部控制栏 */}
|
||||
<div class="p-4 bg-gray-900 border-t border-gray-700 flex justify-between items-center">
|
||||
<div class="text-sm text-gray-400">
|
||||
⚔️ Regicide - 击败所有12个敌人
|
||||
</div>
|
||||
<button
|
||||
onClick={handleReset}
|
||||
class="px-6 py-2 bg-yellow-600 text-white rounded hover:bg-yellow-700 disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors font-medium"
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue