56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
'use client'
|
||
|
||
import { useEffect, useRef } from 'react'
|
||
|
||
/**
|
||
* 游戏页面
|
||
* Phaser 通过动态 import 加载，确保 SSR 安全（不在服务端执行）
|
||
*/
|
||
export default function GamePage() {
|
||
const gameRef = useRef<{ destroy: (removeCanvas: boolean) => void } | null>(null)
|
||
|
||
useEffect(() => {
|
||
let mounted = true
|
||
|
||
const initGame = async () => {
|
||
// 动态导入 Phaser，避免 SSR 环境报错
|
||
const Phaser = (await import('phaser')).default
|
||
const { createGameConfig } = await import('@/game/config')
|
||
const { createGameScene } = await import('@/game/GameScene')
|
||
|
||
if (!mounted) return
|
||
|
||
const GameScene = createGameScene(Phaser)
|
||
const config = createGameConfig('game-container')
|
||
|
||
// 注入场景
|
||
config.scene = [GameScene]
|
||
|
||
// 手动设置 scale mode（避免 SSR 时引用 Phaser.Scale 常量报错）
|
||
if (config.scale) {
|
||
config.scale.mode = Phaser.Scale.FIT
|
||
config.scale.autoCenter = Phaser.Scale.CENTER_BOTH
|
||
}
|
||
|
||
// type 设置
|
||
config.type = Phaser.AUTO
|
||
|
||
gameRef.current = new Phaser.Game(config)
|
||
}
|
||
|
||
initGame().catch(console.error)
|
||
|
||
return () => {
|
||
mounted = false
|
||
gameRef.current?.destroy(true)
|
||
gameRef.current = null
|
||
}
|
||
}, [])
|
||
|
||
return (
|
||
<div className="w-full h-screen overflow-hidden" style={{ backgroundColor: '#0F0F23' }}>
|
||
<div id="game-container" className="w-full h-full" />
|
||
</div>
|
||
)
|
||
}
|