feat(play): 添加教室底部背景并优化小鱼飞行动画

src/app/play/play.component.ts

@@ -344,6 +344,24 @@ export class PlayComponent implements OnInit, OnDestroy {
 
     // 渲染背景元素
     this.render(element.ref, zIndexMap.background)
+
+    // 创建教室底部背景元素
+    var jiaoshiElement = this.g_cartoon.createCartoonElement(`background_jiaoshi`, "MySprite")
+    // 初始化教室底部背景图像
+    jiaoshiElement.ref.init(this.g_cartoon.images.get("bei_jing___jiao_shi"));
+
+    // 设置教室底部背景的缩放比例，保持与主背景一致
+    jiaoshiElement.ref.scaleX = this.g_mapScale;
+    jiaoshiElement.ref.scaleY = this.g_mapScale;
+
+    // 设置教室底部背景的X坐标位置（居中）
+    jiaoshiElement.ref.x = this.g_canvasWidth / 2;
+    // 设置教室底部背景的Y坐标位置（底部对齐）
+    // 图片高度为173，将其底边与屏幕底边对齐
+    jiaoshiElement.ref.y = this.g_canvasHeight - (jiaoshiElement.ref.height * this.g_mapScale / 2);
+
+    // 渲染教室底部背景元素，层级略高于主背景
+    this.render(jiaoshiElement.ref, zIndexMap.background + 1)
   }
 
   /**
@@ -992,7 +1010,7 @@ export class PlayComponent implements OnInit, OnDestroy {
 
     return fish;
   }
-  
+
   /**
    * 创建临时小鱼并飞向水桶
    * @param fish 原始鱼对象
@@ -1002,37 +1020,37 @@ export class PlayComponent implements OnInit, OnDestroy {
     const xiao_yu = fish['child_xiao_yu'];
     const fishGlobalX = fish.ref.x + xiao_yu.ref.x;
     const fishGlobalY = fish.ref.y + xiao_yu.ref.y;
-    
+
     // 2. 创建一个临时小鱼
     const tempFishId = `temp_fish_${Math.floor(Math.random() * 1000)}_${Date.now()}`;
     const tempFish = this.g_cartoon.createCartoonElement(tempFishId, 'MySprite');
-    
+
     // 使用与原小鱼相同的图像
     tempFish.ref.init(xiao_yu.ref.img);
     tempFish.ref.scaleX = xiao_yu.ref.scaleX;
     tempFish.ref.scaleY = xiao_yu.ref.scaleY;
-    
+
     // 设置临时小鱼的全局位置
     tempFish.ref.x = fishGlobalX;
     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;
-    
+
     // 将临时小鱼添加到舞台
     this.render(tempFish.ref, zIndexMap.card + 1);
-    
+
     // 4. 创建小鱼飞向水桶的动画
     tweenChange(
-      tempFish.ref, 
-      { 
-        x: tongGlobalX, 
+      tempFish.ref,
+      {
+        x: tongGlobalX,
         y: tongGlobalY,
         scaleX: tempFish.ref.scaleX * 0.5, // 飞行过程中缩小
         scaleY: tempFish.ref.scaleY * 0.5
-      }, 
+      },
       0.8, // 动画时间
       () => {
         // 动画完成后移除临时小鱼

流程.md

+1. 显示大图片表示：在前端显示“3个图”这种 显示小图片表示：在前端显示“4个图”这种
+2. 选择的图片组成题数。
+3. 鱼出现的数组在本局开始的时候就生成好， 后续的出现鱼的顺序按照这个流程来。【鱼数量上限为5，主角鱼+1】
+4. 点击鱼  正确  播放音频
+5. 本局开始  播放音频
+6. 
+   
+
+
+
+双组模式
+1. 两边的题一致（复用）
+2. 鱼数组不同 （打乱）
+3. VS动画。
+4. 左侧倒计时动画
+5. 右侧倒计时动画
+6. 休息状态的猫
+7. 胜利动画
+8. 统计胜利时间