import { useEffect, useRef, useState } from 'react'; import Phaser from 'phaser'; console.log('Phaser version:', basename); const base = basename || ''; export const Game = () => { const gameRef = useRef(null); const [score, setScore] = useState(0); const [timeLeft, setTimeLeft] = useState(30); const [gameStarted, setGameStarted] = useState(false); const [gameOver, setGameOver] = useState(false); useEffect(() => { if (!gameStarted) return; class GameScene extends Phaser.Scene { private holes: Phaser.GameObjects.Image[] = []; private moles: Phaser.GameObjects.Image[] = []; private moleTimers: Phaser.Time.TimerEvent[] = []; private currentScore = 0; private gameTime = 30; private timerText?: Phaser.GameObjects.Text; private gameTimer?: Phaser.Time.TimerEvent; constructor() { super({ key: 'GameScene' }); } preload() { // 加载图片资源 this.load.image('hole', `${base}/assets/hole.png`); this.load.image('mole', `${base}/assets/mole.png`); // 加载音频资源 this.load.audio('hit', `${base}/assets/hit.wav`); } create() { // 设置背景颜色 this.cameras.main.setBackgroundColor('#84f20b'); // 创建 3x3 的地洞网格 const cols = 3; const rows = 3; const spacing = 150; const startX = 150; const startY = 100; // 限制图片大小 const holeSize = 80; // 地洞显示大小 const moleSize = 70; // 地鼠显示大小 for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { const x = startX + col * spacing; const y = startY + row * spacing; // 创建地洞 const hole = this.add.image(x, y, 'hole'); hole.setDisplaySize(holeSize, holeSize); this.holes.push(hole); // 创建地鼠(初始隐藏) const mole = this.add.image(x, y - 20, 'mole'); mole.setDisplaySize(moleSize, moleSize); mole.setVisible(false); mole.setInteractive({ cursor: 'pointer' }); // 点击地鼠的事件 mole.on('pointerdown', () => { if (mole.visible) { this.hitMole(mole); } }); this.moles.push(mole); } } // 创建计时器文本 this.timerText = this.add.text(250, 30, `时间: ${this.gameTime}秒`, { fontSize: '24px', color: '#ffffff', backgroundColor: '#333', padding: { x: 10, y: 5 } }); this.timerText.setOrigin(0.5); // 启动游戏计时器 this.gameTimer = this.time.addEvent({ delay: 1000, callback: this.updateTimer, callbackScope: this, loop: true }); // 开始随机显示地鼠 this.startMoleSpawning(); } startMoleSpawning() { // 每隔一段时间随机显示地鼠 this.time.addEvent({ delay: 800, callback: this.showRandomMole, callbackScope: this, loop: true }); } showRandomMole() { if (this.gameTime <= 0) return; // 随机选择一个地鼠 const availableMoles = this.moles.filter(mole => !mole.visible); if (availableMoles.length === 0) return; const randomMole = Phaser.Utils.Array.GetRandom(availableMoles); randomMole.setVisible(true); // 地鼠弹出动画 this.tweens.add({ targets: randomMole, y: randomMole.y - 30, duration: 200, yoyo: false, ease: 'Back.easeOut' }); // 设置地鼠自动隐藏 const hideTimer = this.time.delayedCall(1500, () => { this.hideMole(randomMole); }); this.moleTimers.push(hideTimer); } hideMole(mole: Phaser.GameObjects.Image) { if (!mole.visible) return; this.tweens.add({ targets: mole, y: mole.y + 30, duration: 200, ease: 'Back.easeIn', onComplete: () => { mole.setVisible(false); } }); } hitMole(mole: Phaser.GameObjects.Image) { this.currentScore += 10; setScore(this.currentScore); // 播放击中音效 this.sound.play('hit'); const moleSize = 70; // 地鼠显示大小 // 击中效果 - 缩小再恢复 this.tweens.add({ targets: mole, displayWidth: moleSize * 0.7, displayHeight: moleSize * 0.7, duration: 100, yoyo: true, ease: 'Power2', onComplete: () => { mole.setDisplaySize(moleSize, moleSize); this.hideMole(mole); } }); // 显示得分文本 const scoreText = this.add.text(mole.x, mole.y - 50, '+10', { fontSize: '28px', color: '#ffeb3b', fontStyle: 'bold' }); scoreText.setOrigin(0.5); this.tweens.add({ targets: scoreText, y: scoreText.y - 50, alpha: 0, duration: 800, onComplete: () => { scoreText.destroy(); } }); } updateTimer() { this.gameTime--; setTimeLeft(this.gameTime); if (this.timerText) { this.timerText.setText(`时间: ${this.gameTime}秒`); } if (this.gameTime <= 0) { this.endGame(); } } endGame() { // 停止所有计时器 this.moleTimers.forEach(timer => timer.remove()); this.moleTimers = []; if (this.gameTimer) { this.gameTimer.remove(); } // 隐藏所有地鼠 this.moles.forEach(mole => mole.setVisible(false)); // 显示游戏结束文本 const gameOverText = this.add.text(250, 250, '游戏结束!', { fontSize: '48px', color: '#ffffff', backgroundColor: '#e91e63', padding: { x: 20, y: 10 } }); gameOverText.setOrigin(0.5); const finalScoreText = this.add.text(250, 320, `最终得分: ${this.currentScore}`, { fontSize: '32px', color: '#ffffff', backgroundColor: '#333', padding: { x: 15, y: 8 } }); finalScoreText.setOrigin(0.5); setGameOver(true); } } // 配置 Phaser 游戏 const config: Phaser.Types.Core.GameConfig = { type: Phaser.AUTO, width: 600, height: 550, parent: 'game-container', backgroundColor: '#8bc34a', scene: GameScene, physics: { default: 'arcade', arcade: { gravity: { y: 0, x: 0 }, debug: false } } }; // 创建游戏实例 gameRef.current = new Phaser.Game(config); // 清理函数 return () => { if (gameRef.current) { gameRef.current.destroy(true); gameRef.current = null; } }; }, [gameStarted]); const startGame = () => { setScore(0); setTimeLeft(30); setGameStarted(true); setGameOver(false); }; const restartGame = () => { if (gameRef.current) { gameRef.current.destroy(true); gameRef.current = null; } setScore(0); setTimeLeft(30); setGameStarted(false); setGameOver(false); setTimeout(() => { setGameStarted(true); }, 100); }; return (

🎯 打地鼠游戏

得分: {score} 剩余时间: {timeLeft}秒
{!gameStarted && !gameOver && ( )} {gameOver && ( )}

📖 游戏规则:

• 点击冒出来的地鼠得分

• 每击中一只地鼠得 10 分

• 游戏时长 30 秒

• 快速反应,争取高分!

); }