refactor(play): 重构鱼点击处理逻辑，拆分动画和存储功能

src/app/play/play.component.ts

@@ -1052,7 +1052,7 @@ export class PlayComponent implements OnInit, OnDestroy {
       console.log('fish click', fish);
       // 点击气泡时执行brokePaopao方法
       this.touchFish = fish;
-      this.brokePaopao(fish);
+      this.onTouchFish(fish);
       setTimeout(() => {
         this.touchFish = null;
       }, 100);
@@ -1067,7 +1067,7 @@ export class PlayComponent implements OnInit, OnDestroy {
    * 存储用户点击的鱼的数据，检查是否有两个正确数据
    * @param fish 被点击的鱼对象
    */
-  brokePaopao(fish) {
+  onTouchFish(fish) {
     // 获取当前游戏阶段
     const currentStage = this.gameStages[this.currentStageIndex];
 
@@ -1094,37 +1094,10 @@ export class PlayComponent implements OnInit, OnDestroy {
 
       // 创建飞向水桶的小鱼动画
       this.createFlyingFish(fish);
+      this.brokePaopaoAni(fish);
+      this.saveFishRight(fish);
 
       // 存储用户点击的鱼的数据
-      if (fish.questionData) {
-        this.clickedFishData.push(fish.questionData);
-
-        console.log('Clicked fish count:', this.clickedFishData.length);
-
-        // 计算正确点击的次数
-        const correctClicks = this.clickedFishData.filter(data =>
-          data.audio === currentStage.correctQuestion.audio &&
-          data.image === currentStage.correctQuestion.image
-        ).length;
-
-        console.log('Correct clicks:', correctClicks);
-
-        // 如果有两个数据为当前Stage的正确数据，则清空画面，等待1秒后进入下一轮游戏
-        if (correctClicks >= 2) {
-          console.log('Stage completed! Moving to next stage...');
-
-          // 清空画面（清除所有鱼）
-          this.clearFishes();
-
-          // 增加当前阶段索引
-          this.currentStageIndex++;
-
-          // 等待1秒后进入下一轮游戏
-          setTimeout(() => {
-            this.initNextStage();
-          }, 1000);
-        }
-      }
     } else {
       // 错误小鱼的处理逻辑
       // 播放错误音效
@@ -1136,9 +1109,10 @@ export class PlayComponent implements OnInit, OnDestroy {
         fish.speed = originalSpeed;
       }, 1000);
     }
-
+    return fish;
+  }
+  brokePaopaoAni(fish) {
     // 对于正确的鱼，显示泡泡破裂动画
-    if (isCorrect) {
     // 按顺序切换序列帧 pao_pao_xu_lie_zhen_1 到 pao_pao_xu_lie_zhen_9
     let currentFrame = 1;
     const maxFrame = 9;
@@ -1162,8 +1136,40 @@ export class PlayComponent implements OnInit, OnDestroy {
     fish.speed = 0;
   }
 
-    return fish;
+  saveFishRight(fish) {
+    const currentStage = this.gameStages[this.currentStageIndex];
+    if (fish.questionData) {
+      this.clickedFishData.push(fish.questionData);
+
+      console.log('Clicked fish count:', this.clickedFishData.length);
+
+      // 计算正确点击的次数
+      const correctClicks = this.clickedFishData.filter(data =>
+        data.audio === currentStage.correctQuestion.audio &&
+        data.image === currentStage.correctQuestion.image
+      ).length;
+
+      console.log('Correct clicks:', correctClicks);
+
+      // 如果有两个数据为当前Stage的正确数据，则清空画面，等待1秒后进入下一轮游戏
+      if (correctClicks >= 2) {
+        console.log('Stage completed! Moving to next stage...');
+
+        // 清空画面（清除所有鱼）
+        this.clearFishes();
+
+        // 增加当前阶段索引
+        this.currentStageIndex++;
+
+        // 等待1秒后进入下一轮游戏
+        setTimeout(() => {
+          this.initNextStage();
+        }, 1000);
       }
+    }
+  }
+
+
 
   aniOpacity(fish) {
     // 使用alphaItem创建平滑的透明度变化动画