feat(游戏组件): 添加发音按钮并优化游戏阶段逻辑

src/app/play/interfaces.ts

@@ -47,12 +47,6 @@ export interface FormData {
   questions: Question[];
   /** 类型 */
   type?: number;
-  /** 第一部分数据 */
-  part_1?: any[];
-  /** 第二部分数据 */
-  part_2?: any[];
-  /** 第三部分数据 */
-  part_3?: any[];
   /** 数据数组（兼容旧版数据结构） */
   dataArray?: any[];
 }

src/app/play/play.component.ts

@@ -268,6 +268,9 @@ export class PlayComponent implements OnInit, OnDestroy {
     this.initListPage();
 
     this.initFishGame();
+
+    // 初始化发音按钮
+    this.initFaYinBtn();
     // 初始化退出按钮
     // this.initBtnBack();
     // // 初始化标题
@@ -484,6 +487,7 @@ export class PlayComponent implements OnInit, OnDestroy {
 
     // 添加点击事件
     this.m_mapDownQueue['check_btn'] = () => {
+      if (!this.layoutPage.ref.visible) return
       // 播放点击音效
       this.g_cartoon.playAudio('sm-click');
 
@@ -710,18 +714,18 @@ export class PlayComponent implements OnInit, OnDestroy {
 
     // 1. 梳理出选中的数据数组
     const selectedQuestions = targetList.map(index => questions[index]).filter(q => q); // 过滤掉可能的undefined值
-    
+
     // 2. 根据梳理好的数组创建多个Stage
-     this.gameStages = []; // 清空之前的游戏阶段
-     selectedQuestions.forEach(currentQuestion => {
-       // 为每个选中的值创建一个Stage对象
-       // 正确值为当前值，列表值为整个梳理后的列表
-       const stage = new Stage(currentQuestion, selectedQuestions);
-       this.gameStages.push(stage);
-     });
-     
-     // 打印创建的Stage对象，用于调试
-     console.log('Created Stages:', this.gameStages);
+    this.gameStages = []; // 清空之前的游戏阶段
+    selectedQuestions.forEach(currentQuestion => {
+      // 为每个选中的值创建一个Stage对象
+      // 正确值为当前值，列表值为整个梳理后的列表
+      const stage = new Stage(currentQuestion, selectedQuestions);
+      this.gameStages.push(stage);
+    });
+
+    // 打印创建的Stage对象，用于调试
+    console.log('Created Stages:', this.gameStages);
 
     this.layoutPage.ref.visible = false;
     this.checkBtnElement.ref.visible = false;
@@ -740,7 +744,7 @@ export class PlayComponent implements OnInit, OnDestroy {
   private currentStageIndex = 0;
   // 存储用户点击的鱼的数据
   private clickedFishData: Question[] = [];
-  
+
   /**
    * 初始化下一个游戏阶段
    * 1. 将当前Stage中的数组随机一次
@@ -750,29 +754,34 @@ export class PlayComponent implements OnInit, OnDestroy {
   initNextStage() {
     // 清空之前点击的鱼的数据
     this.clickedFishData = [];
-    
+
     // 检查是否还有游戏阶段
     if (this.currentStageIndex >= this.gameStages.length) {
       // 所有阶段都完成了，结束游戏
       this.endGame();
       return;
     }
-    
+
     // 获取当前游戏阶段
     const currentStage = this.gameStages[this.currentStageIndex];
-    
+
     // 将当前Stage中的数组随机一次
     currentStage.randomList();
-    
+
     console.log('Current Stage:', currentStage);
     console.log('Random List:', currentStage.questionRandomList);
-    
+
     // 清空现有的鱼群
     this.clearFishes();
-    
+
     // 修改鱼的生成逻辑，使用当前阶段的随机问题列表
     this.m_fishInterval = 3000; // 设置鱼的生成间隔为3秒
     this.m_lastFishTime = 0; // 重置上次生成鱼的时间，使下一帧立即生成鱼
+    
+    // 每一个stage开始的时候播放一次正确问题的音频
+    if (currentStage.correctQuestion && currentStage.correctQuestion.audio) {
+      this.g_cartoon.playAudio(currentStage.correctQuestion.audio);
+    }
   }
 
   initVsView() {
@@ -1066,47 +1075,47 @@ export class PlayComponent implements OnInit, OnDestroy {
 
     // 创建飞向水桶的小鱼动画
     this.createFlyingFish(fish);
-    
+
     // 获取当前游戏阶段
     const currentStage = this.gameStages[this.currentStageIndex];
-    
+
     // 存储用户点击的鱼的数据
     if (fish.questionData) {
       this.clickedFishData.push(fish.questionData);
-      
+
       // 检查是否点击了正确的鱼
-      const isCorrect = fish.questionData.audio === currentStage.correctQuestion.audio && 
-                        fish.questionData.image === currentStage.correctQuestion.image;
-      
+      const isCorrect = fish.questionData.audio === currentStage.correctQuestion.audio &&
+        fish.questionData.image === currentStage.correctQuestion.image;
+
       console.log('Clicked fish data:', fish.questionData);
       console.log('Is correct:', isCorrect);
       console.log('Clicked fish count:', this.clickedFishData.length);
-      
+
       // 计算正确点击的次数
-      const correctClicks = this.clickedFishData.filter(data => 
-        data.audio === currentStage.correctQuestion.audio && 
+      const correctClicks = this.clickedFishData.filter(data =>
+        data.audio === currentStage.correctQuestion.audio &&
         data.image === currentStage.correctQuestion.image
       ).length;
-      
+
       console.log('Correct clicks:', correctClicks);
-      
+
       // 如果有两个数据为当前Stage的正确数据，则清空画面，等待1秒后进入下一轮游戏
       if (correctClicks >= 2) {
         console.log('Stage completed! Moving to next stage...');
-        
+
         // 清空画面（清除所有鱼）
         this.clearFishes();
-        
+
         // 增加当前阶段索引
         this.currentStageIndex++;
-        
+
         // 等待1秒后进入下一轮游戏
         setTimeout(() => {
           this.initNextStage();
         }, 1000);
       }
     }
-    
+
     // 按顺序切换序列帧 pao_pao_xu_lie_zhen_1 到 pao_pao_xu_lie_zhen_9
     let currentFrame = 1;
     const maxFrame = 9;
@@ -1181,6 +1190,44 @@ export class PlayComponent implements OnInit, OnDestroy {
 
 
 
+  /**
+   * 初始化发音按钮
+   * 创建发音按钮并放置在右下角
+   */
+  initFaYinBtn() {
+    // 创建发音按钮元素
+    const faYinBtn = this.g_cartoon.createCartoonElement('fa_yin_btn', 'MySprite');
+    // 初始化按钮图像，使用resources.js中的fa_yin资源
+    faYinBtn.ref.init(this.g_cartoon.images.get('fa_yin'));
+
+    // 设置按钮X方向和Y方向的缩放比例
+    faYinBtn.ref.scaleX = this.g_mapScale;
+    faYinBtn.ref.scaleY = this.g_mapScale;
+
+    // 获取按钮尺寸信息
+    const buttonWidth = 91 * this.g_mapScale; // fa_yin的宽度是91
+    const buttonHeight = 94 * this.g_mapScale; // fa_yin的高度是94
+
+    // 设置按钮位置 - 屏幕右下角
+    faYinBtn.ref.x = this.g_canvasWidth - buttonWidth / 2 - 50 * this.g_mapScale; // 距离右边50像素
+    faYinBtn.ref.y = this.g_canvasHeight - buttonHeight / 2 - 50 * this.g_mapScale; // 距离底部150像素，避免与其他按钮重叠
+
+    // 渲染按钮元素（使用较高的zIndex确保按钮显示在上层）
+    this.render(faYinBtn.ref, zIndexMap.card + 3);
+
+    // 为发音按钮添加点击事件
+    this.m_mapDownQueue['fa_yin_btn'] = () => {
+      this.g_enableMapDown = true;
+      // 如果当前有游戏阶段且有正确问题，播放其音频
+      const currentStage = this.gameStages[this.currentStageIndex];
+      console.log("btn_fa_yin", currentStage)
+      if (currentStage && currentStage.correctQuestion && currentStage.correctQuestion.audio) {
+        // 播放当前正确问题的音频
+        this.g_cartoon.playAudio(currentStage.correctQuestion.audio);
+      }
+    };
+  }
+
   /**
    * 初始化退出按钮
    * 创建退出按钮并放置在标题背景的最左侧
@@ -1456,33 +1503,11 @@ export class PlayComponent implements OnInit, OnDestroy {
       return;
     }
 
-    // 添加字母音频资源
-    // 处理part_1数据中的音频
-    if (contentObj.part_1 && contentObj.part_1.length > 0) {
-      contentObj.part_1.forEach(item => {
-        if (item.audio) {
-          this.g_cartoon.addAudio(item.audio, item.audio);
-        }
-      });
-    }
-
-    // 处理part_2数据中的音频
-    if (contentObj.part_2 && contentObj.part_2.length > 0) {
-      contentObj.part_2.forEach(item => {
-        if (item.audio) {
-          this.g_cartoon.addAudio(item.audio, item.audio);
-        }
-      });
-    }
-
-    // 处理part_3数据中的音频
-    if (contentObj.part_3 && contentObj.part_3.length > 0) {
-      contentObj.part_3.forEach(item => {
-        if (item.audio) {
-          this.g_cartoon.addAudio(item.audio, item.audio);
-        }
-      });
-    }
+    contentObj.questions.forEach(question => {
+      if (question.audio) {
+        this.g_cartoon.addAudio(question.audio, question.audio);
+      }
+    })
 
     // 兼容旧版数据结构
     const arr = contentObj.dataArray;
@@ -1627,17 +1652,17 @@ export class PlayComponent implements OnInit, OnDestroy {
       // 从渲染对象数组中移除
       this.m_renderObject = this.m_renderObject.filter(item => item.element !== fish.ref);
     }
-    
+
     // 重新构建渲染数组
     this.m_renderArr = [];
     this.m_renderObject.forEach(item => {
       this.m_renderArr.push(item.element);
     });
-    
+
     // 清空鱼群数组
     this.m_fishArray = [];
   }
-  
+
   /**
    * 更新鱼的运动
    * 管理鱼从右侧游到左侧的动画效果
@@ -1647,10 +1672,10 @@ export class PlayComponent implements OnInit, OnDestroy {
     if (!this.gameStages || this.currentStageIndex >= this.gameStages.length) {
       return;
     }
-    
+
     // 获取当前游戏阶段
     const currentStage = this.gameStages[this.currentStageIndex];
-    
+
     // 检查是否需要创建新的鱼
     const currentTime = Date.now();
     if (currentTime - this.m_lastFishTime > this.m_fishInterval) {
@@ -1662,7 +1687,7 @@ export class PlayComponent implements OnInit, OnDestroy {
 
         // 创建小型鱼
         const fish = this.createFish('small', fishData);
-        
+
         // 存储问题数据到鱼对象中，以便点击时可以获取
         fish.questionData = fishData;
 

src/app/play/resources.js

@@ -7,6 +7,7 @@ const localImages = {
   'bei_jing___jiao_shi': 'assets/game/bei_jing___jiao_shi.png',
   'bei_jing': 'assets/game/bei_jing.jpg',
   'chuan': 'assets/game/chuan.png',
+  'fa_yin': 'assets/game/fa_yin.png',
   'fa_yin_an_niu': 'assets/game/fa_yin_an_niu.png',
   'fa_yin_an_niu___fa_yin': 'assets/game/fa_yin_an_niu___fa_yin.png',
   'fa_yin_an_niu___la_ba': 'assets/game/fa_yin_an_niu___la_ba.png',
@@ -155,6 +156,7 @@ const localImagesSize = {
   'bei_jing': { width: 1280, height: 720 },
   'bei_jing___jiao_shi': { width: 1280, height: 173 },
   'chuan': { width: 320, height: 77 },
+  'fa_yin': { width: 91, height: 94 },
   'fa_yin_an_niu': { width: 91, height: 94 },
   'fa_yin_an_niu___fa_yin': { width: 32, height: 38 },
   'fa_yin_an_niu___la_ba': { width: 46, height: 46 },

流程.md

-1. 本局开始  播放音频
 2. 点击鱼  正确  播放音频
 3. 获取星星表示当前进度