feat(menu) 元素统一放到container中管理

scenes/MenuScene.js

@@ -25,6 +25,9 @@ export default class MenuScene extends Phaser.Scene {
         // 初始化setTimeout ID数组，用于管理所有与涟漪相关的延迟调用
         this.rippleTimeouts = [];
 
+        // 创建文本container
+        this.textContainer = this.add.container(0, 0);
+
         // 添加落雨落效果
         this.createRainEffect();
 
@@ -36,25 +39,34 @@ export default class MenuScene extends Phaser.Scene {
             cam.centerX,  // 文本在x轴上的位置，相机中心
             cam.centerY - this.unit * 8,  // 文本在y轴上的位置，相机中心上方
             LanguageManager.t('title'),
-            { fontSize: this.unit * 2.4, color: '#ffffff' }
+            { fontSize: this.unit * 2.4, color: '#ffffff', fontFamily: 'monospace'}
         ).setOrigin(0.5, 0.5);
 
+        // 为标题文本添加倒影
+        this.createTextReflection(this.titleText);
+
         // 添加菜单文本 - 使用多语言
         this.startText = this.add.text(
             cam.centerX,  // 文本在x轴上的位置，相机中心
             cam.centerY,  // 文本在y轴上的位置，相机中心
             LanguageManager.t('start'),
-            { fontSize: this.unit * 3.2, color: '#ffffff' }
+            { fontSize: this.unit * 3.2, color: '#ffffff', fontFamily: 'monospace'}
         ).setOrigin(0.5, 0.5);
 
+        // 为开始文本添加倒影
+        this.createTextReflection(this.startText);
+
         // 添加退出按钮文本 - 使用多语言
         this.exitText = this.add.text(
             cam.centerX,  // 文本在x轴上的位置，相机中心
             cam.centerY + this.unit * 5,  // 文本在y轴上的位置，开始按钮下方
             LanguageManager.t('exit'),
-            { fontSize: this.unit * 2.4, color: '#ffffff' }
+            { fontSize: this.unit * 2.4, color: '#ffffff', fontFamily: 'monospace'}
         ).setOrigin(0.5, 0.5);
 
+        // 为退出文本添加倒影
+        this.createTextReflection(this.exitText);
+
         // 为开始和退出按钮添加点击功能
         this.addButtonClickHandlers();
 
@@ -84,23 +96,11 @@ export default class MenuScene extends Phaser.Scene {
             cam.centerX,
             baseY,
             `${LanguageManager.currentLanguage}`,
-            { fontSize: this.unit * 1.6, color: '#ffffff' }
+            { fontSize: this.unit * 1.6, color: '#ffffff', fontFamily: 'monospace'}
         ).setOrigin(0.5, 0.5);
 
-        // 创建倒影文本
+        // 使用createTextReflection方法创建倒影
-        const reflectionText = this.add.text(
+        const reflectionText = this.createTextReflection(toggleText);
-            cam.centerX,
-            baseY + this.unit * 2, // 倒影位置在主文本下方
-            `${LanguageManager.currentLanguage}`,
-            { fontSize: this.unit * 1.6, color: '#ffffff' }
-        ).setOrigin(0.5, 0.5);
-        
-        // 设置倒影效果
-        reflectionText.setScale(1, -1); // 垂直翻转
-        reflectionText.setAlpha(0.3); // 半透明效果
-        
-        // 添加动态波纹效果
-        this.createRippleEffect(reflectionText);
 
         // 创建透明的点击区域（与文本大小匹配）
         const clickArea = this.add.rectangle(
@@ -156,9 +156,12 @@ export default class MenuScene extends Phaser.Scene {
             cam.centerX,
             baseY,
             LanguageManager.t('rain')+" "+LanguageManager.t('on'),
-            { fontSize: this.unit * 1.6, color: '#ffffff' }
+            { fontSize: this.unit * 1.6, color: '#ffffff', fontFamily: 'monospace'}
         ).setOrigin(0.5, 0.5);
 
+        // 使用createTextReflection方法创建倒影
+        this.createTextReflection(this.rainToggleText);
+
         // 创建透明的点击区域（与文本大小匹配）
         this.rainClickArea = this.add.rectangle(
             cam.centerX,
@@ -289,15 +292,8 @@ export default class MenuScene extends Phaser.Scene {
      * 更新雨天效果的可见性
      */
     updateRainEffectVisibility() {
-        // 控制雨滴的显示/隐藏
+        // 控制雨滴container的显示/隐藏
-        this.rainGroup.children.each(raindrop => {
+        this.rainContainer.visible = this.isRainEnabled;
-            raindrop.visible = this.isRainEnabled;
-        });
-        
-        // 控制涟漪的显示/隐藏
-        this.rippleGroup.children.each(ripple => {
-            ripple.visible = this.isRainEnabled;
-        });
     }
     
     /**
@@ -513,10 +509,40 @@ export default class MenuScene extends Phaser.Scene {
         });
     }
 
+    /**
+     * 为文本创建倒影效果
+     * @param {Phaser.GameObjects.Text} text - 要创建倒影的文本
+     */
+    createTextReflection(text) {
+        // 创建倒影文本
+        const reflectionText = this.add.text(
+            text.x,
+            text.y + text.height + this.unit * 0.5, // 倒影位置在主文本下方
+            text.text,
+            { fontSize: text.style.fontSize, color: '#ffffff', fontFamily: text.style.fontFamily}
+        ).setOrigin(0.5, 0.5);
+
+        // 设置倒影效果
+        reflectionText.setScale(1, -1); // 垂直翻转
+        reflectionText.setAlpha(0.3); // 半透明效果
+
+        // 将主文本和倒影文本添加到container中
+        this.textContainer.add(text);
+        this.textContainer.add(reflectionText);
+
+        // 添加动态波纹效果
+        this.createRippleEffect(reflectionText);
+
+        return reflectionText;
+    }
+    
     /**
      * 创建雨落下效果
      */
     createRainEffect() {
+        // 创建雨滴container
+        this.rainContainer = this.add.container(0, 0);
+
         // 创建雨滴精灵组
         this.rainGroup = this.add.group();
 
@@ -540,6 +566,9 @@ export default class MenuScene extends Phaser.Scene {
                 0.3 // 半透明
             );
 
+            // 将雨滴添加到container中
+            this.rainContainer.add(raindrop);
+
             // 添加到组
             this.rainGroup.add(raindrop);
 
@@ -629,6 +658,9 @@ export default class MenuScene extends Phaser.Scene {
                         0 // 透明填充
                     ).setStrokeStyle(this.unit * 0.08, 0xffffff, 0.3); // 更细的边框，更高的透明度
 
+                    // 将涟漪添加到雨滴container中
+                    this.rainContainer.add(ripple);
+
                     // 将涟漪添加到涟漪组中
                     this.rippleGroup.add(ripple);