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,34 +39,43 @@ 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();
-        
+
         // 添加语言切换按钮（仅用于测试）
         this.createLanguageToggle();
-        
+
         // 添加雨天效果控制按钮
         this.createRainControlButton();
-        
+
         // 添加页面可见性变化监听，处理页面切出和切回的情况
         this.setupVisibilityChangeHandler();
     }
@@ -75,33 +87,21 @@ export default class MenuScene extends Phaser.Scene {
         const cam = this.cameras.main;
         const languages = LanguageManager.getAvailableLanguages();
         let currentLangIndex = languages.indexOf(LanguageManager.currentLanguage);
-        
+
         // 按钮基础位置（在退出按钮下方）
         const baseY = cam.centerY + this.unit * 11;
-        
+
         // 创建主按钮文本
         const toggleText = this.add.text(
             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(
             cam.centerX,
@@ -111,30 +111,30 @@ export default class MenuScene extends Phaser.Scene {
             0x000000,
             0 // 完全透明
         ).setOrigin(0.5, 0.5);
-        
+
         // 设置点击区域可交互
         clickArea.setInteractive({ useHandCursor: true });
-        
+
         // 添加点击事件
         clickArea.on('pointerdown', () => {
             currentLangIndex = (currentLangIndex + 1) % languages.length;
             const newLang = languages[currentLangIndex];
             LanguageManager.setLanguage(newLang);
-            
+
             // 更新文本
             const newText = `${newLang}`;
             toggleText.setText(newText);
             reflectionText.setText(newText);
-            
+
             // 重新计算点击区域大小
             clickArea.width = toggleText.width + 20;
             clickArea.height = toggleText.height + 40;
-            
+
             // 直接更新菜单文本以显示新语言
             this.titleText.setText(LanguageManager.t('title'));
             this.startText.setText(LanguageManager.t('start'));
             this.exitText.setText(LanguageManager.t('exit'));
-            
+
             // 更新雨天控制按钮文本
             const rainText = LanguageManager.t('rain');
             const stateText = this.isRainEnabled ? LanguageManager.t('on') : LanguageManager.t('off');
@@ -147,18 +147,21 @@ export default class MenuScene extends Phaser.Scene {
      */
     createRainControlButton() {
         const cam = this.cameras.main;
-        
+
         // 按钮基础位置（在语言切换按钮下方）
         const baseY = cam.centerY + this.unit * 17;
-        
+
         // 创建主按钮文本
         this.rainToggleText = this.add.text(
             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,
@@ -168,10 +171,10 @@ export default class MenuScene extends Phaser.Scene {
             0x000000,
             0 // 完全透明
         ).setOrigin(0.5, 0.5);
-        
+
         // 设置点击区域可交互
         this.rainClickArea.setInteractive({ useHandCursor: true });
-        
+
         // 添加点击事件
         this.rainClickArea.on('pointerdown', () => {
             this.toggleRainEffect();
@@ -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;
-        });
     }
     
     /**
@@ -481,7 +477,7 @@ export default class MenuScene extends Phaser.Scene {
         // 保存原始位置
         const originalX = text.x;
         const originalY = text.y;
-        
+
         // 创建波纹动画
         this.tweens.add({
             targets: text,
@@ -491,7 +487,7 @@ export default class MenuScene extends Phaser.Scene {
             yoyo: true,
             repeat: -1 // 无限重复
         });
-        
+
         // 添加轻微的缩放动画
         this.tweens.add({
             targets: text,
@@ -501,7 +497,7 @@ export default class MenuScene extends Phaser.Scene {
             yoyo: true,
             repeat: -1 // 无限重复
         });
-        
+
         // 添加透明度变化
         this.tweens.add({
             targets: text,
@@ -512,22 +508,52 @@ export default class MenuScene extends Phaser.Scene {
             repeat: -1 // 无限重复
         });
     }
+
+    /**
+     * 为文本创建倒影效果
+     * @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();
-        
+
         // 创建涟漪组，用于管理所有涟漪效果
         this.rippleGroup = this.add.group();
-        
+
         // 雨的参数
         const rainCount = 50; // 雨滴数量
         const screenWidth = this.sys.game.config.width;
         const screenHeight = this.sys.game.config.height;
-        
+
         // 创建雨滴
         for (let i = 0; i < rainCount; i++) {
             // 创建雨滴精灵（使用简单的白色矩形）
@@ -539,14 +565,17 @@ export default class MenuScene extends Phaser.Scene {
                 0xffffff, // 白色
                 0.3 // 半透明
             );
-            
+
+            // 将雨滴添加到container中
+            this.rainContainer.add(raindrop);
+
             // 添加到组
             this.rainGroup.add(raindrop);
-            
+
             // 设置雨滴动画 - 斜向落下（固定方向）
             // 水平方向的位移量（相对单位），固定向左下方倾斜
             const horizontalOffset = -this.unit * Phaser.Math.Between(15, 17); // 固定向左方向，8-12单位
-            
+
             // 设置雨滴动画
             this.tweens.add({
                 targets: raindrop,
@@ -563,14 +592,14 @@ export default class MenuScene extends Phaser.Scene {
                         const initialX = Phaser.Math.Between(-this.unit * 10, screenWidth + this.unit * 10);
                         targets[0].x = initialX;
                         targets[0].y = -this.unit * 2;
-                        
+
                         // 更新动画的x目标值
                         tween.data[0].value = initialX + horizontalOffset;
                     }
                 }
             });
         }
-        
+
         // 添加雨滴涟漪效果
         this.createRainRipples(screenWidth, screenHeight);
     }
@@ -610,11 +639,11 @@ export default class MenuScene extends Phaser.Scene {
         // 随机位置
         const x = Phaser.Math.Between(0, screenWidth);
         const y = Phaser.Math.Between(0, screenHeight); // 整个屏幕高度
-        
+
         // 每个雨滴产生多个同心涟漪
         const rippleLayers = 3;
         const baseDelay = 100;
-        
+
         for (let i = 0; i < rippleLayers; i++) {
             // 延迟创建后续的涟漪层
             const timeoutId = setTimeout(() => {
@@ -628,18 +657,21 @@ export default class MenuScene extends Phaser.Scene {
                         0xffffff, // 白色
                         0 // 透明填充
                     ).setStrokeStyle(this.unit * 0.08, 0xffffff, 0.3); // 更细的边框，更高的透明度
-                    
+
+                    // 将涟漪添加到雨滴container中
+                    this.rainContainer.add(ripple);
+
                     // 将涟漪添加到涟漪组中
                     this.rippleGroup.add(ripple);
-                    
+
                     // 随机化每个涟漪的参数，增加自然感
                     const maxRadius = this.unit * Phaser.Math.Between(2, 3);
                     const duration = Phaser.Math.Between(800, 1500);
                     const startAlpha = Phaser.Math.Between(0.3, 0.5);
-                    
+
                     // 设置初始透明度
                     ripple.setAlpha(startAlpha);
-                    
+
                     // 创建扩散动画
                     this.tweens.add({
                         targets: ripple,
@@ -657,17 +689,17 @@ export default class MenuScene extends Phaser.Scene {
                     });
                 }
             }, i * baseDelay);
-            
+
             // 将timeout ID保存到数组中
             this.rippleTimeouts.push(timeoutId);
         }
-        
+
         // 只有在雨天效果开启时，才递归创建新的涟漪
         if (this.isRainEnabled) {
             const timeoutId = setTimeout(() => {
                 this.createSingleRipple(screenWidth, screenHeight);
             }, Phaser.Math.Between(500, 1500));
-            
+
             // 将递归调用的timeout ID保存到数组中
             this.rippleTimeouts.push(timeoutId);
         }