feat(游戏界面): 添加星星标记功能显示关卡进度

src/app/play/play.component.ts

@@ -160,6 +160,7 @@ export class PlayComponent implements OnInit, OnDestroy {
   g_ForceChangeDefaultRole = true // 强制当前角色为默认角色
   g_EnableTestSendEvent = false // 发送模拟Web数据
   listItem: any;
+  starElements: any[];
   // ------------------------------------
 
 
@@ -237,7 +238,7 @@ export class PlayComponent implements OnInit, OnDestroy {
     // 创建倒计时数字元素
     const countdownElements = ['dao_ji_shi_3', 'dao_ji_shi_2', 'dao_ji_shi_1'];
 
-    // 根据type计算x坐标的偏移量
+    // 根据type计算x坐标的偏移量 
     const xOffset = type === 'left' ? 140 : -190;
 
     countdownElements.forEach(elementName => {
@@ -438,18 +439,18 @@ export class PlayComponent implements OnInit, OnDestroy {
     // 初始化游戏背景
     this.initBackground()
 
-    // this.initListPage();
+    this.initListPage();
 
     // 显示321倒计时动画，传递'left'参数表示左侧猫开始玩
     // this.show321('left');
 
     // 注释掉直接显示VS动画的代码，因为现在由show321函数在倒计时结束后调用
-    this.showVsAni('right');
+    // this.showVsAni('right');
 
-    // this.initFishGame();
+    this.initFishGame();
 
     // 初始化发音按钮
-    // this.initFaYinBtn();
+    this.initFaYinBtn();
     // 初始化退出按钮
     // this.initBtnBack();
     // // 初始化标题
@@ -918,8 +919,100 @@ export class PlayComponent implements OnInit, OnDestroy {
       this.cat_center = this.createCat('center'); // 创建中间猫
     }
 
+    this.initStar();
+
     this.initNextStage();
   }
+  /**
+   * 初始化星星标记区域
+   * 根据题目数量创建星星标记区域
+   * 背景使用star_bg
+   * 前景将star_0和star_1渲染在同一个节点，未通过关卡显示star_0，通过后显示star_1
+   */
+  initStar() {
+    // 获取题目数量
+    const stageCount = this.gameStages.length;
+    if (stageCount <= 0) return;
+    
+    // 计算星星之间的间距和所需的总宽度
+    const starWidth = localImagesSize['star_0'].width * this.g_mapScale;
+    const starSpacing = 10 * this.g_mapScale; // 星星之间的间距
+    const totalStarsWidth = stageCount * starWidth + (stageCount - 1) * starSpacing; // 星星总宽度加上间距
+    
+    // 计算背景所需的最小宽度，确保能容纳所有星星并留有边距
+    const minBgWidth = totalStarsWidth + 40 * this.g_mapScale; // 两侧各留20像素的边距
+    
+    // 创建星星背景
+    const starBg = this.g_cartoon.createCartoonElement('star_bg_element', 'MySprite');
+    starBg.ref.init(this.g_cartoon.images.get('star_bg'));
+    
+    // 计算背景需要的缩放比例，确保宽度足够
+    const originalBgWidth = localImagesSize['star_bg'].width;
+    const widthScaleFactor = minBgWidth / (originalBgWidth * this.g_mapScale);
+    const finalScaleX = this.g_mapScale * Math.max(1, widthScaleFactor); // 确保不会缩小背景
+    
+    // 设置背景缩放
+    starBg.ref.scaleX = finalScaleX;
+    starBg.ref.scaleY = this.g_mapScale;
+    
+    // 设置星星背景位置在屏幕顶部中央
+    const bgWidth = originalBgWidth * finalScaleX;
+    const bgHeight = localImagesSize['star_bg'].height * this.g_mapScale;
+    starBg.ref.x = this.g_canvasWidth / 2;
+    starBg.ref.y = bgHeight / 2 + 10 * this.g_mapScale; // 距离顶部10像素
+    
+    // 渲染星星背景
+    this.render(starBg.ref, zIndexMap.card + 10);
+    
+    // 存储星星元素的数组，用于后续更新
+    this.starElements = [];
+    
+    // 使用前面计算好的星星宽度和总宽度
+    // 计算第一个星星的X坐标，确保星星在背景上居中排列
+    const startX = this.g_canvasWidth / 2 - totalStarsWidth / 2 + starWidth / 2; // 第一个星星的X坐标
+    
+    // 创建星星元素
+    for (let i = 0; i < stageCount; i++) {
+      // 创建未完成状态的星星
+      const star = this.g_cartoon.createCartoonElement(`star_${i}`, 'MySprite');
+      star.ref.init(this.g_cartoon.images.get('star_0')); // 初始显示未完成状态
+      star.ref.scaleX = this.g_mapScale;
+      star.ref.scaleY = this.g_mapScale;
+      star.ref.x = startX + i * (starWidth + starSpacing); // 星星X坐标，使用前面定义的间距
+      star.ref.y = starBg.ref.y; // 与背景Y坐标相同
+      
+      // 渲染星星，层级比背景高
+      this.render(star.ref, zIndexMap.card + 11);
+      
+      // 将星星元素添加到数组中，用于后续更新
+      this.starElements.push(star);
+    }
+  }
+  
+  /**
+   * 更新星星状态
+   * 根据当前关卡索引更新星星显示状态
+   * 已完成关卡显示star_1，未完成关卡显示star_0
+   */
+  updateStar() {
+    if (!this.starElements || this.starElements.length === 0) return;
+    
+    // 遍历所有星星元素
+    for (let i = 0; i < this.starElements.length; i++) {
+      const star = this.starElements[i];
+      
+      // 如果当前关卡索引大于星星索引，说明该关卡已完成
+      if (this.currentStageIndex > i) {
+        // 更新为完成状态
+        star.ref.init(this.g_cartoon.images.get('star_1'));
+      } else {
+        // 更新为未完成状态
+        star.ref.init(this.g_cartoon.images.get('star_0'));
+      }
+    }
+  }
+
+
   // 当前游戏阶段索引
   private currentStageIndex = 0;
   // 存储用户点击的鱼的数据
@@ -935,6 +1028,9 @@ export class PlayComponent implements OnInit, OnDestroy {
     // 清空之前点击的鱼的数据
     this.clickedFishData = [];
 
+    // 更新星星状态，显示已完成关卡的星星
+    this.updateStar();
+
     // 检查是否还有游戏阶段
     if (this.currentStageIndex >= this.gameStages.length) {
       // 所有阶段都完成了，结束游戏

src/app/play/resources.js

@@ -4,6 +4,11 @@
  */
 const localImages = {
   // Game directory images
+  'star_0': 'assets/game/star_0.png',
+  'star_1': 'assets/game/star_1.png',
+  'star_bg_double': 'assets/game/star_bg_double.png',
+  'star_bg': 'assets/game/star_bg.png',
+
   'bei_jing___jiao_shi': 'assets/game/bei_jing___jiao_shi.png',
   'bei_jing': 'assets/game/bei_jing.jpg',
   'chuan': 'assets/game/chuan.png',
@@ -115,34 +120,6 @@ const localAudios = {
   'sm-win': 'assets/default/audio/sm-win.mp3',
   'sm-wrong': 'assets/default/audio/sm-wrong.mp3',
   'star-audio': 'assets/default/audio/star.mp3',
-
-  // Letter audio files
-  'letter_a': 'assets/all-letters/letter-audios/a.mp3',
-  'letter_b': 'assets/all-letters/letter-audios/b.mp3',
-  'letter_c': 'assets/all-letters/letter-audios/c.mp3',
-  'letter_d': 'assets/all-letters/letter-audios/d.mp3',
-  'letter_e': 'assets/all-letters/letter-audios/e.mp3',
-  'letter_f': 'assets/all-letters/letter-audios/f.mp3',
-  'letter_g': 'assets/all-letters/letter-audios/g.mp3',
-  'letter_h': 'assets/all-letters/letter-audios/h.mp3',
-  'letter_i': 'assets/all-letters/letter-audios/i.mp3',
-  'letter_j': 'assets/all-letters/letter-audios/j.mp3',
-  'letter_k': 'assets/all-letters/letter-audios/k.mp3',
-  'letter_l': 'assets/all-letters/letter-audios/l.mp3',
-  'letter_m': 'assets/all-letters/letter-audios/m.mp3',
-  'letter_n': 'assets/all-letters/letter-audios/n.mp3',
-  'letter_o': 'assets/all-letters/letter-audios/o.mp3',
-  'letter_p': 'assets/all-letters/letter-audios/p.mp3',
-  'letter_q': 'assets/all-letters/letter-audios/q.mp3',
-  'letter_r': 'assets/all-letters/letter-audios/r.mp3',
-  'letter_s': 'assets/all-letters/letter-audios/s.mp3',
-  'letter_t': 'assets/all-letters/letter-audios/t.mp3',
-  'letter_u': 'assets/all-letters/letter-audios/u.mp3',
-  'letter_v': 'assets/all-letters/letter-audios/v.mp3',
-  'letter_w': 'assets/all-letters/letter-audios/w.mp3',
-  'letter_x': 'assets/all-letters/letter-audios/x.mp3',
-  'letter_y': 'assets/all-letters/letter-audios/y.mp3',
-  'letter_z': 'assets/all-letters/letter-audios/z.mp3'
 };
 
 // 图片尺寸信息对象，存储每个图片的宽度和高度
@@ -177,6 +154,11 @@ const localImagesSize = {
   'yu_gan': { width: 25, height: 188 },
   'yu_xiang_zi': { width: 67, height: 53 },
 
+  'star_0': { width: 29, height: 27 },
+  'star_1': { width: 29, height: 27 },
+  'star_bg_double': { width: 308, height: 40 },
+  'star_bg': { width: 228, height: 40 },
+
   // VS动画
   'dao_ji_shi_1': { width: 163 * 0.6, height: 242 * 0.6 },
   'dao_ji_shi_2': { width: 163 * 0.6, height: 242 * 0.6 },