Merge branch 'master' of http://59.110.91.129:3000/zhangmengying/AIClass into wanzi

src/views/block/MapGame.vue

@@ -152,7 +152,7 @@ const gameState = reactive({
   // 玩家状态
   player: {
     position: { x: 1, y: 1 },
-    direction: 0, // 0=上, 1=右, 2=下, 3=左
+    direction: 1, // 0=上, 1=右, 2=下, 3=左
     isColliding: false,
     hasReachedEnd: false,
     collisionHappened: false // 标记是否已发生碰撞
@@ -167,7 +167,7 @@ const gameState = reactive({
   // 地图数据
   mapData: {
     startPoint: { x: 1, y: 1 },
-    endPoint: { x: 8, y: 7 },
+    endPoint: { x: 2, y: 1 },
     walkablePoints: [
       { x: 1, y: 1 }, { x: 2, y: 1 }, { x: 3, y: 1 }, { x: 4, y: 1 }, { x: 5, y: 1 },
       { x: 1, y: 2 }, { x: 5, y: 2 },
@@ -226,7 +226,8 @@ function getPointStyle(point) {
 const playerStyle = computed(() => ({
   left: playerPosition.value.x * tileSize.value + 'px',
   top: playerPosition.value.y * tileSize.value + 'px',
-  transform: `rotate(${playerDirection.value * 90}deg)`
+  transform: `rotate(${playerDirection.value * 90}deg)`,
+  '--player-rotation': `${playerDirection.value * 90}deg` // 添加CSS变量
 }));
 
 // 显示游戏消息
@@ -460,120 +461,63 @@ function getDirectionText() {
   return directions[playerDirection.value];
 }
 
-// 移动函数（供生成的代码调用）
-window.moveForward = async function() {
-  // 如果已经发生过碰撞，不再执行任何移动
+// 创建通用的移动函数
+async function move(direction) {
+  // direction: 1 表示向前，-1 表示向后
   if (isColliding.value || gameState.player.collisionHappened) {
     return;
   }
 
   let newX = playerPosition.value.x;
   let newY = playerPosition.value.y;
-
-  // 根据当前方向计算新位置
-  switch(playerDirection.value) {
-    case 0: // 上
-      newY--;
-      break;
-    case 1: // 右
-      newX++;
-      break;
-    case 2: // 下
-      newY++;
-      break;
-    case 3: // 左
-      newX--;
-      break;
-  }
-
-  // 检查是否可以移动
-  if (isWalkable(newX, newY)) {
-    // 使用平滑移动动画
-    await smoothMoveTo(newX, newY);
-    output.value += `移动到: (${newX}, ${newY})\n`;
-
-    // 检查是否到达终点
-    if (newX === endPoint.value.x && newY === endPoint.value.y) {
-      gameState.player.hasReachedEnd = true;
-      showGameMessage('恭喜你到达终点！', 'success');
-      output.value += '恭喜你到达终点！\n';
+  let moveType = direction === 1 ? '移动' : '向后移动';
+
+  // 根据当前方向和移动类型计算新位置
+  if (direction === 1) {
+    // 向前移动
+    switch(playerDirection.value) {
+      case 0: newY--; break;
+      case 1: newX++; break;
+      case 2: newY++; break;
+      case 3: newX--; break;
     }
   } else {
-    // 发生碰撞
-    gameState.player.isColliding = true;
-    gameState.player.collisionHappened = true; // 标记已发生碰撞
-    showGameMessage('哎呀，撞到墙了！', 'error');
-    output.value += '碰撞！不能移动到这个位置\n';
-
-    // 立即中止整个代码执行
-    if (executionAbortController) {
-      executionAbortController.abort();
+    // 向后移动
+    switch(playerDirection.value) {
+      case 0: newY++; break;
+      case 1: newX--; break;
+      case 2: newY--; break;
+      case 3: newX++; break;
     }
-    // 添加状态日志
-    console.log('碰撞发生，设置碰撞状态:', {
-      collisionHappened: gameState.player.collisionHappened,
-      isColliding: gameState.player.isColliding
-    });
-
-    // 1秒后取消碰撞状态
-    setTimeout(() => {
-      gameState.player.isColliding = false;
-    }, 1000);
-
-    // 添加碰撞延迟
-    await new Promise(resolve => setTimeout(resolve, 500));
-  }
-};
-
-window.moveBackward = async function() {
-  // 如果已经发生过碰撞，不再执行任何移动
-  if (isColliding.value || gameState.player.collisionHappened) {
-    return;
-  }
-
-  let newX = playerPosition.value.x;
-  let newY = playerPosition.value.y;
-
-  // 根据当前方向计算新位置（向后移动）
-  switch(playerDirection.value) {
-    case 0: // 上 -> 向下移动
-      newY++;
-      break;
-    case 1: // 右 -> 向左移动
-      newX--;
-      break;
-    case 2: // 下 -> 向上移动
-      newY--;
-      break;
-    case 3: // 左 -> 向右移动
-      newX++;
-      break;
   }
 
   // 检查是否可以移动
   if (isWalkable(newX, newY)) {
     // 使用平滑移动动画
     await smoothMoveTo(newX, newY);
-    output.value += `向后移动到: (${newX}, ${newY})\n`;
+    output.value += `${moveType}到: (${newX}, ${newY})
+`;
 
     // 检查是否到达终点
     if (newX === endPoint.value.x && newY === endPoint.value.y) {
       gameState.player.hasReachedEnd = true;
+      gameState.player.direction = 1;
       showGameMessage('恭喜你到达终点！', 'success');
-      output.value += '恭喜你到达终点！\n';
+      output.value += '恭喜你到达终点！';
     }
   } else {
     // 发生碰撞
     gameState.player.isColliding = true;
-    gameState.player.collisionHappened = true; // 标记已发生碰撞
+    gameState.player.collisionHappened = true;
     showGameMessage('哎呀，撞到墙了！', 'error');
-    output.value += '碰撞！不能移动到这个位置\n';
+    output.value += '碰撞！不能移动到这个位置';
 
     // 立即中止整个代码执行
     if (executionAbortController) {
       executionAbortController.abort();
     }
 
+    // 保留碰撞抖动效果，但确保不会改变当前朝向
     // 1秒后取消碰撞状态
     setTimeout(() => {
       gameState.player.isColliding = false;
@@ -582,13 +526,20 @@ window.moveBackward = async function() {
     // 添加碰撞延迟
     await new Promise(resolve => setTimeout(resolve, 500));
   }
+}
+
+// 保留原有的API接口
+window.moveForward = async function() {
+  await move(1);
+};
+
+window.moveBackward = async function() {
+  await move(-1);
 };
 
 window.turnLeft = async function() {
   // 如果已经发生过碰撞，不再执行任何旋转
-  console.log('turnLeft',gameState.player.collisionHappened);
   if (isColliding.value || gameState.player.collisionHappened) {
-    console.log('turnLeft: 检测到碰撞，停止旋转');
     return;
   }
 
@@ -598,14 +549,11 @@ window.turnLeft = async function() {
 
   // 添加旋转延迟
   await new Promise(resolve => setTimeout(resolve, 300));
-  console.log('turnLeft222222222222',gameState.player.collisionHappened);
 };
 
 window.turnRight = async function() {
   // 如果已经发生过碰撞，不再执行任何旋转
-  console.log('turnRight',gameState.player.collisionHappened);
   if (isColliding.value || gameState.player.collisionHappened) {
-    console.log('turnRight: 检测到碰撞，停止旋转');
     return;
   }
 
@@ -615,13 +563,11 @@ window.turnRight = async function() {
 
   // 添加旋转延迟
   await new Promise(resolve => setTimeout(resolve, 300));
-  console.log('turnRight222222222222',gameState.player.collisionHappened);
 };
 
 window.turnAround = async function() {
   // 如果已经发生过碰撞，不再执行任何旋转
   if (isColliding.value || gameState.player.collisionHappened) {
-    console.log('turnRight: 检测到碰撞，停止旋转');
     return;
   }
 
@@ -654,13 +600,6 @@ const runCode = async () => {
     gameState.player.hasReachedEnd = false;
     gameState.player.collisionHappened = false; // 重置碰撞标志
 
-    // 添加状态日志
-    console.log('执行开始，初始状态:', {
-      collisionHappened: gameState.player.collisionHappened,
-      isColliding: gameState.player.isColliding
-    });
-
-
     // 初始化输出
     output.value = '// 执行结果:\n';
 
@@ -678,7 +617,9 @@ const runCode = async () => {
       const unsafePatterns = [
         'eval(', 'Function(', 'document.write', 'window.location',
         'document.createElement', 'XMLHttpRequest', 'fetch',
-        'setInterval', 'setTimeout', 'window.'
+        'setInterval', 'setTimeout', 'window.',
+        'alert(', 'confirm(', 'prompt(',
+        'document.cookie', 'localStorage', 'sessionStorage'
       ];
 
       const hasUnsafeCode = unsafePatterns.some(pattern => code.includes(pattern));
@@ -722,16 +663,19 @@ const runCode = async () => {
     } catch (error) {
       // 捕获并显示执行错误
       if (error.message !== '执行已取消') {
-        output.value += '\n// 执行错误: ' + error.message + '\n';
-        showGameMessage('代码执行错误: ' + error.message, 'error');
+        const errorMsg = error.message || '未知错误';
+        output.value += `\n// 执行错误: ${errorMsg}\n`;
+        showGameMessage(`代码执行错误: ${errorMsg}`, 'error');
+        console.error('代码执行错误:', error);
       }
     } finally {
       // 清除当前执行的Promise引用
       currentExecutionPromise = null;
     }
   } catch (error) {
-    output.value += '\n// 错误: ' + error.message + '\n';
-    showGameMessage('运行时错误: ' + error.message, 'error');
+    output.value += `\n// 错误: ${error.message || '未知错误'}\n`;
+    showGameMessage(`运行时错误: ${error.message || '未知错误'}`, 'error');
+    console.error('运行时错误:', error);
   }
 };
 
@@ -748,7 +692,7 @@ const clearOutput = () => {
 
 // 重置玩家位置和状态
 const resetPlayer = () => {
-  // 取消任何正在执行的代码
+// 取消任何正在执行的代码
   if (executionAbortController) {
     executionAbortController.abort();
     executionAbortController = null;
@@ -759,7 +703,7 @@ const resetPlayer = () => {
   }
 
   gameState.player.position = { ...startPoint.value };
-  gameState.player.direction = 0; // 重置为向上方向
+  gameState.player.direction = 1; // 重置为向上方向
   gameState.player.isColliding = false;
   gameState.player.hasReachedEnd = false;
   gameState.player.collisionHappened = false; // 重置碰撞标志
@@ -941,45 +885,45 @@ onUnmounted(() => {
   width: 40px;
   height: 40px;
   margin: 5px;
-  background-color: rgba(155, 89, 182, 0.9);
+  background-image: url('@/assets/images/xiaozhi.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
   border-radius: 5px;
   transition: all 0.3s ease;
   z-index: 10;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: white;
-  font-weight: bold;
-  font-size: 14px;
-  /* 箭头指示器 */
-  &::after {
-    content: '▶';
-    font-size: 20px;
-  }
 }
 
 /* 碰撞动画 */
 .player.collision {
   animation: collision 0.5s ease-in-out;
-  background-color: rgba(231, 76, 60, 0.9);
 }
 
 @keyframes collision {
-  0%, 100% { transform: translateX(0) rotate(var(--player-direction)); }
-  25% { transform: translateX(-5px) rotate(var(--player-direction)); }
-  75% { transform: translateX(5px) rotate(var(--player-direction)); }
+  0% { transform: rotate(var(--player-rotation)) translateX(0) translateY(0) scale(1); }
+  25% { transform: rotate(var(--player-rotation)) translateX(-3px) translateY(-2px) scale(1.2); }
+  50% { transform: rotate(var(--player-rotation)) translateX(3px) translateY(2px) scale(1.2); }
+  75% { transform: rotate(var(--player-rotation)) translateX(-3px) translateY(-2px) scale(1.2); }
+  100% { transform: rotate(var(--player-rotation)) translateX(0) translateY(0) scale(1); }
 }
 
 /* 成功到达终点动画 */
 .player.success {
   animation: success 1s ease-in-out;
-  background-color: rgba(46, 204, 113, 0.9);
 }
 
 @keyframes success {
-  0% { transform: scale(1) rotate(var(--player-direction)); }
-  50% { transform: scale(1.2) rotate(var(--player-direction)); }
-  100% { transform: scale(1) rotate(var(--player-direction)); }
+  0% { transform: rotate(90deg) scale(1); }
+  10% { transform: rotate(90deg) scale(1.2) translateX(-5px) translateY(-5px); }
+  20% { transform: rotate(90deg) scale(1.3) translateX(5px) translateY(5px); }
+  30% { transform: rotate(90deg) scale(1.2) translateX(-5px) translateY(-5px); }
+  40% { transform: rotate(90deg) scale(1.3) translateX(5px) translateY(5px); }
+  50% { transform: rotate(90deg) scale(1.4) translateX(0) translateY(0); }
+  60% { transform: rotate(90deg) scale(1.3) translateX(-3px) translateY(-3px); }
+  70% { transform: rotate(90deg) scale(1.2) translateX(3px) translateY(3px); }
+  80% { transform: rotate(90deg) scale(1.3) translateX(-3px) translateY(-3px); }
+  90% { transform: rotate(90deg) scale(1.2) translateX(3px) translateY(3px); }
+  100% { transform: rotate(90deg) scale(1); }
 }
 
 /* 游戏消息样式 */
@@ -1029,18 +973,24 @@ onUnmounted(() => {
   border-radius: 15px;
 }
 
-.toolbox-section h2 {
+// 合并重复的区块标题样式
+.map-section h2,
+.toolbox-section h2,
+.workspace-section h2,
+.output-section h2 {
   margin-bottom: 15px;
   color: #2c3e50;
   border-bottom: 2px solid #3498db;
   padding-bottom: 8px;
 }
 
+// 合并重复的区块背景样式
+.map-section,
+.toolbox-section,
 .workspace-section {
   background: rgba(248, 249, 250, 0.82);
   padding: 15px;
   border-radius: 15px;
-  flex: 1;
 }
 
 .workspace-section h2 {
@@ -1134,4 +1084,4 @@ button:hover {
     height: 400px;
   }
 }
-</style>
+</style>