feat(play): 为双人模式添加玩家时间显示功能

src/app/play/play.component.ts

@@ -162,6 +162,7 @@ export class PlayComponent implements OnInit, OnDestroy {
   g_EnableTestSendEvent = false // 发送模拟Web数据
   listItem: any;
   starElements: any;
+  starTimeLabels: any;
   // ------------------------------------
 
 
@@ -840,7 +841,7 @@ export class PlayComponent implements OnInit, OnDestroy {
     this.playerStartTime = Date.now();
     this.isGameStart = true;
     this.initCat();
-    
+
     // 根据游戏模式创建不同位置的星星
     if (this.g_formData.doubleModal) {
       // 双人模式：左侧和右侧各创建一组星星
@@ -850,7 +851,7 @@ export class PlayComponent implements OnInit, OnDestroy {
       // 单人模式：中间创建一组星星
       this.createStar('center');
     }
-    
+
     this.initFaYinBtn();
 
     this.updateCat();
@@ -861,6 +862,9 @@ export class PlayComponent implements OnInit, OnDestroy {
     this.cleanGameVar();
     // 左侧玩家结束，记录时间并切换到右侧玩家
     this.leftPlayerTime = playTime;
+    // 更新左侧玩家的最终时间显示
+    this.updateStarTime('left');
+
     this.currentStageIndex = 0;
     this.isGameStart = false;
     this.currentPlayer = 'right';
@@ -878,6 +882,8 @@ export class PlayComponent implements OnInit, OnDestroy {
         this.cat_right.ref.visible = true;
         this.updateCat();
         this.startNextQuestion();
+        // 重置右侧玩家的时间显示
+        this.updateStarTime('right');
       })
     })
   }
@@ -904,6 +910,10 @@ export class PlayComponent implements OnInit, OnDestroy {
     }
     // 右侧玩家结束，记录时间
     this.rightPlayerTime = playTime;
+    // 更新右侧玩家的最终时间显示
+    this.updateStarTime('right');
+
+    // 确定胜利方并显示鱼掉落动画
     let fishRainPosition = this.rightPlayerTime < this.leftPlayerTime ? 'right' : 'left';
     // 显示鱼掉落动画
     this.showFishRain(fishRainPosition);
