init games

2025-10-18 00:36:49 +08:00
parent 3291d507f5
commit e3a0c6d439
8 changed files with 451 additions and 42 deletions
--- a/src/modules/game.tsx
+++ b/src/modules/game.tsx
@@ -0,0 +1,408 @@
+import { useEffect, useRef, useState } from 'react';
+import Phaser from 'phaser';
+console.log('Phaser version:', basename);
+const base = basename || '';
+export const Game = () => {
+  const gameRef = useRef<Phaser.Game | null>(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 (
+    <div style={{ textAlign: 'center', padding: '20px' }}>
+      <h1 style={{ 
+        color: '#333', 
+        marginBottom: '20px',
+        fontSize: '36px',
+        textShadow: '2px 2px 4px rgba(0,0,0,0.2)'
+      }}>
+        🎯 打地鼠游戏
+      </h1>
+      
+      <div style={{ 
+        marginBottom: '20px',
+        fontSize: '24px',
+        fontWeight: 'bold',
+        color: '#333'
+      }}>
+        <span style={{ 
+          backgroundColor: '#4caf50', 
+          color: 'white', 
+          padding: '10px 20px',
+          borderRadius: '8px',
+          marginRight: '15px',
+          display: 'inline-block'
+        }}>
+          得分: {score}
+        </span>
+        <span style={{ 
+          backgroundColor: '#ff9800', 
+          color: 'white', 
+          padding: '10px 20px',
+          borderRadius: '8px',
+          display: 'inline-block'
+        }}>
+          剩余时间: {timeLeft}秒
+        </span>
+      </div>
+
+      <div id="game-container" style={{ 
+        margin: '0 auto',
+        borderRadius: '10px',
+        boxShadow: '0 4px 8px rgba(0,0,0,0.2)'
+      }}></div>
+
+      <div style={{ marginTop: '20px' }}>
+        {!gameStarted && !gameOver && (
+          <button 
+            onClick={startGame}
+            style={{
+              fontSize: '20px',
+              padding: '15px 40px',
+              backgroundColor: '#2196f3',
+              color: 'white',
+              border: 'none',
+              borderRadius: '8px',
+              cursor: 'pointer',
+              fontWeight: 'bold',
+              boxShadow: '0 4px 6px rgba(0,0,0,0.2)',
+              transition: 'all 0.3s'
+            }}
+            onMouseOver={(e) => {
+              e.currentTarget.style.backgroundColor = '#1976d2';
+              e.currentTarget.style.transform = 'scale(1.05)';
+            }}
+            onMouseOut={(e) => {
+              e.currentTarget.style.backgroundColor = '#2196f3';
+              e.currentTarget.style.transform = 'scale(1)';
+            }}
+          >
+            🎮 开始游戏
+          </button>
+        )}
+        
+        {gameOver && (
+          <button 
+            onClick={restartGame}
+            style={{
+              fontSize: '20px',
+              padding: '15px 40px',
+              backgroundColor: '#4caf50',
+              color: 'white',
+              border: 'none',
+              borderRadius: '8px',
+              cursor: 'pointer',
+              fontWeight: 'bold',
+              boxShadow: '0 4px 6px rgba(0,0,0,0.2)',
+              transition: 'all 0.3s'
+            }}
+            onMouseOver={(e) => {
+              e.currentTarget.style.backgroundColor = '#45a049';
+              e.currentTarget.style.transform = 'scale(1.05)';
+            }}
+            onMouseOut={(e) => {
+              e.currentTarget.style.backgroundColor = '#4caf50';
+              e.currentTarget.style.transform = 'scale(1)';
+            }}
+          >
+            🔄 再玩一次
+          </button>
+        )}
+      </div>
+
+      <div style={{ 
+        marginTop: '20px', 
+        fontSize: '14px', 
+        color: '#666',
+        backgroundColor: '#fff',
+        padding: '15px',
+        borderRadius: '8px',
+        maxWidth: '600px',
+        margin: '20px auto'
+      }}>
+        <p style={{ margin: '5px 0' }}>📖 游戏规则:</p>
+        <p style={{ margin: '5px 0' }}>• 点击冒出来的地鼠得分</p>
+        <p style={{ margin: '5px 0' }}>• 每击中一只地鼠得 10 分</p>
+        <p style={{ margin: '5px 0' }}>• 游戏时长 30 秒</p>
+        <p style={{ margin: '5px 0' }}>• 快速反应,争取高分!</p>
+      </div>
+    </div>
+  );
+}