feat(play): 支持双人模式下左右两侧的星星显示

src/app/play/play.component.ts

@@ -161,7 +161,7 @@ export class PlayComponent implements OnInit, OnDestroy {
   g_ForceChangeDefaultRole = true // 强制当前角色为默认角色
   g_EnableTestSendEvent = false // 发送模拟Web数据
   listItem: any;
-  starElements: any[];
+  starElements: any;
   // ------------------------------------
 
 
@@ -840,7 +840,17 @@ export class PlayComponent implements OnInit, OnDestroy {
     this.playerStartTime = Date.now();
     this.isGameStart = true;
     this.initCat();
-    this.initStar();
+    
+    // 根据游戏模式创建不同位置的星星
+    if (this.g_formData.doubleModal) {
+      // 双人模式：左侧和右侧各创建一组星星
+      this.createStar('left');
+      this.createStar('right');
+    } else {
+      // 单人模式：中间创建一组星星
+      this.createStar('center');
+    }
+    
     this.initFaYinBtn();
 
     this.updateCat();
@@ -911,8 +921,18 @@ export class PlayComponent implements OnInit, OnDestroy {
     // 清空之前点击的鱼的数据
     this.clickedFishData = [];
 
-    // 更新星星状态，显示已完成关卡的星星
-    this.updateStar();
+    // 根据游戏模式更新不同位置的星星状态
+    if (this.g_formData.doubleModal) {
+      // 双人模式：根据当前玩家更新对应位置的星星
+      if (this.currentPlayer === 'left') {
+        this.updateStar('left');
+      } else {
+        this.updateStar('right');
+      }
+    } else {
+      // 单人模式：更新中间位置的星星
+      this.updateStar('center');
+    }
 
     // 检查是否还有游戏阶段
     if (this.currentStageIndex >= this.gameStages.length) {
@@ -1787,8 +1807,9 @@ export class PlayComponent implements OnInit, OnDestroy {
    * 根据题目数量创建星星标记区域
    * 背景使用star_bg
    * 前景将star_0和star_1渲染在同一个节点，未通过关卡显示star_0，通过后显示star_1
+   * @param position 星星位置，可选值：'center'(默认), 'left', 'right'
    */
-  initStar() {
+  createStar(position = 'center') {
     // 获取题目数量
     const stageCount = this.gameStages.length;
     if (stageCount <= 0) return;
@@ -1802,7 +1823,7 @@ export class PlayComponent implements OnInit, OnDestroy {
     const minBgWidth = totalStarsWidth + 40 * this.g_mapScale; // 两侧各留20像素的边距
 
     // 创建星星背景
-    const starBg = this.g_cartoon.createCartoonElement('star_bg_element', 'MySprite');
+    const starBg = this.g_cartoon.createCartoonElement(`star_bg_element_${position}`, 'MySprite');
     starBg.ref.init(this.g_cartoon.images.get('star_bg'));
 
     // 计算背景需要的缩放比例，确保宽度足够
@@ -1814,26 +1835,45 @@ export class PlayComponent implements OnInit, OnDestroy {
     starBg.ref.scaleX = finalScaleX;
     starBg.ref.scaleY = this.g_mapScale;
 
-    // 设置星星背景位置在屏幕顶部中央
+    // 设置星星背景位置，根据position参数确定位置
     const bgWidth = originalBgWidth * finalScaleX;
     const bgHeight = localImagesSize['star_bg'].height * this.g_mapScale;
-    starBg.ref.x = this.g_canvasWidth / 2;
+    
+    // 根据位置设置X坐标
+    switch (position) {
+      case 'left':
+        starBg.ref.x = bgWidth / 2 + 20 * this.g_mapScale; // 左侧位置
+        break;
+      case 'right':
+        starBg.ref.x = this.g_canvasWidth - bgWidth / 2 - 20 * this.g_mapScale; // 右侧位置
+        break;
+      case 'center':
+      default:
+        starBg.ref.x = this.g_canvasWidth / 2; // 中央位置
+        break;
+    }
+    
     starBg.ref.y = bgHeight / 2 + 10 * this.g_mapScale; // 距离顶部10像素
 
     // 渲染星星背景
     this.render(starBg.ref, zIndexMap.card + 10);
 
-    // 存储星星元素的数组，用于后续更新
-    this.starElements = [];
+    // 存储星星元素的数组，如果不存在则初始化
+    if (!this.starElements) {
+      this.starElements = {};
+    }
+    
+    // 为当前位置创建星星数组
+    this.starElements[position] = [];
 
     // 使用前面计算好的星星宽度和总宽度
     // 计算第一个星星的X坐标，确保星星在背景上居中排列
-    const startX = this.g_canvasWidth / 2 - totalStarsWidth / 2 + starWidth / 2; // 第一个星星的X坐标
+    const startX = starBg.ref.x - totalStarsWidth / 2 + starWidth / 2; // 第一个星星的X坐标
 
     // 创建星星元素
     for (let i = 0; i < stageCount; i++) {
       // 创建未完成状态的星星
-      const star = this.g_cartoon.createCartoonElement(`star_${i}`, 'MySprite');
+      const star = this.g_cartoon.createCartoonElement(`star_${position}_${i}`, 'MySprite');
       star.ref.init(this.g_cartoon.images.get('star_0')); // 初始显示未完成状态
       star.ref.scaleX = this.g_mapScale;
       star.ref.scaleY = this.g_mapScale;
@@ -1844,7 +1884,7 @@ export class PlayComponent implements OnInit, OnDestroy {
       this.render(star.ref, zIndexMap.card + 11);
 
       // 将星星元素添加到数组中，用于后续更新
-      this.starElements.push(star);
+      this.starElements[position].push(star);
     }
   }
 
@@ -1852,13 +1892,15 @@ export class PlayComponent implements OnInit, OnDestroy {
    * 更新星星状态
    * 根据当前关卡索引更新星星显示状态
    * 已完成关卡显示star_1，未完成关卡显示star_0
+   * @param position 星星位置，可选值：'center'(默认), 'left', 'right'
    */
-  updateStar() {
-    if (!this.starElements || this.starElements.length === 0) return;
+  updateStar(position = 'center') {
+    // 检查指定位置的星星元素是否存在
+    if (!this.starElements || !this.starElements[position] || this.starElements[position].length === 0) return;
 
-    // 遍历所有星星元素
-    for (let i = 0; i < this.starElements.length; i++) {
-      const star = this.starElements[i];
+    // 遍历指定位置的所有星星元素
+    for (let i = 0; i < this.starElements[position].length; i++) {
+      const star = this.starElements[position][i];
 
       // 如果当前关卡索引大于星星索引，说明该关卡已完成
       if (this.currentStageIndex > i) {
@@ -1870,6 +1912,26 @@ export class PlayComponent implements OnInit, OnDestroy {
       }
     }
   }
+  
+  /**
+   * 创建所有位置的星星
+   * 在左中右三个位置创建星星
+   */
+  createAllStars() {
+    this.createStar('left');
+    this.createStar('center');
+    this.createStar('right');
+  }
+  
+  /**
+   * 更新所有位置的星星
+   * 更新左中右三个位置的星星状态
+   */
+  updateAllStars() {
+    this.updateStar('left');
+    this.updateStar('center');
+    this.updateStar('right');
+  }