feat(play): 添加双猫模式下的鱼雨动画和猫状态管理

src/app/play/play.component.ts

@@ -50,7 +50,7 @@ import { FormData, Position, PositionMap, Stage, Question } from './interfaces';
 let defaultFormData: FormData = {
   "score": 0,
   "title": "",
-  "doubleModal": false,
+  "doubleModal": true,
   "questionText": "", "questionType": "read", "questionTextAudio": "",
   "bgAudio": "",
   "questions": [
@@ -912,8 +912,11 @@ export class PlayComponent implements OnInit, OnDestroy {
     if (this.g_formData.doubleModal) {
       this.cat_left = this.createCat('left'); // 创建左侧猫
       this.cat_right = this.createCat('right'); // 创建右侧猫
+      this.setCurrentCat(this.cat_left);
+      this.sleepRightCat();
     } else {
       this.cat_center = this.createCat('center'); // 创建中间猫
+      this.setCurrentCat(this.cat_center);
     }
 
     this.initStar();
@@ -1009,6 +1012,80 @@ export class PlayComponent implements OnInit, OnDestroy {
     }
   }
 
+  /**
+   * 显示鱼掉落动画
+   * @param type 位置类型：'center', 'left', 'right'
+   */
+  showFishRain(type) {
+    // 根据type确定鱼掉落的位置
+    let fishX = this.g_canvasWidth / 2; // 默认中间位置
+
+    switch (type) {
+      case 'left':
+        fishX = this.g_canvasWidth / 2 - 400 * this.g_mapScale;
+        break;
+      case 'right':
+        fishX = this.g_canvasWidth / 2 + 400 * this.g_mapScale;
+        break;
+      case 'center':
+      default:
+        fishX = this.g_canvasWidth / 2;
+        break;
+    }
+
+    // 创建鱼元素
+    const fishRain = this.g_cartoon.createCartoonElement('fish_rain', 'MySprite');
+    fishRain.ref.init(this.g_cartoon.images.get('yu_00')); // 初始帧
+    fishRain.ref.scaleX = this.g_mapScale;
+    fishRain.ref.scaleY = this.g_mapScale;
+    fishRain.ref.x = fishX;
+    fishRain.ref.y = 245 * this.g_mapScale; // 从屏幕顶部开始
+
+    // 渲染鱼元素，使用较高的层级确保在其他元素上方
+    this.render(fishRain.ref, zIndexMap.cat + 10);
+
+    // 播放音效
+    this.g_cartoon.playAudio('fish_down');
+
+    // 设置帧动画参数
+    let currentFrame = 0;
+    const maxFrame = 80;
+    const frameInterval = 50; // 每帧间隔时间，可以根据需要调整
+
+    // 创建帧动画函数
+    const playNextFrame = () => {
+      if (currentFrame <= maxFrame) {
+        // 设置当前帧的图像
+        const frameNumber = currentFrame.toString().padStart(2, '0'); // 确保两位数格式：00, 01, ...
+        fishRain.ref.init(this.g_cartoon.images.get(`yu_${frameNumber}`));
+
+        // 递增帧索引
+        currentFrame++;
+
+        // 设置下一帧的定时器
+        const timeoutId = setTimeout(playNextFrame, frameInterval);
+        this.m_setTimeoutIDs.push(timeoutId);
+      } else {
+        // 动画播放完成后隐藏鱼元素
+        // 显示游戏结束提示
+        setTimeout(() => {
+          console.log("游戏结束！");
+          fishRain.ref.visible = false;
+          this.gameOver();
+        }, 200);
+      }
+    };
+
+    // 开始播放帧动画
+    playNextFrame();
+  }
+
+  gameOver() {
+    // 处理游戏切换人员
+    
+
+  }
+
 
   // 当前游戏阶段索引
   private currentStageIndex = 0;
@@ -1031,7 +1108,12 @@ export class PlayComponent implements OnInit, OnDestroy {
     // 检查是否还有游戏阶段
     if (this.currentStageIndex >= this.gameStages.length) {
       // 所有阶段都完成了，结束游戏
-      this.endGame();
+      if (this.g_formData.doubleModal) {
+        this.showFishRain('left');
+      } else {
+        this.showFishRain('center');
+        this.endGame();
+      }
       return;
     }
 
@@ -1774,6 +1856,27 @@ export class PlayComponent implements OnInit, OnDestroy {
 
 
 
+  private currentCat
+  setCurrentCat(cat) {
+    this.currentCat = cat;
+  }
+  getCurrentCat() {
+    return this.currentCat;
+  }
+  sleepRightCat() {
+    this.cat_right["child_mao_ju_zuo"].ref.visible = false;
+    this.cat_right["child_mao_ju_pa"].ref.visible = false;
+    this.cat_right["child_mao_hui_zuo"].ref.visible = false;
+    this.cat_right["child_mao_hui_pa"].ref.visible = true;
+    this.cat_right["child_gan"].ref.visible = false;
+  }
+  sleepLeftCat() {
+    this.cat_left["child_mao_ju_zuo"].ref.visible = false;
+    this.cat_left["child_mao_ju_pa"].ref.visible = true;
+    this.cat_left["child_mao_hui_zuo"].ref.visible = true;
+    this.cat_left["child_mao_hui_pa"].ref.visible = false;
+  }
+
   /**
    * 创建临时小鱼并飞向水桶
    * @param fish 原始鱼对象
@@ -1798,9 +1901,9 @@ export class PlayComponent implements OnInit, OnDestroy {
     tempFish.ref.y = fishGlobalY;
 
     // 3. 获取水桶的全局位置
-    const tong = this.cat_center['child_tong_left'];
-    const tongGlobalX = this.cat_center.ref.x + tong.ref.x;
-    const tongGlobalY = this.cat_center.ref.y + tong.ref.y;
+    const tong = this.getCurrentCat()['child_tong_left'];
+    const tongGlobalX = this.getCurrentCat().ref.x + tong.ref.x;
+    const tongGlobalY = this.getCurrentCat().ref.y + tong.ref.y;
 
     // 将临时小鱼添加到舞台
     this.render(tempFish.ref, zIndexMap.card + 1);
@@ -1821,9 +1924,9 @@ export class PlayComponent implements OnInit, OnDestroy {
         tempFish.ref.visible = false;
 
         // 播放鱼箱子水花动画
-        if (this.cat_center && this.cat_center['child_tong_right_shui_hua']) {
+        if (this.getCurrentCat() && this.getCurrentCat()['child_tong_right_shui_hua']) {
           // 播放水桶水花动画
-          this.playShuiHuaAnimation(this.cat_center['child_tong_left_shui_hua']);
+          this.playShuiHuaAnimation(this.getCurrentCat()['child_tong_left_shui_hua']);
         }
         this.saveFishSuccess(fish);
       },
@@ -1853,8 +1956,8 @@ export class PlayComponent implements OnInit, OnDestroy {
     const buttonHeight = 94 * this.g_mapScale; // fa_yin的高度是94
 
     // 设置按钮位置 - 屏幕右下角
-    faYinBtn.ref.x = this.g_canvasWidth - buttonWidth / 2 - 50 * this.g_mapScale; // 距离右边50像素
-    faYinBtn.ref.y = this.g_canvasHeight - buttonHeight / 2 - 50 * this.g_mapScale; // 距离底部150像素，避免与其他按钮重叠
+    faYinBtn.ref.x = this.g_canvasWidth - buttonWidth / 2 - 30 * this.g_mapScale; // 距离右边50像素
+    faYinBtn.ref.y = this.g_canvasHeight - buttonHeight / 2 - 110 * this.g_mapScale; // 距离底部150像素，避免与其他按钮重叠
 
     // 渲染按钮元素（使用较高的zIndex确保按钮显示在上层）
     this.render(faYinBtn.ref, zIndexMap.card + 3);