@@ -1807,6 +1817,7 @@ export class PlayComponent implements OnInit, OnDestroy {
    * 根据题目数量创建星星标记区域
    * 背景使用star_bg
    * 前景将star_0和star_1渲染在同一个节点，未通过关卡显示star_0，通过后显示star_1
+   * 非center位置会额外显示时间（mm:ss格式）
    * @param position 星星位置，可选值：'center'(默认), 'left', 'right'
    */
   createStar(position = 'center') {
@@ -1838,21 +1849,23 @@ export class PlayComponent implements OnInit, OnDestroy {
     // 设置星星背景位置，根据position参数确定位置
     const bgWidth = originalBgWidth * finalScaleX;
     const bgHeight = localImagesSize['star_bg'].height * this.g_mapScale;
-    
+
     // 根据位置设置X坐标
     switch (position) {
       case 'left':
-        starBg.ref.x = bgWidth / 2 + 20 * this.g_mapScale; // 左侧位置
+        // 左侧位置，向左移动100像素，为时间显示留出空间
+        starBg.ref.x = bgWidth / 2 + 20 * this.g_mapScale - 100 * this.g_mapScale;
         break;
       case 'right':
-        starBg.ref.x = this.g_canvasWidth - bgWidth / 2 - 20 * this.g_mapScale; // 右侧位置
+        // 右侧位置，向左移动100像素，为时间显示留出空间
+        starBg.ref.x = this.g_canvasWidth - bgWidth / 2 - 20 * this.g_mapScale - 100 * 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像素
 
     // 渲染星星背景
@@ -1862,7 +1875,7 @@ export class PlayComponent implements OnInit, OnDestroy {
     if (!this.starElements) {
       this.starElements = {};
     }
-    
+
     // 为当前位置创建星星数组
     this.starElements[position] = [];
 
@@ -1886,12 +1899,41 @@ export class PlayComponent implements OnInit, OnDestroy {
       // 将星星元素添加到数组中，用于后续更新
       this.starElements[position].push(star);
     }
+
+    // 如果不是center位置，添加时间显示
+    if (position !== 'center') {
+      // 创建时间标签
+      const timeLabel = new Label();
+      timeLabel.fontSize = 30; // 设置字体大小
+      timeLabel.fontColor = '#FFFFFF'; // 设置字体颜色为白色
+      timeLabel.setOutline(3, '#000000'); // 设置黑色描边，增强可读性
+      timeLabel.text = '00:00'; // 初始时间显示
+
+      // 设置标签位置在星星的右侧
+      const lastStarIndex = stageCount - 1;
+      const lastStarX = startX + lastStarIndex * (starWidth + starSpacing);
+      timeLabel.x = lastStarX + starWidth / 2 + 50 * this.g_mapScale; // 最后一个星星右侧50像素
+      timeLabel.y = starBg.ref.y; // 与星星Y坐标相同
+
+      // 存储时间标签引用
+      if (!this.starTimeLabels) {
+        this.starTimeLabels = {};
+      }
+      this.starTimeLabels[position] = timeLabel;
+
+      // 渲染时间标签
+      this.render(timeLabel, zIndexMap.card + 12); // 层级比星星高
+
+      // 初始更新时间显示
+      this.updateStarTime(position);
+    }
   }
 
   /**
    * 更新星星状态
    * 根据当前关卡索引更新星星显示状态
    * 已完成关卡显示star_1，未完成关卡显示star_0
+   * 非center位置同时更新时间显示
    * @param position 星星位置，可选值：'center'(默认), 'left', 'right'
    */
   updateStar(position = 'center') {
@@ -1911,8 +1953,13 @@ export class PlayComponent implements OnInit, OnDestroy {
         star.ref.init(this.g_cartoon.images.get('star_0'));
       }
     }
+
+    // 如果不是center位置，同时更新时间显示
+    if (position !== 'center') {
+      this.updateStarTime(position);
+    }
   }
-  
+
   /**
    * 创建所有位置的星星
    * 在左中右三个位置创建星星
@@ -1922,7 +1969,7 @@ export class PlayComponent implements OnInit, OnDestroy {
     this.createStar('center');
     this.createStar('right');
   }
-  
+
   /**
    * 更新所有位置的星星
    * 更新左中右三个位置的星星状态
@@ -1933,6 +1980,49 @@ export class PlayComponent implements OnInit, OnDestroy {
     this.updateStar('right');
   }
 
+  /**
+   * 更新星星时间显示
+   * 根据当前玩家的游玩时间（当前时间与playerStartTime的差值）更新时间显示
+   * @param position 星星位置，可选值：'left', 'right'
+   */
+  updateStarTime(position) {
+    // 如果时间标签不存在或当前位置的时间标签不存在，则返回
+    if (!this.starTimeLabels || !this.starTimeLabels[position]) return;
+
+    // 获取当前时间
+    const currentTime = Date.now();
+
+    // 根据位置获取对应玩家的开始时间
+    let playerTime = 0;
+    if (position === 'left') {
+      // 左侧玩家时间 = 当前累计时间 + 当前回合时间
+      if (this.currentPlayer === 'left') {
+        playerTime = currentTime - this.playerStartTime
+      } else {
+        playerTime = this.leftPlayerTime
+      }
+    } else if (position === 'right') {
+      if (this.currentPlayer === 'right') {
+        playerTime = currentTime - this.playerStartTime
+      } else {
+        playerTime = this.rightPlayerTime
+      }
+    }
+
+    // 将毫秒转换为秒
+    const totalSeconds = Math.floor(playerTime / 1000);
+
+    // 计算分钟和秒
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+
+    // 格式化为mm:ss格式
+    const timeString = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+
+    // 更新时间标签文本
+    this.starTimeLabels[position].text = timeString;
+  }
+
 
 
   /**
@@ -2609,6 +2699,16 @@ export class PlayComponent implements OnInit, OnDestroy {
     this.updateArr(this.m_elementPetalArr);
     // 更新鱼的运动
     this.updateFish();
+
+    // 如果游戏已开始，更新时间显示
+    if (this.isGameStart && this.g_formData.doubleModal) {
+      // 根据当前玩家更新对应位置的时间显示
+      if (this.currentPlayer === 'left') {
+        this.updateStarTime('left');
+      } else {
+        this.updateStarTime('right');
+      }
+    }
   }
 
   /**