feat(play): 添加鱼群动画效果

src/app/play/play.component.ts

@@ -1388,6 +1388,11 @@ export class PlayComponent implements OnInit, OnDestroy {
   }
 
 
+  // 鱼群管理数组
+  private m_fishArray = [];
+  private m_lastFishTime = 0;
+  private m_fishInterval = 3000; // 每隔10秒生成一条新鱼
+  
   /**
    * 更新游戏画面
    * 负责清除画布、更新动画和渲染所有元素
@@ -1405,6 +1410,70 @@ export class PlayComponent implements OnInit, OnDestroy {
     this.updateArr(this.m_endPageArr);
     // 更新元素花瓣效果数组中的所有元素
     this.updateArr(this.m_elementPetalArr);
+    // 更新鱼的运动
+    this.updateFish();
+  }
+  
+  /**
+   * 更新鱼的运动
+   * 管理鱼从右侧游到左侧的动画效果
+   */
+  updateFish() {
+    // 检查是否需要创建新的鱼
+    const currentTime = Date.now();
+    if (currentTime - this.m_lastFishTime > this.m_fishInterval) {
+      // 创建新的鱼
+      if (this.g_formData && this.g_formData.questions && this.g_formData.questions.length > 0) {
+        // 随机选择一个问题数据
+        const randomIndex = Math.floor(Math.random() * this.g_formData.questions.length);
+        const fishData = this.g_formData.questions[randomIndex];
+        
+        // 创建小型鱼
+        const fish = this.createFish('small', fishData);
+        
+        // 设置鱼的初始位置在屏幕右侧外部
+        fish.ref.x = this.g_canvasWidth + fish.ref.width * fish.ref.scaleX / 2;
+        fish.ref.y = Math.random() * (this.g_canvasHeight * 0.6) + this.g_canvasHeight * 0.2; // 在屏幕中间区域随机高度
+        
+        // 设置鱼的游动速度
+        fish.speed = 0.3; // 0.5-1.5的随机速度，降低游动速度
+        
+        // 确保鱼已添加到渲染队列中
+        // createFish 方法中已经调用了 render 方法，但为了确保，这里再次检查
+        const existsInRenderObject = this.m_renderObject.some(item => item.element === fish.ref);
+        if (!existsInRenderObject) {
+          this.render(fish.ref, 1000); // 使用 zIndexMap.card 的值 1000
+        }
+        
+        // 将鱼添加到管理数组
+        this.m_fishArray.push(fish);
+        
+        // 更新最后创建鱼的时间
+        this.m_lastFishTime = currentTime;
+      }
+    }
+    
+    // 更新所有鱼的位置
+    for (let i = this.m_fishArray.length - 1; i >= 0; i--) {
+      const fish = this.m_fishArray[i];
+      
+      // 向左移动鱼
+      fish.ref.x -= fish.speed;
+      
+      // 如果鱼游出了屏幕左侧，从数组中移除
+      if (fish.ref.x < -fish.ref.width * fish.ref.scaleX / 2) {
+        // 从渲染对象数组中移除
+        this.m_renderObject = this.m_renderObject.filter(item => item.element !== fish.ref);
+        // 重新构建渲染数组
+        this.m_renderArr = [];
+        this.m_renderObject.forEach(item => {
+          this.m_renderArr.push(item.element);
+        });
+        
+        // 从鱼群数组中移除
+        this.m_fishArray.splice(i, 1);
+      }
+    }
   }