调取地图游戏数据

src/views/block/MapGame.vue

@@ -108,17 +108,76 @@ import { javascriptGenerator } from "blockly/javascript";
 import mapBackgroundImage from '@/assets/images/blockly/mapGame2.png';
 import playerImage from '@/assets/images/blockly/user.png';
 
+// 游戏接口数据
+import { GameList } from '@/api/game/game.js';
+
 
 const router = useRouter();
 const route = useRoute();
 const gameTitle = ref('地图游戏编程'); // 默认标题
+const currentGameData = ref(null);
 
-onMounted(() => {
-  // 获取路由参数中的gameName
-  const nameFromRoute = route.query.gameName;
-  if (nameFromRoute) {
-    gameTitle.value = nameFromRoute;
+// 获取游戏数据
+const fetchGameData = async () => {
+  try {
+    const gameId = route.query.gameId;
+    const nameFromRoute = route.query.gameName;
+    
+    if (nameFromRoute) {
+      gameTitle.value = nameFromRoute;
+    }
+    
+    const res = await GameList();
+    if (res && res.data && res.data.list) {
+      // 根据gameId找到对应的游戏数据
+      const gameItem = gameId 
+        ? res.data.list.find(item => item.id === parseInt(gameId))
+        : res.data.list[0]; // 如果没有gameId，使用第一个游戏
+      
+      if (gameItem) {
+        currentGameData.value = gameItem;
+        updateGameStateFromData(gameItem);
+      }
+    }
+  } catch (error) {
+    console.error('获取游戏数据失败:', error);
   }
+};
+
+// 根据获取到的数据更新游戏状态
+const updateGameStateFromData = (gameData) => {
+  try {
+    // 更新地图配置
+    gameState.mapConfig.background = gameData.mapBackground ? gameData.mapBackground.trim() : mapBackgroundImage;
+    gameState.mapConfig.tileSize = gameData.mapTileSize;
+    // 更新玩家位置
+    if (gameData.userPosition) {
+      const position = JSON.parse(gameData.userPosition);
+      gameState.player.position = { x: position.x, y: position.y };
+    }
+    // 更新地图数据
+    // 地图起点
+    if (gameData.mapStartPoint) {
+      const startPoint = JSON.parse(gameData.mapStartPoint);
+      gameState.mapData.startPoint = { x: startPoint.x, y: startPoint.y }; 
+    }
+    // 地图终点
+    if (gameData.mapEndPoint) {
+      const endPoint = JSON.parse(gameData.mapEndPoint);
+      gameState.mapData.endPoint = { x: endPoint.x, y: endPoint.y };
+    }
+    if (gameData.mapWalkablePoints) {
+      gameState.mapData.walkablePoints = JSON.parse(gameData.mapWalkablePoints);
+    }
+    // 重新初始化可行走点集合
+    initWalkablePointsSet();
+  } catch (error) {
+    console.error('更新游戏状态失败:', error);
+  }
+};
+
+onMounted(() => {
+  fetchGameData();
 })
 
 
@@ -180,7 +239,13 @@ const hasReachedEnd = computed(() => gameState.player.hasReachedEnd);
 const gameMessage = computed(() => gameState.status.message);
 const messageType = computed(() => gameState.status.messageType);
 
-const playerImageSrc = computed(() => playerImage);
+// 计算玩家图片路径，优先使用接口数据
+const playerImageSrc = computed(() => {
+  if (currentGameData.value && currentGameData.value.userImage) {
+    return currentGameData.value.userImage.trim();
+  }
+  return playerImage;
+});
 
 // Blockly相关状态
 let workspace = null;

src/views/gamepage/GameIndex.vue

@@ -134,6 +134,7 @@ onMounted(() => {
   GameList().then(res => {
     // 根据接口返回的数据结构
     if (res && res.data) {
+      console.log(res);
       // 处理返回的数据
       gameData.value = res.data.list.map(item => {
         let sortNum = item.sort || 0;