正确鱼完成

src/app/play/play.component.ts

@@ -86,7 +86,8 @@ const position: PositionMap = {
 
 const zIndexMap = {
   background: -1001,
-  card: 1000
+  card: 100,
+  cat: 500
 }
 
 @Component({
@@ -865,6 +866,27 @@ export class PlayComponent implements OnInit, OnDestroy {
     cat.ref.addChild(yu_xiang_zi.ref);
 
 
+    // 创建红水桶上的水花动画
+    const hong_shui_tong_shui_hua = this.g_cartoon.createCartoonElement('hong_shui_tong_shui_hua', 'MySprite');
+    hong_shui_tong_shui_hua.ref.init(this.g_cartoon.images.get('shui_di_dong_hua_1'));
+    hong_shui_tong_shui_hua.ref.scaleX = this.g_mapScale;
+    hong_shui_tong_shui_hua.ref.scaleY = this.g_mapScale;
+    hong_shui_tong_shui_hua.ref.x = -90 * this.g_mapScale;
+    hong_shui_tong_shui_hua.ref.y = -155 * this.g_mapScale; // 稍微调整位置，使水花显示在水桶上方
+    cat.ref.addChild(hong_shui_tong_shui_hua.ref);
+    hong_shui_tong_shui_hua.ref.visible = false; // 初始时隐藏水花
+
+    // 创建鱼箱子上的水花动画
+    const yu_xiang_zi_shui_hua = this.g_cartoon.createCartoonElement('yu_xiang_zi_shui_hua', 'MySprite');
+    yu_xiang_zi_shui_hua.ref.init(this.g_cartoon.images.get('shui_di_dong_hua_1'));
+    yu_xiang_zi_shui_hua.ref.scaleX = this.g_mapScale;
+    yu_xiang_zi_shui_hua.ref.scaleY = this.g_mapScale;
+    yu_xiang_zi_shui_hua.ref.x = 90 * this.g_mapScale;
+    yu_xiang_zi_shui_hua.ref.y = -145 * this.g_mapScale; // 稍微调整位置，使水花显示在鱼箱子上方
+    cat.ref.addChild(yu_xiang_zi_shui_hua.ref);
+    yu_xiang_zi_shui_hua.ref.visible = false; // 初始时隐藏水花
+
+
     // 创建橘猫坐着节点 - 放在船顶部中间
     const ju_mao_zuo_zhao = this.g_cartoon.createCartoonElement('ju_mao_zuo_zhao', 'MySprite');
     ju_mao_zuo_zhao.ref.init(this.g_cartoon.images.get('ju_mao_zuo_zhao'));
@@ -916,7 +938,7 @@ export class PlayComponent implements OnInit, OnDestroy {
     chuan.ref.y = -70 * this.g_mapScale;
     cat.ref.addChild(chuan.ref);
 
-    this.render(cat.ref, zIndexMap.card);
+    this.render(cat.ref, zIndexMap.cat);
     cat["child_gan"] = yu_gan;
     cat["child_tong_left"] = hong_shui_tong;
     cat["child_tong_right"] = yu_xiang_zi;
@@ -925,6 +947,8 @@ export class PlayComponent implements OnInit, OnDestroy {
     cat["child_mao_hui_zuo"] = hui_se_mao_zuo_zhao;
     cat["child_mao_hui_pa"] = hui_se_mao_pa_zhao;
     cat["child_chuan"] = chuan;
+    cat["child_tong_left_shui_hua"] = hong_shui_tong_shui_hua;
+    cat["child_tong_right_shui_hua"] = yu_xiang_zi_shui_hua;
     console.log('cat', cat)
 
     switch (type) {
@@ -1095,9 +1119,6 @@ export class PlayComponent implements OnInit, OnDestroy {
       // 创建飞向水桶的小鱼动画
       this.createFlyingFish(fish);
       this.brokePaopaoAni(fish);
-      this.saveFishRight(fish);
-
-      // 存储用户点击的鱼的数据
     } else {
       // 错误小鱼的处理逻辑
       // 播放错误音效
@@ -1136,7 +1157,37 @@ export class PlayComponent implements OnInit, OnDestroy {
     fish.speed = 0;
   }
 
-  saveFishRight(fish) {
+  /**
+   * 播放水花动画
+   * @param shuiHuaElement 水花元素
+   */
+  playShuiHuaAnimation(shuiHuaElement) {
+    // 显示水花元素
+    shuiHuaElement.ref.visible = true;
+
+    // 按顺序切换序列帧 shui_di_dong_hua_1 到 shui_di_dong_hua_11
+    let currentFrame = 1;
+    const maxFrame = 11;
+    const frameInterval = 100; // 每帧间隔时间，可以根据需要调整
+
+    const playNextFrame = () => {
+      if (currentFrame <= maxFrame) {
+        // 设置当前帧的图像
+        shuiHuaElement.ref.init(this.g_cartoon.images.get(`shui_di_dong_hua_${currentFrame}`));
+        currentFrame++;
+        // 设置下一帧的定时器
+        setTimeout(playNextFrame, frameInterval);
+      } else {
+        // 动画播放完成后隐藏水花元素
+        shuiHuaElement.ref.visible = false;
+      }
+    };
+
+    // 开始播放序列帧动画
+    playNextFrame();
+  }
+
+  saveFishSuccess(fish) {
     const currentStage = this.gameStages[this.currentStageIndex];
     if (fish.questionData) {
       this.clickedFishData.push(fish.questionData);
@@ -1240,6 +1291,13 @@ export class PlayComponent implements OnInit, OnDestroy {
         // 动画完成后移除临时小鱼
         this.m_renderArr = this.m_renderArr.filter(item => item !== tempFish.ref);
         tempFish.ref.visible = false;
+
+        // 播放鱼箱子水花动画
+        if (this.cat_center && this.cat_center['child_tong_right_shui_hua']) {
+          // 播放水桶水花动画
+          this.playShuiHuaAnimation(this.cat_center['child_tong_left_shui_hua']);
+        }
+        this.saveFishSuccess(fish);
       },
       TWEEN.Easing.Quadratic.Out // 使用缓动函数使动画更平滑
     );