blockly编程游戏

1、详情页查单条数据
2、移出任务初始坐标，使用地图开始坐标
3、人物初始朝向配置成动态读库

src/api/ai/mapgame/index.ts

@@ -1,50 +0,0 @@
-import request from '@/config/axios'
-
-// AI-blockly地图编程游戏 VO
-export interface MapGameVO {
-  id: number // 主键
-  name: string // 名称
-  info: string // 简介
-  userImage: string // 人物图标
-  userPosition: string // 人物初始坐标
-  mapStartPoint: string // 地图开始坐标
-  mapBackground: string // 地图背景图
-  mapEndPoint: string // 地图结束坐标
-  mapWalkablePoints: string // 地图可行走坐标
-  jsonData: string // json数据
-  sort: number // 排序
-  status: number // 状态
-}
-
-// AI-blockly地图编程游戏 API
-export const MapGameApi = {
-  // 查询AI-blockly地图编程游戏分页
-  getMapGamePage: async (params: any) => {
-    return await request.get({ url: `/ai/map-game/page`, params })
-  },
-
-  // 查询AI-blockly地图编程游戏详情
-  getMapGame: async (id: number) => {
-    return await request.get({ url: `/ai/map-game/get?id=` + id })
-  },
-
-  // 新增AI-blockly地图编程游戏
-  createMapGame: async (data: MapGameVO) => {
-    return await request.post({ url: `/ai/map-game/create`, data })
-  },
-
-  // 修改AI-blockly地图编程游戏
-  updateMapGame: async (data: MapGameVO) => {
-    return await request.put({ url: `/ai/map-game/update`, data })
-  },
-
-  // 删除AI-blockly地图编程游戏
-  deleteMapGame: async (id: number) => {
-    return await request.delete({ url: `/ai/map-game/delete?id=` + id })
-  },
-
-  // 导出AI-blockly地图编程游戏 Excel
-  exportMapGame: async (params) => {
-    return await request.download({ url: `/ai/map-game/export-excel`, params })
-  }
-}

src/api/game/game.js → src/api/blockly/game.js

@@ -7,4 +7,11 @@ export function GameList (data) {
     method: 'get',
     data
   })
+}
+// 获取游戏详情
+export function getMapGameById (id) {
+  return axios({
+    url: 'bjdxWeb/ai/getMapGameById?id=' + id ,
+    method: 'get'
+  })
 }

src/views/block/MapGame.vue

@@ -109,17 +109,19 @@ import mapBackgroundImage from '@/assets/images/blockly/mapGame2.png';
 import playerImage from '@/assets/images/blockly/user.png';
 
 // 游戏接口数据
-import { GameList } from '@/api/game/game.js';
+import { getMapGameById } from '@/api/blockly/game.js';
 
 
 const router = useRouter();
 const route = useRoute();
 const gameTitle = ref('地图游戏编程'); // 默认标题
 const currentGameData = ref(null);
+//人物初始朝向
+const playerInitialDirection = ref(0);
 
-onMounted(() => {
+onMounted(async () => {
   //数据
-  fetchGameData();
+  await fetchGameData();
 
   // 初始化可行走点集合
   initWalkablePointsSet();
@@ -149,17 +151,11 @@ const fetchGameData = async () => {
       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，使用第一个游戏
+    let mapGameData = await getMapGameById(gameId);
+    if (mapGameData.code === 0) {
 
-      if (gameItem) {
-        currentGameData.value = gameItem;
-        updateGameStateFromData(gameItem);
-      }
+      currentGameData.value = mapGameData?.data;
+      await updateGameStateFromData(currentGameData.value);
     }
   } catch (error) {
     console.error('获取游戏数据失败:', error);
@@ -172,16 +168,18 @@ const updateGameStateFromData = (gameData) => {
     // 更新地图配置
     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.userDirection) {
+      playerInitialDirection.value = gameData.userDirection;
     }
+
     // 更新地图数据
     // 地图起点
     if (gameData.mapStartPoint) {
       const startPoint = JSON.parse(gameData.mapStartPoint);
       gameState.mapData.startPoint = { x: startPoint.x, y: startPoint.y };
+      gameState.player.position = { x: startPoint.x, y: startPoint.y };
     }
     // 地图终点
     if (gameData.mapEndPoint) {
@@ -244,7 +242,7 @@ const gameState = reactive({
       { x: 1, y: 2 }, { x: 2, y: 2 }, { x: 3, y: 2, type: 'ice' }, { x: 4, y: 2 },
       { x: 1, y: 3 }, { x: 2, y: 3 }, { x: 3, y: 3 }, { x: 4, y: 3 },
       { x: 4, y: 3 },
-    ]
+    ],
   }
 });
 
@@ -619,7 +617,7 @@ async function move(direction) {
     }, 1000);
 
     // 添加碰撞延迟
-    await new Promise(resolve => setTimeout(resolve, 300));
+    await new Promise(resolve => setTimeout(resolve, 500));
   }
 }
 
