blockly编程游戏

1、地图高宽监听-加入试试加载（注意必须有一个可行走的格子是贴着边框的）

src/views/block/MapGame.vue

@@ -26,7 +26,7 @@
         <div class="map-container">
           <!-- 地图背景 -->
           <div class="map-background">
-            <img :src="mapBackground" alt="地图背景" class="map-image" />
+            <img :src="mapBackground" alt="地图背景" class="map-image" @load="onMapImageLoad" />
 
             <!-- 可行走区域标记 -->
             <div
@@ -109,7 +109,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, reactive, computed } from 'vue';
+import {ref, onMounted, onUnmounted, reactive, computed, nextTick} from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { ArrowLeftBold } from '@element-plus/icons-vue';
 import * as Blockly from "blockly";
@@ -234,7 +234,7 @@ const BLOCKLY_MAP_TYPE_DICT = {
 
 // 计算属性 - 提高性能和可读性
 const mapBackground = computed(() => gameState.mapConfig.background);
-const tileSize = computed(() => gameState.mapConfig.tileSize);
+// const tileSize = computed(() => gameState.mapConfig.tileSize);
 const walkablePoints = computed(() => gameState.mapData.walkablePoints);
 const startPoint = computed(() => gameState.mapData.startPoint);
 const endPoint = computed(() => gameState.mapData.endPoint);
@@ -253,10 +253,16 @@ const playerImageSrc = computed(() => {
   }
   return playerImage;
 });
+
+// 地图图片加载完成后更新容器尺寸
+const onMapImageLoad = () => {
+  updateMapContainerDimensions();
+};
+
 // 计算实际瓦片大小（基于容器尺寸和地图数据）
-const actualTileSize = computed(() => {
+const tileSize = computed(() => {
   if (mapContainerDimensions.value.width === 0 || mapContainerDimensions.value.height === 0) {
-    return CONFIG.STYLES.DEFAULT_TILE_SIZE;
+    return gameState.mapConfig.tileSize;
   }
 
   // 获取地图数据中的最大坐标
@@ -287,6 +293,7 @@ onMounted(async () => {
   // 重置玩家位置
   resetPlayer();
 
+  await nextTick();
   // 添加对窗口大小变化的监听
   updateMapContainerDimensions();
   window.addEventListener('resize', updateMapContainerDimensions);
@@ -317,6 +324,10 @@ const fetchGameData = async () => {
       }
 
       await updateGameStateFromData(currentGameData.value);
+
+      // 数据更新后强制刷新容器尺寸（等待DOM更新）
+      await nextTick();
+      updateMapContainerDimensions();
     }
   } catch (error) {
     console.error('获取游戏数据失败:', error);
@@ -575,7 +586,7 @@ function initBlockly() {
   const toolbox = document.getElementById('toolbox');
   workspace = Blockly.inject('blocklyDiv', {
     toolbox: toolbox,
-    collapse: true,
+    collapse: false,
     comments: true,
     disable: false, // 设为false以允许编辑
     maxBlocks: Infinity,
@@ -1040,10 +1051,19 @@ function updateMapContainerDimensions() {
   const mapContainer = document.querySelector('.map-container');
   if (mapContainer) {
     const rect = mapContainer.getBoundingClientRect();
-    mapContainerDimensions.value = {
-      width: rect.width,
-      height: rect.height
-    };
+    // 确保获取到有效的尺寸值
+    if (rect.width > 0 && rect.height > 0) {
+      mapContainerDimensions.value = {
+        width: rect.width,
+        height: rect.height
+      };
+    } else {
+      // 若尺寸无效，使用默认容器尺寸（可根据实际情况调整）
+      mapContainerDimensions.value = {
+        width: 800,
+        height: 600
+      };
+    }
   }
 }