Kaynağa Gözat

优化blockly变成页面重置逻辑

liyanbo 4 ay önce
ebeveyn
işleme
20366aba8e
1 değiştirilmiş dosya ile 70 ekleme ve 22 silme
  1. 70 22
      src/components/blockly/MapGame.vue

+ 70 - 22
src/components/blockly/MapGame.vue

@@ -802,12 +802,21 @@ const resetPlayer = async () => {
   // 清除所有视频组件
   const mapBackground = document.querySelector('.map-background');
   if (mapBackground) {
+    // 清除视频元素
     const videoElements = mapBackground.querySelectorAll('video');
     videoElements.forEach(video => {
       if (mapBackground.contains(video)) {
         mapBackground.removeChild(video);
       }
     });
+
+    // 清除临时动画元素
+    const tempElements = mapBackground.querySelectorAll('div[style*="backgroundImage"]');
+    tempElements.forEach(temp => {
+      if (mapBackground.contains(temp)) {
+        mapBackground.removeChild(temp);
+      }
+    });
   }
 
   // 确保小智显形(不隐形)
@@ -1103,7 +1112,7 @@ window.pickupItem = async function()  {
 
   // 判断是否是要拾取的方块类型
   if (tileMap && tileMap.type === BLOCKLY_MAP_TYPE_DICT.ITEM) {
-    showGameMessage(tileMap.tip || CONFIG.TIPS.PICKUP_ITEM, 'warning')
+    showGameMessage(tileMap.tip || CONFIG.TIPS.PICKUP_ITEM, 'warning');
 
     // 处理携带物品逻辑
     if (tileMap && tileMap.img) {
@@ -1134,7 +1143,7 @@ window.pickupItem = async function()  {
       }
     }
   } else {
-    showGameMessage(CONFIG.TIPS.NULL_PICKUP_ITEM, 'info')
+    showGameMessage(CONFIG.TIPS.NULL_PICKUP_ITEM, 'info');
   }
 
   await new Promise(resolve => setTimeout(resolve, CONFIG.DELAY.ACTION_DELAY));
@@ -1202,7 +1211,7 @@ window.pause = async function(seconds) {
   const totalIterations = seconds * 10; // 总迭代次数
 
   //处理特殊任务消失
-  processingSpecialTasksDisappearing()
+  processingSpecialTasksDisappearing();
 
   for (let i = 1; i <= totalIterations; i++) {
     // 检查是否应该停止执行
@@ -1304,18 +1313,21 @@ window.isFinish = async function() {
 
 //移动逻辑处理(前后通用)
 async function moveStep(newX, newY, moveDirection = 0){
+  // 检查是否应该停止执行
+  if (shouldStopExecution) {
+    return;
+  }
 
   // 检查是否可以移动
   if (walkablePointsMap.has(`${newX},${newY}`)) {
+      // 移动前处理方块类型逻辑
+      await switchMapType(0);
 
-    // 处理方块类型逻辑
-    await switchMapType(0);
+      // 使用平滑移动动画
+      await smoothMoveTo(newX, newY);
 
-    // 使用平滑移动动画
-    await smoothMoveTo(newX, newY);
-
-    // 处理方块类型逻辑
-    await switchMapType(1, moveDirection);
+      // 移动后处理方块类型逻辑
+      await switchMapType(1, moveDirection);
 
     await new Promise(resolve => setTimeout(resolve, CONFIG.DELAY.ACTION_DELAY));
   } else {
@@ -1801,10 +1813,54 @@ async function showPass(passStar){
 //================卸载区=====================
 // 组件卸载时清理
 onUnmounted(() => {
+  // 清理Blockly工作区
   if (workspace) {
     workspace.dispose();
+    workspace = null;
   }
+  
+  // 移除事件监听器
   window.removeEventListener('resize', updateMapContainerDimensions);
+  
+  // 停止当前正在执行的代码
+  shouldStopExecution = true;
+  
+  // 取消任何正在进行的执行
+  if (executionAbortController) {
+    executionAbortController.abort();
+    executionAbortController = null;
+  }
+  
+  // 清除当前执行的Promise引用
+  currentExecutionPromise = null;
+  
+  // 清理所有临时DOM元素
+  const mapBackground = document.querySelector('.map-background');
+  if (mapBackground) {
+    // 清除视频元素
+    const videoElements = mapBackground.querySelectorAll('video');
+    videoElements.forEach(video => {
+      if (mapBackground.contains(video)) {
+        mapBackground.removeChild(video);
+      }
+    });
+    
+    // 清除临时动画元素
+    const tempElements = mapBackground.querySelectorAll('div[style*="backgroundImage"]');
+    tempElements.forEach(temp => {
+      if (mapBackground.contains(temp)) {
+        mapBackground.removeChild(temp);
+      }
+    });
+  }
+  
+  // 清理全局函数引用
+  window.pickupItem = null;
+  window.useItem = null;
+  
+  // 重置游戏状态
+  gameState.player.carriedItems = [];
+  gameState.player.position = { ...startPoint.value };
 });
 
 </script>
@@ -2030,15 +2086,15 @@ onUnmounted(() => {
   flex: 1;
 }
 .message-item p {
-  margin: rpx(4) 0;
-  line-height: 1.6;
+  margin: rpx(1) 0;
+  line-height: 1;
   font-size: rpx(7);
   text-align: left;
   color: black;
   background-color: #e6faff;
   opacity: 0.8;
   border-radius: rpx(4);
-  padding: rpx(6);
+  padding: rpx(4);
   max-width: 100%;
 }
 .message-item p:first-child {
@@ -2459,7 +2515,7 @@ onUnmounted(() => {
   gap: 20px;
 }
 
-// 合并重复的区块样式
+// 统一区块样式
 .map-section, .workspace-section {
   background: rgba(248, 249, 250, 0.82);
   padding: 15px;
@@ -2474,14 +2530,6 @@ onUnmounted(() => {
   padding-bottom: 8px;
 }
 
-// 合并重复的区块背景样式
-.map-section,
-.workspace-section {
-  background: rgba(248, 249, 250, 0.82);
-  padding: 15px;
-  border-radius: 15px;
-}
-
 #blocklyDiv {
   height: 87%;
   min-height: rpx(250);