@@ -654,7 +652,7 @@ async function handleIceSliding() {
         }
 
         // 添加滑行间隔时间
-        await new Promise(resolve => setTimeout(resolve, 300));
+        await new Promise(resolve => setTimeout(resolve, 500));
       } else {
         // 下一个位置不可行走，检查是否是墙体
         gameState.player.isColliding = true;
@@ -671,7 +669,7 @@ async function handleIceSliding() {
         }, 1000);
 
         // 添加碰撞延迟
-        await new Promise(resolve => setTimeout(resolve, 300));
+        await new Promise(resolve => setTimeout(resolve, 500));
 
         break;
       }
@@ -693,6 +691,7 @@ window.moveBackward = async function() {
   await move(-1);
 };
 
+//向左转（逆时针旋转90度）
 window.turnLeft = async function() {
   // 如果已经发生过碰撞，不再执行任何旋转
   if (isColliding.value) {
@@ -701,12 +700,12 @@ window.turnLeft = async function() {
 
   // 向左转（逆时针旋转90度）
   gameState.player.direction = (playerDirection.value - 1 + 4) % 4;
-  console.log('向左转', playerDirection.value, gameState.player.direction);
 
   // 添加旋转延迟
-  await new Promise(resolve => setTimeout(resolve, 300));
+  await new Promise(resolve => setTimeout(resolve, 500));
 };
 
+//向右转（顺时针旋转90度）
 window.turnRight = async function() {
   // 如果已经发生过碰撞，不再执行任何旋转
   if (isColliding.value) {
@@ -715,12 +714,12 @@ window.turnRight = async function() {
 
   // 向右转（顺时针旋转90度）
   gameState.player.direction = (playerDirection.value + 1) % 4;
-  console.log('向右转', playerDirection.value, gameState.player.direction);
 
   // 添加旋转延迟
-  await new Promise(resolve => setTimeout(resolve, 300));
+  await new Promise(resolve => setTimeout(resolve, 500));
 };
 
+// 向后转（旋转180度）
 window.turnAround = async function() {
   // 如果已经发生过碰撞，不再执行任何旋转
   if (isColliding.value) {
@@ -741,7 +740,6 @@ window.isFinish = async function() {
     return;
   }
 
-  console.log(gameState.player.hasReachedEnd);
   if (gameState.player.position.x === endPoint.value.x && gameState.player.position.y === endPoint.value.y) {
     gameState.player.hasReachedEnd = true;
     showGameMessage('恭喜你到达终点！', 'success' );
@@ -755,7 +753,7 @@ let executionAbortController = null;
 const runCode = async () => {
   try {
     await resetPlayer();
-    await new Promise(resolve => setTimeout(resolve, 300));
+    await new Promise(resolve => setTimeout(resolve, 500));
 
     // 创建新的AbortController用于取消执行
     executionAbortController = new AbortController();
@@ -768,7 +766,6 @@ const runCode = async () => {
 
     // 生成JavaScript代码
     const code = javascriptGenerator.workspaceToCode(workspace) + "await isFinish();";
-    console.log(code);
 
     try {
       // 增强的安全检查
@@ -843,7 +840,7 @@ const resetPlayer = () => {
   }
 
   gameState.player.position = { ...startPoint.value };
-  gameState.player.direction = 1; // 重置为向上方向
+  gameState.player.direction = playerInitialDirection.value; // 重置为向上方向
   gameState.player.isColliding = false; //碰撞标志
   gameState.player.hasReachedEnd = false;
   gameState.player.isSliding = false; // 重置滑行状态
@@ -990,6 +987,8 @@ onUnmounted(() => {
   background-color: rgba(52, 152, 219, 0.2);
   border: 1px solid rgba(52, 152, 219, 0.5);
   box-sizing: border-box;
+  //是否显示可行路线
+  opacity: 0;
 }
 
 /* 玩家样式 */
@@ -1119,7 +1118,8 @@ onUnmounted(() => {
 }
 
 #blocklyDiv {
-  height: 300px;
+  height: 80%;
+  min-height: 500px;
   width: 100%;
   background: #fff;
   border: 1px solid #ddd;

src/views/gamepage/GameIndex.vue

@@ -88,7 +88,7 @@ import { ArrowDown, Search, ArrowLeftBold } from '@element-plus/icons-vue'
 import { useRouter, useRoute } from 'vue-router'
 import teachingImg from '@/assets/icon/teaching.png'
 // 引入游戏列表接口
-import { GameList } from '@/api/game/game.js'
+import { GameList } from '@/api/blockly/game.js'
 import LeftPanel from '@/components/LeftPanel.vue'
 const leftPanelRef = ref(null)
 const route = useRoute()