点击上下节切换地图数据

src/components/blockly/MapGame.vue

@@ -111,8 +111,8 @@
 
       <div class="workspace-section">
         <div class="controls">
-          <button id="runCode" @click="runCode" v-if="!isRunning">运行代码</button>
-          <button @click="resetPlayer" v-if="isRunning">重置玩家</button>
+          <button id="runCode" @click="runCode" >运行代码</button>
+          <button @click="resetPlayer" >重置玩家</button>
           <button @click="clearWorkspace">清空工作区</button>
         </div>
 
@@ -123,7 +123,7 @@
 </template>
 
 <script setup>
-import {ref, onMounted, onUnmounted, reactive, computed, nextTick} from 'vue';
+import {ref, onMounted, onUnmounted, reactive, computed, nextTick, watch} from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { ArrowLeftBold } from '@element-plus/icons-vue';
 import * as Blockly from "blockly";
@@ -370,6 +370,19 @@ const tileSize = computed(() => {
 });
 
 
+// 监听props变化，当地图数据变化时更新游戏数据
+watch(() => [props.gameId, props.mapBackground, props.mapStartPoint, props.mapEndPoint, props.mapWalkablePoints], async () => {
+  // 获取游戏数据
+  await fetchGameData();
+  // 初始化可行走点集合
+  initWalkablePointsSet();
+  // 重置玩家位置
+  resetPlayer();
+  await nextTick();
+  // 更新容器尺寸
+  updateMapContainerDimensions();
+}, { deep: true });
+
 // 生命周期钩子
 onMounted(async () => {
   // 获取游戏数据