终点特效

src/components/blockly/MapGame.vue

@@ -4,7 +4,7 @@
     <div 
       class="centered-box" 
       :style="{
-        backgroundImage: `url(${cupbg})`,
+        backgroundImage: `url(${passConfig.passBackground})`,
          backgroundSize: '110%', 
          backgroundPosition: 'center',
          backgroundRepeat: 'no-repeat'
@@ -21,14 +21,14 @@
       </div>
       <!-- 奖杯 -->
       <div class="middle-box">
-        <img :src="goldcup" alt="奖杯" class="gold-cup-image" />
+        <img :src="passConfig.passTrophy" alt="奖杯" class="gold-cup-image" />
       </div>
       <!-- 星星 -->
       <div class="bottom-box">
         <img 
-          v-for="index in starCount" 
+          v-for="index in passConfig.starTotal"
           :key="index" 
-          :src="star02" 
+          :src="index <= passConfig.passStar ? star01 : star02"
           alt="星星" 
           class="gold-star-image" 
           :class="index % 2 === 0 ? 'star-bottom' : 'star-top'" 
@@ -158,8 +158,13 @@ import star02 from '@/assets/blockly/star02.png' // 星星
 import star01 from '@/assets/blockly/star01.png' // 金星
 
 // 星星数量，可根据需要调整
-const starCount = ref(3);
-
+const passConfig = ref({
+  starTotal: 3,// 总星星数量
+  title: 'YOU WIN!',// 通关标题
+  passStar: 0,// 已通关星星数量
+  passTrophy: "",// 通关奖杯
+  passBackground: "",// 通关后奖杯底图
+});
 
 
 // 定义emits
@@ -1263,23 +1268,24 @@ window.isFinish = async function() {
                 || p.type === BLOCKLY_MAP_TYPE_DICT.ITEM && p.must === true && p.status === true
     ).length;
     //blockly总星星数量
-    const starCount = 3;
     //无任务情况下直接完成
     if (totalTasks === 0 || completedTasks === totalTasks) {
       gameState.player.hasReachedEnd = true;
-      // 延迟显示遮罩层，玩家动画完成后显示
-      setTimeout(() => {
-        showOverlay.value = true;
-      }, 1500);
-      emits('saveProgress', 'blockly', starCount * 100)
+      emits('saveProgress', 'blockly', passConfig.value.starTotal * 100)
       showGameMessage(CONFIG.TIPS.FINISH, 'success' );
+
+      // 展示通过动画
+      await showPass(passConfig.value.starTotal);
       return;
     }
     //任务失败
     // 计算完成百分比
-    const completionPercentage = totalTasks > 0 ? Math.round(completedTasks / totalTasks * starCount) : starCount;
+    const completionPercentage = totalTasks > 0 ? Math.round(completedTasks / totalTasks * passConfig.value.starTotal) : passConfig.value.starTotal;
     showGameMessage(CONFIG.TIPS.UNFINISHED, 'error');
     emits('saveProgress', 'blockly', completionPercentage * 100)
+
+    // 展示通过动画
+    await showPass(completionPercentage);
   }
 };
 
@@ -1748,6 +1754,35 @@ async function animateItemUse(item, itemIndex, finishAnimation) {
   }
 }
 
+// 展示通过动画
+async function showPass(passStar){
+
+  // 记录通过的星星数量
+  passConfig.value.passStar = passStar;
+
+  passConfig.value.title = 'YOU WIN!';
+  passConfig.value.passBackground = cupbg;
+
+  switch (passStar){
+    case 0:
+      passConfig.value.title = 'YOU LOSE!';
+      passConfig.value.passTrophy = nocup;
+      passConfig.value.passBackground = nocupbg;
+      break;
+    case 1:
+      passConfig.value.passTrophy = coppercup;
+      break;
+    case 2:
+      passConfig.value.passTrophy = silvercup;
+      break;
+    case 3:
+      passConfig.value.passTrophy = goldcup;
+      break;
+  }
+
+  showOverlay.value = true;
+}
+
 //================卸载区=====================
 // 组件卸载时清理
 onUnmounted(() => {