feat(游戏逻辑): 添加倒计时音效并重构游戏初始化流程

src/app/play/play.component.ts

@@ -297,9 +297,12 @@ export class PlayComponent implements OnInit, OnDestroy {
 
     // 依次显示3、2、1的倒计时动画
     // 先显示3
+    this.g_cartoon.playAudio('time_3');
     this.showCountdownNumber('dao_ji_shi_3', config, () => {
+      this.g_cartoon.playAudio('time_2');
       // 显示完3后显示2
       this.showCountdownNumber('dao_ji_shi_2', config, () => {
+        this.g_cartoon.playAudio('time_1');
         // 显示完2后显示1
         this.showCountdownNumber('dao_ji_shi_1', config, () => {
           // 倒计时结束后的操作，等待一段时间后显示VS动画
@@ -307,6 +310,8 @@ export class PlayComponent implements OnInit, OnDestroy {
             // this.showVsAni(type);
             this.hideVsElements();
             this.hide321Elements();
+
+            this.startBattle();
           }, config.time.afterComplete * 1000);
         });
       });
@@ -440,32 +445,6 @@ export class PlayComponent implements OnInit, OnDestroy {
     this.initBackground()
 
     this.initListPage();
-
-    // 显示321倒计时动画，传递'left'参数表示左侧猫开始玩
-    // this.show321('left');
-
-    // 注释掉直接显示VS动画的代码，因为现在由show321函数在倒计时结束后调用
-    // this.showVsAni('right');
-
-    this.initFishGame();
-
-    // 初始化发音按钮
-    this.initFaYinBtn();
-    // 初始化退出按钮
-    // this.initBtnBack();
-    // // 初始化标题
-    // this.initTitle();
-    // const partXList = this.g_formData.type == 0 ? [300 * this.g_mapScale, 700 * this.g_mapScale, 1100 * this.g_mapScale] : [700 * this.g_mapScale, 300 * this.g_mapScale, 1100 * this.g_mapScale];
-    // // 初始化第一部分内容（字母块）
-    // this.initPart1(partXList[0]);
-    // // 初始化第二部分内容（字母块）
-    // this.initPart2(partXList[1]);
-    // // 初始化第三部分内容（字母块）
-    // this.initPart3(partXList[2]);
-    // // 初始化文字
-    // this.initWords();
-    // // 初始化连接线
-    // this.drawConnectionLines();
   }
 
   /**
@@ -492,10 +471,10 @@ export class PlayComponent implements OnInit, OnDestroy {
     this.m_gameOver = true;
     // 延迟500毫秒后执行结束动画
     setTimeout(() => {
-      // 显示花瓣效果
-      this.showCorrectPatal("card", 5000)
-      // 播放结束音效
-      this.g_cartoon.playAudio("success")
+      // // 显示花瓣效果
+      // this.showCorrectPatal("card", 5000)
+      // // 播放结束音效
+      // this.g_cartoon.playAudio("success")
     }, 500)
   }
 
@@ -580,6 +559,8 @@ export class PlayComponent implements OnInit, OnDestroy {
   toggleItemSelection(itemNode, dataIndex) {
     if (!this.layoutPage.ref.visible) return;
 
+    this.g_cartoon.playAudio('click_pic')
+
     const isSelected = itemNode.ref.isSelected || false;
     const selectMark = itemNode.ref.selectMark;
 
@@ -678,8 +659,7 @@ export class PlayComponent implements OnInit, OnDestroy {
         this.layoutPage.ref.visible = false;
         this.checkBtnElement.ref.visible = false;
         this.listItem.ref.visible = false;
-        this.initFishGame();
-        // 这里可以添加开始游戏的具体逻辑
+        this.initBattle();
       } else {
         // 提示需要选择更多单词
         console.log('请至少选择2个单词');
@@ -883,6 +863,22 @@ export class PlayComponent implements OnInit, OnDestroy {
   }
 
 
+  initBattle() {
+    this.g_enableMapDown = true;
+    if (this.g_formData.doubleModal) {
+      this.showVsAni('left');
+      // this.showVsAni('right');
+    } else {
+      this.startBattle();
+    }
+  }
+  startBattle() {
+    // 初始化鱼游戏
+    this.initFishGame();
+    // 初始化发音按钮
+    this.initFaYinBtn();
+  }
+
   /**
    * 初始化鱼游戏
    */
@@ -890,7 +886,8 @@ export class PlayComponent implements OnInit, OnDestroy {
   private cat_right: any;
   private cat_center: any;
   initFishGame() {
-    const targetList = [0, 1, 2, 3, 4, 5, 6];
+    console.log("this.selectList", this.selectList);
+    const targetList = this.selectList.concat();
     const questions = this.g_formData.questions;
 
     // 1. 梳理出选中的数据数组
@@ -933,44 +930,44 @@ export class PlayComponent implements OnInit, OnDestroy {
     // 获取题目数量
     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++) {
       // 创建未完成状态的星星
@@ -980,15 +977,15 @@ export class PlayComponent implements OnInit, OnDestroy {
       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);
     }
   }
-  
+
   /**
    * 更新星星状态
    * 根据当前关卡索引更新星星显示状态
@@ -996,11 +993,11 @@ export class PlayComponent implements OnInit, OnDestroy {
    */
   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) {
         // 更新为完成状态
@@ -1223,6 +1220,7 @@ export class PlayComponent implements OnInit, OnDestroy {
       moveItem(s_element, this.g_canvasWidth / 2 + config.vs.s.offsetX * this.g_mapScale, s_element.y, config.vs.s.moveTime, () => {
         // VS元素移动完成后，调用showVsShadow函数创建阴影效果
         this.showVsShadow();
+        this.g_cartoon.playAudio('vs');
       });
       setTimeout(() => {
         // 隐藏VS元素
@@ -1661,6 +1659,7 @@ export class PlayComponent implements OnInit, OnDestroy {
     return fish;
   }
   brokePaopaoAni(fish) {
+    // this.g_cartoon.playAudio('pop_bomb');
     // 对于正确的鱼，显示泡泡破裂动画
     // 按顺序切换序列帧 pao_pao_xu_lie_zhen_1 到 pao_pao_xu_lie_zhen_9
     let currentFrame = 1;
@@ -1690,6 +1689,7 @@ export class PlayComponent implements OnInit, OnDestroy {
    * @param shuiHuaElement 水花元素
    */
   playShuiHuaAnimation(shuiHuaElement) {
+    this.g_cartoon.playAudio('fish_down');
     // 显示水花元素
     shuiHuaElement.ref.visible = true;
 

src/app/play/resources.js

@@ -100,14 +100,14 @@ const localAudios = {
   'bg_sometime': 'assets/audio/bg_sometime.mp3',
   'click_pic': 'assets/audio/click_pic.mp3',
   'click_wrong': 'assets/audio/click_wrong.mp3',
-  'fish_down': 'assets/audio/fish_down.mp3',
-  'fish_many_down': 'assets/audio/fish_many_down.mp3',
   'pop_bomb': 'assets/audio/pop_bomb.mp3',
+  'fish_down': 'assets/audio/fish_down.mp3',
   'time_1': 'assets/audio/time_1.mp3',
   'time_2': 'assets/audio/time_2.mp3',
   'time_3': 'assets/audio/time_3.mp3',
   'vs': 'assets/audio/vs.mp3',
   'vs2': 'assets/audio/vs2.mp3',
+  'fish_many_down': 'assets/audio/fish_many_down.mp3',
 
   // Default audio files
   'sm-back': 'assets/default/audio/sm-back.mp3',