156 lines
3.7 KiB
TypeScript
156 lines
3.7 KiB
TypeScript
import { ReactiveScene } from 'boardgame-phaser';
|
|
|
|
/** 菜单场景配置 */
|
|
const MENU_CONFIG = {
|
|
colors: {
|
|
title: '#1f2937',
|
|
buttonText: '#ffffff',
|
|
buttonBg: 0x3b82f6,
|
|
buttonBgHover: 0x2563eb,
|
|
subtitle: '#6b7280',
|
|
},
|
|
fontSize: {
|
|
title: '48px',
|
|
button: '24px',
|
|
subtitle: '16px',
|
|
},
|
|
button: {
|
|
width: 200,
|
|
height: 60,
|
|
},
|
|
positions: {
|
|
titleY: -100,
|
|
buttonY: 40,
|
|
subtitleY: 140,
|
|
},
|
|
} as const;
|
|
|
|
export class MenuScene extends ReactiveScene {
|
|
private titleText!: Phaser.GameObjects.Text;
|
|
private startButtonContainer!: Phaser.GameObjects.Container;
|
|
private startButtonBg!: Phaser.GameObjects.Rectangle;
|
|
private startButtonText!: Phaser.GameObjects.Text;
|
|
|
|
constructor() {
|
|
super('MenuScene');
|
|
}
|
|
|
|
create(): void {
|
|
super.create();
|
|
|
|
const center = this.getCenterPosition();
|
|
|
|
this.createTitle(center);
|
|
this.createStartButton(center);
|
|
this.createSubtitle(center);
|
|
}
|
|
|
|
/** 获取屏幕中心位置 */
|
|
private getCenterPosition(): { x: number; y: number } {
|
|
return {
|
|
x: this.game.scale.width / 2,
|
|
y: this.game.scale.height / 2,
|
|
};
|
|
}
|
|
|
|
/** 创建标题文本 */
|
|
private createTitle(center: { x: number; y: number }): void {
|
|
this.titleText = this.add.text(
|
|
center.x,
|
|
center.y + MENU_CONFIG.positions.titleY,
|
|
'Tic-Tac-Toe',
|
|
{
|
|
fontSize: MENU_CONFIG.fontSize.title,
|
|
fontFamily: 'Arial',
|
|
color: MENU_CONFIG.colors.title,
|
|
}
|
|
).setOrigin(0.5);
|
|
|
|
// 标题入场动画
|
|
this.titleText.setScale(0);
|
|
this.tweens.add({
|
|
targets: this.titleText,
|
|
scale: 1,
|
|
duration: 600,
|
|
ease: 'Back.easeOut',
|
|
});
|
|
}
|
|
|
|
/** 创建开始按钮 */
|
|
private createStartButton(center: { x: number; y: number }): void {
|
|
const { button, colors } = MENU_CONFIG;
|
|
|
|
this.startButtonBg = this.add.rectangle(
|
|
center.x,
|
|
center.y + MENU_CONFIG.positions.buttonY,
|
|
button.width,
|
|
button.height,
|
|
colors.buttonBg
|
|
).setInteractive({ useHandCursor: true });
|
|
|
|
this.startButtonText = this.add.text(
|
|
center.x,
|
|
center.y + MENU_CONFIG.positions.buttonY,
|
|
'Start Game',
|
|
{
|
|
fontSize: MENU_CONFIG.fontSize.button,
|
|
fontFamily: 'Arial',
|
|
color: colors.buttonText,
|
|
}
|
|
).setOrigin(0.5);
|
|
|
|
this.startButtonContainer = this.add.container(
|
|
center.x,
|
|
center.y + MENU_CONFIG.positions.buttonY,
|
|
[this.startButtonBg, this.startButtonText]
|
|
);
|
|
|
|
// 按钮交互
|
|
this.setupButtonInteraction();
|
|
}
|
|
|
|
/** 设置按钮交互效果 */
|
|
private setupButtonInteraction(): void {
|
|
this.startButtonBg.on('pointerover', () => {
|
|
this.startButtonBg.setFillStyle(MENU_CONFIG.colors.buttonBgHover);
|
|
this.tweens.add({
|
|
targets: this.startButtonContainer,
|
|
scale: 1.05,
|
|
duration: 100,
|
|
});
|
|
});
|
|
|
|
this.startButtonBg.on('pointerout', () => {
|
|
this.startButtonBg.setFillStyle(MENU_CONFIG.colors.buttonBg);
|
|
this.tweens.add({
|
|
targets: this.startButtonContainer,
|
|
scale: 1,
|
|
duration: 100,
|
|
});
|
|
});
|
|
|
|
this.startButtonBg.on('pointerdown', () => {
|
|
this.startGame();
|
|
});
|
|
}
|
|
|
|
/** 创建副标题 */
|
|
private createSubtitle(center: { x: number; y: number }): void {
|
|
this.add.text(
|
|
center.x,
|
|
center.y + MENU_CONFIG.positions.subtitleY,
|
|
'Click to start playing',
|
|
{
|
|
fontSize: MENU_CONFIG.fontSize.subtitle,
|
|
fontFamily: 'Arial',
|
|
color: MENU_CONFIG.colors.subtitle,
|
|
}
|
|
).setOrigin(0.5);
|
|
}
|
|
|
|
/** 开始游戏 */
|
|
private async startGame(): Promise<void> {
|
|
await this.sceneController.launch('GameScene');
|
|
}
|
|
}
|