AIClass/src/views/block/MapGame.vue

<template>
  <div class="map-game-container">
    <!-- 标题栏 -->
    <div class="title-box">
      <div class="box-icon" @click="navigateBack">
        <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
        {{ gameTitle }}
      </div>
      <!-- 游戏编号 -->
      <div class="game-badge">{{ gameSort }}</div>
    </div>

    <div class="content">
      <!-- 地图显示区域 -->
      <div class="map-section">
        <!-- 内容简介提示 -->
         <div v-if="currentGameData?.info" class="info-message-container">
          <div class="message-item">
            <div class="avatar">
              <img src="@/assets/images/xiaozhi2.png" alt="头像" class="avatar-image" />
            </div>
            <p v-if="currentGameData?.info" v-html="currentGameData?.info"></p>
          </div>
        </div>

        <div class="map-container">
          <!-- 地图背景 -->
          <div class="map-background">
            <img :src="mapBackground" alt="地图背景" class="map-image" @load="onMapImageLoad" />

            <!-- 可行走区域标记 -->
            <div
                v-for="(point, index) in walkablePoints"
                :key="index"
                class="walkable-point"
                :style="getPointStyle(point)"
            >
            </div>

            <!-- 玩家角色 -->
            <div
                class="player"
                :style="playerStyle"
                :class="{ 'collision': isColliding, 'success': hasReachedEnd }"
            >
            </div>
            <!-- 携带物品容器 - 默认隐藏，有物品时显示 -->
            <div class="carried-items-container" v-show="gameState.player.carriedItems.length > 0">
                <div
                    v-for="(item, index) in gameState.player.carriedItems"
                    :key="index"
                    class="carried-item"
                    :style="getCarriedItemStyle(index, item)"
                ></div>
            </div>
          </div>

          <!-- 游戏状态提示 -->
          <div v-if="gameMessage" :class="['game-message', messageType]">
            {{ gameMessage }}
          </div>
        </div>
      </div>

      <!-- Blockly工作区 -->
      <div class="blockly-section">
        <div class="toolbox-section" style="display: none;">
          <h2>工具箱</h2>
          <div id="toolbox">
            <!-- 移动控制积木 -->
            <category name="移动控制" colour="%{BKY_MOTION_HUE}">
              <block type="move_forward"></block>
              <block type="turn_left"></block>
              <block type="turn_right"></block>
              <block type="turn_around"></block>
              <block type="pickup_item"></block>
              <block type="use_item"></block>
            </category>

            <!-- 逻辑控制积木 -->
            <category name="逻辑" colour="%{BKY_LOGIC_HUE}">
              <block type="controls_if"></block>
              <block type="logic_compare"></block>
              <block type="logic_operation"></block>
              <block type="logic_negate"></block>
              <block type="logic_boolean"></block>
            </category>

            <!-- 循环控制积木 -->
            <category name="循环" colour="%{BKY_LOOPS_HUE}">
              <block type="controls_repeat_ext">
                <value name="TIMES">
                  <shadow type="math_number">
                    <field name="NUM"></field>
                  </shadow>
                </value>
              </block>
              <block type="controls_whileUntil"></block>
            </category>

            <!-- 数学运算积木 -->
            <category name="数学" colour="%{BKY_MATH_HUE}">
              <block type="math_number"></block>
              <block type="math_arithmetic"></block>
            </category>
          </div>
        </div>

        <div class="workspace-section">
          <div class="controls">
            <button id="runCode" @click="runCode">运行代码</button>
            <button @click="clearWorkspace">清空工作区</button>
            <button @click="resetPlayer">重置玩家</button>
          </div>

          <div id="blocklyDiv"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
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";
import 'blockly/msg/zh-hans';
import { javascriptGenerator } from "blockly/javascript";
import playerImage from '@/assets/images/blockly/user.png';

// 游戏接口数据
import { getMapGameById } from '@/api/blockly/game.js';

// 配置常量
const CONFIG = {
  // 动画时长配置（毫秒）
  ANIMATION: {
    MOVE_DURATION: 500,      // 移动动画持续时间
    ROTATE_DURATION: 500,    // 旋转动画持续时间（左转/右转）
    TURN_AROUND_DURATION: 750, // 向后转动画持续时间
  },
  // 延迟配置（毫秒）
  DELAY: {
    ACTION_DELAY: 200,       // 每次动作后的延迟时间
    COLLISION_DELAY: 300,    // 碰撞后的延迟时间
    RESET_DELAY: 300,        // 重置后的延迟时间
    MESSAGE_DISPLAY: 3000,   // 消息显示时间
    COLLISION_RESET: 1000,   // 碰撞状态重置时间
    LOOP_PREVENTION: 10,     // 循环防止UI阻塞的延迟
  },
  // 游戏配置
  GAME: {
    MAX_LOOP_COUNT: 100,     // 最大循环次数
    DIRECTIONS: {
      UP: 0,
      RIGHT: 1,
      DOWN: 2,
      LEFT: 3
    }
  },
  // 样式配置
  STYLES: {
    DEFAULT_TILE_SIZE: 143,  // 默认瓦片大小
    PLAYER_SIZE_RATIO: 0.8,   // 玩家大小占瓦片的比例
    PLAYER_SIZE_MARGIN: 0.1   // 玩家大小占瓦片的比例
  },
  //提示语
  TIPS: {
    NO_ENTRY: '当前位置无通路，无法移动',
    FINISH: '恭喜你到达终点！',
  }
};

// 路由和游戏状态
const router = useRouter();
const route = useRoute();
const gameTitle = ref('地图游戏编程'); // 默认标题
const currentGameData = ref(null);
const playerInitialDirection = ref(0); // 人物初始朝向
const gameSort = ref('Game1'); // 默认排序

// 运行控制标志
let shouldStopExecution = false;
let currentExecutionPromise = null;
let executionAbortController = null;
// 添加响应式的容器尺寸
const mapContainerDimensions = ref({ width: 0, height: 0 });

// Blockly相关状态
let workspace = null;

// 使用 Map 存储可行走点及其类型，提高查询效率
let walkablePointsMap = new Map();

// 创建游戏状态的响应式对象
const gameState = reactive({
  // 地图配置信息
  mapConfig: {
    // 地图背景图片路径
    background: '',
    // 每个瓦片的尺寸（像素）
    tileSize: CONFIG.STYLES.DEFAULT_TILE_SIZE,
  },

  // 玩家相关状态
  player: {
    // 玩家当前位置坐标
    position: {},
    // 玩家当前朝向：0=上, 1=右, 2=下, 3=左
    direction: 1,
    // 是否正在发生碰撞
    isColliding: false,
    // 是否已到达终点
    hasReachedEnd: false,
    // 是否正在冰块上滑行
    isSliding: false,
    // 携带的物品数组
    carriedItems: [],
  },

  // 游戏状态信息
  status: {
    // 当前显示的游戏消息
    message: '',
    // 消息类型（如success、error、info等）
    messageType: ''
  },

  // 地图数据信息
  mapData: {
    // 游戏起点位置
    startPoint: {},
    // 游戏终点位置
    endPoint: {},
    // 地图上所有可行走的点坐标集合，添加type属性区分普通点和冰块
    walkablePoints: [],
    // 保存原始的可行走点数据，用于重置
    originalWalkablePoints: [],
  }
});
const BLOCKLY_MAP_TYPE_DICT = {
  ICE: 'ice',//冰块
  YC: 'yaoshi',//钥匙
};

// 计算属性 - 提高性能和可读性
const mapBackground = computed(() => gameState.mapConfig.background);
// const tileSize = computed(() => gameState.mapConfig.tileSize);
const walkablePoints = computed(() => gameState.mapData.walkablePoints);
const startPoint = computed(() => gameState.mapData.startPoint);
const endPoint = computed(() => gameState.mapData.endPoint);
const playerPosition = computed(() => gameState.player.position);
const playerDirection = computed(() => gameState.player.direction);
const isColliding = computed(() => gameState.player.isColliding);
const hasReachedEnd = computed(() => gameState.player.hasReachedEnd);
const gameMessage = computed(() => gameState.status.message);
const messageType = computed(() => gameState.status.messageType);
const isSliding = computed(() => gameState.player.isSliding);

// 计算玩家图片路径，优先使用接口数据
const playerImageSrc = computed(() => {
  if (currentGameData.value && currentGameData.value.userImage) {
    return currentGameData.value.userImage.trim();
  }
  return playerImage;
});

// 地图图片加载完成后更新容器尺寸
const onMapImageLoad = () => {
  updateMapContainerDimensions();
};

// 计算实际瓦片大小（基于容器尺寸和地图数据）
const tileSize = computed(() => {
  if (mapContainerDimensions.value.width === 0 || mapContainerDimensions.value.height === 0) {
    return gameState.mapConfig.tileSize;
  }

  // 获取地图数据中的最大坐标
  const maxX = Math.max(...walkablePoints.value.map(p => p.x));
  const maxY = Math.max(...walkablePoints.value.map(p => p.y));

  // 计算基于容器的瓦片大小，确保地图完全可见
  const tileWidth = mapContainerDimensions.value.width / maxX;
  const tileHeight = mapContainerDimensions.value.height / maxY;

  // 返回较小的值以确保地图完全可见
  return Math.min(tileWidth, tileHeight);
});

// 生命周期钩子
onMounted(async () => {
  // 获取游戏数据
  await fetchGameData();
  // 初始化可行走点集合
  initWalkablePointsSet();
  // 注册自定义积木
  registerCustomBlocks();
  // 注册JavaScript生成器
  registerJavaScriptGenerators();
  // 初始化Blockly工作区
  initBlockly();
  // 重置玩家位置
  resetPlayer();

  await nextTick();
  // 添加对窗口大小变化的监听
  updateMapContainerDimensions();
  window.addEventListener('resize', updateMapContainerDimensions);
});

// 获取游戏数据
const fetchGameData = async () => {
  try {
    const gameId = route.query.gameId;
    const nameFromRoute = route.query.gameName;
    const sortFromRoute = route.query.gameSort;

    if (nameFromRoute) {
      gameTitle.value = nameFromRoute;
    }
    if (sortFromRoute) {
      gameSort.value = sortFromRoute;
    }

    let mapGameData = await getMapGameById(gameId);
    if (mapGameData.code === 0) {
      currentGameData.value = mapGameData?.data;

      // 使用接口数据
      if (currentGameData.value && currentGameData.value.sort) {
        let sortNum = currentGameData.value.sort;
        gameSort.value = sortNum > 9 ? `Game${sortNum}` : `Game${sortNum}`;
      }

      await updateGameStateFromData(currentGameData.value);

      // 数据更新后强制刷新容器尺寸（等待DOM更新）
      await nextTick();
      updateMapContainerDimensions();
    }
  } catch (error) {
    console.error('获取游戏数据失败:', error);
  }
};

// 根据获取到的数据更新游戏状态
const updateGameStateFromData = (gameData) => {
  try {
    // 更新地图配置
    gameState.mapConfig.background = gameData.mapBackground ? gameData.mapBackground.trim() : '';
    gameState.mapConfig.tileSize = gameData.mapTileSize || CONFIG.STYLES.DEFAULT_TILE_SIZE;

    // 更新玩家方向
    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) {
      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);
  }
};

// 初始化可行走点映射
function initWalkablePointsSet() {
  walkablePointsMap.clear();
  gameState.mapData.walkablePoints.forEach(point => {
    walkablePointsMap.set(`${point.x},${point.y}`, point);
  });
  // 保存原始的可行走点数据，用于重置
  gameState.mapData.originalWalkablePoints = JSON.parse(JSON.stringify(gameState.mapData.walkablePoints));
}

// 可行走检查函数
function isWalkable(x, y) {
  return walkablePointsMap.has(`${x},${y}`);
}

// 计算点的样式
function getPointStyle(point) {
  const style = {
    left: point.x * tileSize.value - tileSize.value + 'px',
    top: point.y * tileSize.value - tileSize.value + 'px',
    width: tileSize.value + 'px',
    height: tileSize.value + 'px',
  };

  // 如果point有img属性，则添加图标
  if (point.img) {
    const iconSize = tileSize.value * CONFIG.STYLES.PLAYER_SIZE_RATIO;
    const marginSize = tileSize.value * CONFIG.STYLES.PLAYER_SIZE_MARGIN;

    // 重置可能影响背景图显示的样式
    style.backgroundColor = 'transparent';
    style.backgroundImage = `url(${point.img})`;
    style.backgroundSize = 'contain';
    style.backgroundPosition = 'center';
    style.backgroundRepeat = 'no-repeat';

    // 设置与玩家相同的宽高和边距
    style.width = iconSize + 'px';
    style.height = iconSize + 'px';
    style.margin = marginSize + 'px';
  }

  return style;
}

// 计算玩家样式
const playerStyle = computed(() => ({
  left: playerPosition.value.x * tileSize.value - tileSize.value + 'px',
  top: playerPosition.value.y * tileSize.value - tileSize.value + 'px',
  transform: `rotate(${playerDirection.value * 90}deg)`,
  '--player-rotation': `${playerDirection.value * 90}deg`,
  '--player-image': `url(${playerImageSrc.value})`,
  width: (tileSize.value * CONFIG.STYLES.PLAYER_SIZE_RATIO) + 'px',
  height: (tileSize.value * CONFIG.STYLES.PLAYER_SIZE_RATIO) + 'px',
  margin: (tileSize.value * CONFIG.STYLES.PLAYER_SIZE_MARGIN) + 'px',
}));

// 计算携带物品样式
function getCarriedItemStyle(index, item) {
  const baseSize = tileSize.value * CONFIG.STYLES.PLAYER_SIZE_RATIO * 0.3;

  return {
    position: 'relative',
    width: baseSize + 'px',
    height: baseSize + 'px',
    backgroundSize: 'contain',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    backgroundImage: `url(${item.img})`
  };
}

// 导航返回
function navigateBack() {
  router.back();
}

// 注册自定义积木
function registerCustomBlocks() {
  // 向前移动积木
  Blockly.Blocks['move_forward'] = {
    init: function() {
      this.jsonInit({
        "type": "move_forward",
        "message0": "向前移动",
        "previousStatement": null,
        "nextStatement": null,
        "colour": 230,
        "tooltip": "控制角色向前移动一格",
        "helpUrl": ""
      });
    }
  };

  // 向左转积木
  Blockly.Blocks['turn_left'] = {
    init: function() {
      this.jsonInit({
        "type": "turn_left",
        "message0": "向左转",
        "previousStatement": null,
        "nextStatement": null,
        "colour": 230,
        "tooltip": "控制角色向左转",
        "helpUrl": ""
      });
    }
  };

  // 向右转积木
  Blockly.Blocks['turn_right'] = {
    init: function() {
      this.jsonInit({
        "type": "turn_right",
        "message0": "向右转",
        "previousStatement": null,
        "nextStatement": null,
        "colour": 230,
        "tooltip": "控制角色向右转",
        "helpUrl": ""
      });
    }
  };

  // 向后转积木
  Blockly.Blocks['turn_around'] = {
    init: function() {
      this.jsonInit({
        "type": "turn_around",
        "message0": "向后转",
        "previousStatement": null,
        "nextStatement": null,
        "colour": 230,
        "tooltip": "控制角色向后转",
        "helpUrl": ""
      });
    }
  };

  // 拾取物品积木
  Blockly.Blocks['pickup_item'] = {
    init: function() {
      this.jsonInit({
        "type": "pickup_item",
        "message0": "拾取物品",
        "previousStatement": null,
        "nextStatement": null,
        "colour": 30,
        "tooltip": "尝试拾取当前位置的物品",
        "helpUrl": ""
      });
    }
  };

  // 使用物品积木
  Blockly.Blocks['use_item'] = {
    init: function() {
      this.jsonInit({
        "type": "use_item",
        "message0": "使用物品",
        "previousStatement": null,
        "nextStatement": null,
        "colour": 30,
        "tooltip": "在当前位置使用物品",
        "helpUrl": ""
      });
    }
  };
}

// 注册JavaScript生成器
function registerJavaScriptGenerators() {
  // 向前移动生成器
  javascriptGenerator.forBlock['move_forward'] = function(block) {
    return 'await moveForward();\n';
  };

  // 向左转生成器
  javascriptGenerator.forBlock['turn_left'] = function(block) {
    return 'await turnLeft();\n';
  };

  // 向右转生成器
  javascriptGenerator.forBlock['turn_right'] = function(block) {
    return 'await turnRight();\n';
  };

  // 向后转生成器
  javascriptGenerator.forBlock['turn_around'] = function(block) {
    return 'await turnAround();\n';
  };

  // 拾取物品生成器
  javascriptGenerator.forBlock['pickup_item'] = function(block) {
    return 'await pickupItem();\n';
  };

  // 使用物品生成器
  javascriptGenerator.forBlock['use_item'] = function(block) {
    return 'await useItem();\n';
  };

  // 为重复循环块注册自定义生成器，确保支持异步操作
  javascriptGenerator.forBlock['controls_repeat_ext'] = function(block) {
    const repeats = javascriptGenerator.valueToCode(block, 'TIMES', javascriptGenerator.ORDER_ATOMIC) || '0';

    // 确保获取到的是数字类型，如果是字符串需要转换
    const safeRepeats = `(function() {
      const num = Number(${repeats});
      return isNaN(num) ? 0 : Math.max(0, Math.floor(num));
    })()`;

    // 获取循环体代码
    const branch = javascriptGenerator.statementToCode(block, 'DO');

    // 生成支持异步的循环代码
    let code = `for (let i = 0; i < ${safeRepeats}; i++) {\n`;
    code += javascriptGenerator.prefixLines(branch, javascriptGenerator.INDENT);
    code += '}\n';

    return code;
  };

  // 为while/until循环块注册自定义生成器
  javascriptGenerator.forBlock['controls_whileUntil'] = function(block) {
    const until = block.getFieldValue('MODE') === 'UNTIL';
    const condition = javascriptGenerator.valueToCode(block, 'CONDITION',
        javascriptGenerator.ORDER_NONE) || 'false';
    const branch = javascriptGenerator.statementToCode(block, 'DO');

    // 修复变量作用域问题，使用IIFE包装循环
    let code = '(async function() {\n';
    code += '  let loopCount = 0;\n';
    code += until ? '  while (!((' + condition + ')) && loopCount < ' + CONFIG.GAME.MAX_LOOP_COUNT + ') {\n' :
        '  while (((' + condition + ')) && loopCount < ' + CONFIG.GAME.MAX_LOOP_COUNT + ') {\n';
    code += javascriptGenerator.prefixLines(branch, javascriptGenerator.INDENT + '  ');
    code += '    loopCount++';
    code += '    await new Promise(resolve => setTimeout(resolve, ' + CONFIG.DELAY.LOOP_PREVENTION + '));\n'; // 防止UI阻塞
    code += '  }\n';
    code += '})();\n';

    return code;
  };

  // 为text_print块添加生成器，用于调试
  javascriptGenerator.forBlock['text_print'] = function(block) {
    const msg = javascriptGenerator.valueToCode(block, 'TEXT', javascriptGenerator.ORDER_NONE) || '';
    return msg;
  };
}

// 初始化Blockly工作区
function initBlockly() {
  const toolbox = document.getElementById('toolbox');
  workspace = Blockly.inject('blocklyDiv', {
    toolbox: toolbox,
    collapse: false,
    comments: true,
    disable: false, // 设为false以允许编辑
    maxBlocks: Infinity,
    trashcan: true,
    horizontalLayout: false,
    toolboxPosition: 'start',
    toolboxCollapse: false, // 设置工具箱默认展开
    toolboxAlwaysExpanded: true, // 确保点击类别后保持展开状态
    css: true,
    media: 'https://unpkg.com/blockly/media/',
    rtl: false,
    scrollbars: true,
    sounds: false, // 禁用声音以提高性能
    oneBasedIndex: true,
    grid: {
      spacing: 20,
      length: 3,
      colour: "#ccc",
      snap: true
    },
    zoom: {
      controls: true,
      wheel: true,
      startScale: 1.0,
      maxScale: 3,
      minScale: 0.3,
      scaleSpeed: 1.2
    }
  });
}

// 平滑移动函数
async function smoothMoveTo(targetX, targetY) {
  const startX = playerPosition.value.x;
  const startY = playerPosition.value.y;

  const startTime = performance.now();

  // 使用Promise包装动画过程，使其可以await
  return new Promise(resolve => {
    function animate(currentTime) {
      // 检查是否应该停止执行
      if (shouldStopExecution) {
        resolve();
        return;
      }

      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / CONFIG.ANIMATION.MOVE_DURATION, 1); // 计算进度，最大为1

      // 线性插值计算当前位置
      const currentX = startX + (targetX - startX) * progress;
      const currentY = startY + (targetY - startY) * progress;

      gameState.player = {
        ...gameState.player,
        position: { x: currentX, y: currentY },
      };

      // 检查是否到达终点
      if (progress < 1) {
        // 继续动画
        requestAnimationFrame(animate);
      } else {
        resolve(); // 动画完成
      }
    }

    // 启动动画
    requestAnimationFrame(animate);
  });
}

// 处理冰块滑行逻辑（根据人物当前位置判断）
async function switchMapType(isMapType = null) {
  //取人物当前位置
  let x = playerPosition.value.x;
  let y = playerPosition.value.y;
  let tileMap = walkablePointsMap.get(`${x},${y}`);

  //判断是否是指定地图类型
  if (isMapType) {
    return isMapType === tileMap.type;
  }

  //判断方块类型并处理逻辑
  switch (tileMap.type) {
    case BLOCKLY_MAP_TYPE_DICT.ICE:
      do {
        showGameMessage(tileMap.tip, 'warning',300)
        await handleIceSliding();

        tileMap = walkablePointsMap.get(`${playerPosition.value.x},${playerPosition.value.y}`);
      }while (tileMap.type === BLOCKLY_MAP_TYPE_DICT.ICE && !isColliding.value)
      break;
    case BLOCKLY_MAP_TYPE_DICT.YC:
      // showGameMessage(tileMap.tip, 'warning', 1000)
      // // 处理携带物品逻辑
      // if (tileMap && tileMap.img) {
      //   // 将物品添加到玩家携带物品中
      //   gameState.player.carriedItems.push({
      //     ...tileMap,
      //     originalX: x,
      //     originalY: y
      //   });
      //
      //   // 从地图上移除图标（但保留点的可通行性）
      //   const pointIndex = gameState.mapData.walkablePoints.findIndex(
      //       p => p.x === x && p.y === y
      //   );
      //   if (pointIndex !== -1) {
      //     // 保留点但移除img属性
      //     const updatedPoint = { ...gameState.mapData.walkablePoints[pointIndex] };
      //     delete updatedPoint.img;
      //     gameState.mapData.walkablePoints.splice(pointIndex, 1, updatedPoint);
      //     // 更新映射
      //     walkablePointsMap.set(`${x},${y}`, updatedPoint);
      //   }
      // }

      break;
  }
}

// 处理冰块滑行逻辑
async function handleIceSliding() {
  if (shouldStopExecution || isColliding.value) {
    return;
  }
  gameState.player.isSliding = true;

  try {
    // 计算下一个位置
    let nextX = playerPosition.value.x;
    let nextY = playerPosition.value.y;

    // 根据当前方向计算下一个位置
    switch(playerDirection.value) {
      case CONFIG.GAME.DIRECTIONS.UP: nextY--; break;
      case CONFIG.GAME.DIRECTIONS.RIGHT: nextX++; break;
      case CONFIG.GAME.DIRECTIONS.DOWN: nextY++; break;
      case CONFIG.GAME.DIRECTIONS.LEFT: nextX--; break;
    }

    // 检查下一个位置是否可行走
    if (isWalkable(nextX, nextY)) {
      // 执行平滑移动到下一个位置
      await smoothMoveTo(nextX, nextY);

    } else {
      // 使用统一的碰撞处理方法，但不等待延迟（因为handleIceSliding不需要这个延迟）
      await handleWallCollision();
    }
  } catch (error) {
    console.error('滑行过程中发生错误:', error);
  } finally {
    // 无论如何都要确保滑行状态被重置
    gameState.player.isSliding = false;
  }
}

// 拾取物品函数
window.pickupItem = async function()  {
  //取人物当前位置
  let x = playerPosition.value.x;
  let y = playerPosition.value.y;
  let tileMap = walkablePointsMap.get(`${x},${y}`);

  // 判断是否是要拾取的方块类型
  if (tileMap && tileMap.type === BLOCKLY_MAP_TYPE_DICT.YC) {
    showGameMessage(tileMap.tip || '成功拾取物品！', 'warning', 1000)

    // 处理携带物品逻辑
    if (tileMap && tileMap.img) {
      // 将物品添加到玩家携带物品中
      gameState.player.carriedItems.push({
        ...tileMap,
        originalX: x,
        originalY: y
      });

      // 从地图上移除图标（但保留点的可通行性）
      const pointIndex = gameState.mapData.walkablePoints.findIndex(
          p => p.x === x && p.y === y
      );
      if (pointIndex !== -1) {
        // 保留点但移除img属性
        const updatedPoint = { ...gameState.mapData.walkablePoints[pointIndex] };
        delete updatedPoint.img;
        gameState.mapData.walkablePoints.splice(pointIndex, 1, updatedPoint);
        // 更新映射
        walkablePointsMap.set(`${x},${y}`, updatedPoint);
      }
    }
  } else {
    showGameMessage('当前位置没有可拾取的物品', 'info', 1000)
  }
}

// 使用物品函数
window.useItem = async function() {
  //取人物当前位置
  let x = playerPosition.value.x;
  let y = playerPosition.value.y;
  let tileMap = walkablePointsMap.get(`${x},${y}`);

  // 判断当前位置是否有特殊需求
  if (tileMap && tileMap.need) {
    // 检查玩家是否携带了需要的物品
    const requiredItems = tileMap.need;
    let hasRequiredItem = false;
    let itemIndex = -1;

    // 检查玩家携带的物品中是否有满足需求的物品
    for (let i = 0; i < gameState.player.carriedItems.length; i++) {
      const item = gameState.player.carriedItems[i];
      if (requiredItems.includes(item.type)) {
        hasRequiredItem = true;
        itemIndex = i;
        break;
      }
    }

    if (hasRequiredItem) {
      // 使用物品成功
      showGameMessage(tileMap.tip || '物品使用成功！', 'success', 1500);

      // 从携带物品中移除已使用的物品
      gameState.player.carriedItems.splice(itemIndex, 1);

    } else {
      // 提示缺少所需物品
      showGameMessage(tileMap.tip || `需要特殊物品才能使用`, 'warning', 1500);
    }
  } else {
    showGameMessage('当前位置不需要使用物品', 'info', 1000);
  }
}

// 向前移动
window.moveForward = async function() {
  if (shouldStopExecution || isColliding.value || isSliding.value) {
    return;
  }

  let newX = playerPosition.value.x;
  let newY = playerPosition.value.y;

  // 向前移动
  switch(playerDirection.value) {
    case CONFIG.GAME.DIRECTIONS.UP: newY--; break;
    case CONFIG.GAME.DIRECTIONS.RIGHT: newX++; break;
    case CONFIG.GAME.DIRECTIONS.DOWN: newY++; break;
    case CONFIG.GAME.DIRECTIONS.LEFT: newX--; break;
  }

  // 检查是否可以移动
  if (isWalkable(newX, newY)) {
    // 使用平滑移动动画
    await smoothMoveTo(newX, newY);

    // 处理方块类型逻辑
    await switchMapType();

    await new Promise(resolve => setTimeout(resolve, CONFIG.DELAY.ACTION_DELAY));
  } else {
    // 发生碰撞 使用统一的碰撞处理方法
    await handleWallCollision();
  }
};

//向左转（逆时针旋转90度）
window.turnLeft = async function() {
  // 如果已经发生过碰撞，不再执行任何旋转
  if (shouldStopExecution || isColliding.value) {
    return;
  }

  // 记录起始方向和目标方向
  const startDirection = playerDirection.value;
  const targetDirection = (playerDirection.value - 1 + 4) % 4;

  // 实现平滑旋转
  const startTime = performance.now();

  // 使用 requestAnimationFrame 实现平滑动画
  await new Promise(resolve => {
    function animate(currentTime) {
      // 检查是否应该停止执行
      if (shouldStopExecution) {
        resolve();
        return;
      }

      const elapsedTime = currentTime - startTime;
      const progress = Math.min(elapsedTime / CONFIG.ANIMATION.ROTATE_DURATION, 1);

      // 在动画过程中更新方向
      gameState.player.direction = startDirection - progress;

      // 如果动画未完成，继续下一帧
      if (progress < 1) {
        requestAnimationFrame(animate);
      } else {
        // 动画完成后设置最终方向
        gameState.player.direction = targetDirection;
        resolve();
      }
    }
    // 开始动画
    requestAnimationFrame(animate);
  });

  await new Promise(resolve => setTimeout(resolve, CONFIG.DELAY.ACTION_DELAY));
};

//向右转（顺时针旋转90度）
window.turnRight = async function() {
  // 如果已经发生过碰撞，不再执行任何旋转
  if (shouldStopExecution || isColliding.value) {
    return;
  }

  // 记录起始方向和目标方向
  const startDirection = playerDirection.value;
  const targetDirection = (playerDirection.value + 1) % 4;

  // 实现平滑旋转
  const startTime = performance.now();

  // 使用 requestAnimationFrame 实现平滑动画
  await new Promise(resolve => {
    function animate(currentTime) {
      // 检查是否应该停止执行
      if (shouldStopExecution) {
        resolve();
        return;
      }

      const elapsedTime = currentTime - startTime;
      const progress = Math.min(elapsedTime / CONFIG.ANIMATION.ROTATE_DURATION, 1);

      // 处理从3到0的边界情况，确保顺时针旋转
      let currentDirection;
      if (startDirection === 3 && targetDirection === 0) {
        // 对于从3到0的顺时针旋转，我们需要模拟+1的效果而不是-3
        currentDirection = startDirection + progress;
        // 当超过3.99时，设置为0（避免显示4）
        if (currentDirection > 3.99) {
          currentDirection = 0;
        }
      } else {
        // 正常情况下的线性插值
        currentDirection = startDirection + (targetDirection - startDirection) * progress;
      }

      // 在动画过程中更新方向
      gameState.player.direction = currentDirection;

      // 如果动画未完成，继续下一帧
      if (progress < 1) {
        requestAnimationFrame(animate);
      } else {
        // 动画完成后设置最终方向
        gameState.player.direction = targetDirection;
        resolve();
      }
    }

    // 开始动画
    requestAnimationFrame(animate);
  });

  await new Promise(resolve => setTimeout(resolve, CONFIG.DELAY.ACTION_DELAY));
};

// 向后转（旋转180度）
window.turnAround = async function() {
  // 如果已经发生过碰撞，不再执行任何旋转
  if (shouldStopExecution || isColliding.value) {
    return;
  }

  // 记录起始方向和目标方向
  const startDirection = playerDirection.value;
  const targetDirection = (playerDirection.value + 2) % 4;

  // 实现平滑旋转
  const startTime = performance.now();

  // 使用 requestAnimationFrame 实现平滑动画
  await new Promise(resolve => {
    function animate(currentTime) {
      // 检查是否应该停止执行
      if (shouldStopExecution) {
        resolve();
        return;
      }

      const elapsedTime = currentTime - startTime;
      const progress = Math.min(elapsedTime / CONFIG.ANIMATION.TURN_AROUND_DURATION, 1);

      // 在动画过程中更新方向
      gameState.player.direction = startDirection + 2 * progress;

      // 如果动画未完成，继续下一帧
      if (progress < 1) {
        requestAnimationFrame(animate);
      } else {
        // 动画完成后设置最终方向
        gameState.player.direction = targetDirection;
        resolve();
      }
    }
    // 开始动画
    requestAnimationFrame(animate);
  });

  await new Promise(resolve => setTimeout(resolve, CONFIG.DELAY.ACTION_DELAY));
};

//校验是否到达终点
window.isFinish = async function() {
  // 如果已经发生过碰撞，不再执行任何检查
  if (isColliding.value) {
    return;
  }

  if (gameState.player.position.x === endPoint.value.x && gameState.player.position.y === endPoint.value.y) {
    gameState.player.hasReachedEnd = true;
    showGameMessage(CONFIG.TIPS.FINISH, 'success' );
  }
};

// 运行代码
const runCode = async () => {
  try {
    await resetPlayer();
    await new Promise(resolve => setTimeout(resolve, CONFIG.DELAY.RESET_DELAY));
    // 重置执行标志，允许新的执行
    shouldStopExecution = false;

    // 创建新的AbortController用于取消执行
    executionAbortController = new AbortController();
    const signal = executionAbortController.signal;

    // 确保生成器和工作区都存在
    if (!javascriptGenerator || !workspace) {
      throw new Error('生成器或工作区未正确初始化');
    }

    // 生成JavaScript代码
    const code = javascriptGenerator.workspaceToCode(workspace) + "await isFinish();";

    try {
      // 增强的安全检查
      const unsafePatterns = [
        'eval(', 'Function(', 'document.write', 'window.location',
        'document.createElement', 'XMLHttpRequest', 'fetch',
        'setInterval', 'setTimeout', 'window.',
        'alert(', 'confirm(', 'prompt(',
        'document.cookie', 'localStorage', 'sessionStorage'
      ];

      const hasUnsafeCode = unsafePatterns.some(pattern => code.includes(pattern));

      if (hasUnsafeCode) {
        throw new Error('代码包含不安全的操作');
      }

      // 包装代码为异步函数执行，并设置超时保护
      currentExecutionPromise = new Promise(async (resolve, reject) => {
        try {
          // 检查信号是否已中止
          if (signal.aborted) {
            throw new Error('执行已取消');
          }

          // 添加信号监听
          signal.addEventListener('abort', () => {
            reject(new Error('执行已取消'));
          });

          const wrappedCode = `(async () => { ${code} })()`;
          await new Function(wrappedCode)();
          resolve();
        } catch (error) {
          reject(error);
        }
      });

    } catch (error) {
      // 捕获并显示执行错误
      if (error.message !== '执行已取消') {
        const errorMsg = error.message || '未知错误';
        showGameMessage(`代码执行错误: ${errorMsg}`, 'error');
        console.error('代码执行错误:', error);
      }
    } finally {
      // 清除当前执行的Promise引用
      currentExecutionPromise = null;
    }
  } catch (error) {
    showGameMessage(`运行时错误: ${error.message || '未知错误'}`, 'error');
    console.error('运行时错误:', error);
  }
};

// 清空工作区
const clearWorkspace = () => {
  workspace.clear();
  showGameMessage('工作区已清空', 'info');
};

// 重置玩家位置和状态
const resetPlayer = () => {
  // 设置标志强制停止所有执行
  shouldStopExecution = true;

  // 取消任何正在执行的代码
  if (executionAbortController) {
    executionAbortController.abort();
    executionAbortController = null;
  }

  if (currentExecutionPromise) {
    currentExecutionPromise = null;
  }

  // 重置携带的物品回地图
  if (gameState.mapData.originalWalkablePoints.length > 0) {
    gameState.mapData.walkablePoints = JSON.parse(JSON.stringify(gameState.mapData.originalWalkablePoints));
  }
  // 清空携带物品
  gameState.player.carriedItems = [];
  // 重新初始化可行走点集合
  initWalkablePointsSet();

  gameState.player.position = { ...startPoint.value };
  gameState.player.direction = playerInitialDirection.value; // 重置为初始方向
  gameState.player.isColliding = false; //碰撞标志
  gameState.player.hasReachedEnd = false;
  gameState.player.isSliding = false; // 重置滑行状态
};

// 更新地图容器尺寸的函数
function updateMapContainerDimensions() {
  const mapContainer = document.querySelector('.map-container');
  if (mapContainer) {
    const rect = mapContainer.getBoundingClientRect();
    // 确保获取到有效的尺寸值
    if (rect.width > 0 && rect.height > 0) {
      mapContainerDimensions.value = {
        width: rect.width,
        height: rect.height
      };
    } else {
      // 若尺寸无效，使用默认容器尺寸（可根据实际情况调整）
      mapContainerDimensions.value = {
        width: 800,
        height: 600
      };
    }
  }
};


// 显示游戏消息
function showGameMessage(message, type = 'info', duration = CONFIG.DELAY.MESSAGE_DISPLAY) {
  gameState.status.message = message;
  gameState.status.messageType = type;

  // 消息显示时间后自动清除消息
  setTimeout(() => {
    gameState.status.message = '';
  }, duration);
}

// 统一处理撞到墙时的停止逻辑
async function handleWallCollision() {
  // 设置碰撞状态
  gameState.player.isColliding = true;
  // 显示错误消息
  showGameMessage(CONFIG.TIPS.NO_ENTRY, 'error');

  // 立即中止整个代码执行
  if (executionAbortController) {
    executionAbortController.abort();
  }

  // 碰撞状态重置时间后取消碰撞状态
  setTimeout(() => {
    gameState.player.isColliding = false;
  }, CONFIG.DELAY.COLLISION_RESET);

  // 返回一个Promise，允许调用者等待碰撞延迟
  return new Promise(resolve => setTimeout(resolve, CONFIG.DELAY.COLLISION_DELAY));
}

// 组件卸载时清理
onUnmounted(() => {
  if (workspace) {
    workspace.dispose();
  }
  window.removeEventListener('resize', updateMapContainerDimensions);
});

</script>

<style scoped lang="scss">
@use "sass:math";

@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}

//将tileSize属性绑定到CSS变量上
:root {
  --tile-size: v-bind('tileSize + "px"');
}

.map-game-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  overflow-y: auto;
}

/* 自定义滚动条样式 */
.map-game-container::-webkit-scrollbar {
  width: rpx(2); /* 滚动条宽度 */
}

.map-game-container::-webkit-scrollbar-track {
  background: #f1effd; /* 滚动条轨道背景色 */
  border-radius: rpx(4);
}

.map-game-container::-webkit-scrollbar-thumb {
  background: #e2ddfc; /* 滚动条滑块颜色 */
  border-radius: rpx(4);
}

.map-game-container::-webkit-scrollbar-thumb:hover {
  background: #e2ddfc; /* 滚动条滑块 hover 状态颜色 */
}

/* 游戏简介样式 */
.info-message-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.message-item {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin-bottom: rpx(5);
}
/* 头像样式 */
.avatar {
  margin-right: rpx(4);
  flex-shrink: 0;
}
.avatar-image {
  width: rpx(30);
  height: rpx(30);
  object-fit: cover;
}
/* 消息内容样式 */
.message-item {
  flex: 1;
}
.message-item p {
  margin: rpx(4) 0;
  line-height: 1.6;
  font-size: rpx(7);
  text-align: left;
  color: black;
  background-color: #e6faff;
  opacity: 0.8;
  border-radius: rpx(4);
  padding: rpx(6);
  max-width: 100%;
}
.message-item p:first-child {
  margin-top: 0;
  font-weight: 500;
}
.message-item p:last-child {
  margin-bottom: 0;
}

.title-box {
  position: relative;
  top: rpx(5);
  padding-left: 15px;
  z-index: 10;
  display: flex;
  flex-direction: column;
}

/* 右侧两个角为圆角的长方形格子样式 */
.game-badge {
  width: rpx(80);
  height: rpx(20);
  margin-left: rpx(10);
  background-color: #5fb5dc;
  color: #fff;
  border-radius: 0 rpx(20) rpx(20) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: rpx(15);
  font-weight: bold;
}

.box-icon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 30px;
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 16px;
  color: #333;
  font-weight: 500;
  width: fit-content;
}

.box-icon:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: translate(-3px);
}

.left-icon {
  font-size: 18px;
}

.content {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  padding: 20px;
  min-width: 1160px;
}

/* 地图区域样式 */
.map-section {
  flex: 1;
  min-width: 500px;
  background: rgba(248, 249, 250, 0.82);
  padding: 15px;
  border-radius: 15px;
}

.map-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; // 防止内容溢出
}

.map-background {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.map-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 可行走区域样式 */
.walkable-point {
  position: absolute;
  //background-color: rgba(52, 152, 219, 0.2);
  //border: 1px solid rgba(52, 152, 219, 0.5);
  //box-sizing: border-box;
  //是否显示可行路线
  opacity: 1;
}

/* 玩家样式 */
.player {
  position: absolute;
  background-image: var(--player-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 5px;
  z-index: 10;
}

/* 碰撞动画 */
.player.collision {
  animation: collision 0.5s ease-in-out;
}

@keyframes collision {
  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); }
}

/* 滑行动画 */
@keyframes sliding {
  0% { transform: rotate(var(--player-rotation)) translateX(0) translateY(0); }
  25% { transform: rotate(var(--player-rotation)) translateX(2px) translateY(0); }
  75% { transform: rotate(var(--player-rotation)) translateX(-2px) translateY(0); }
  100% { transform: rotate(var(--player-rotation)) translateX(0) translateY(0); }
}

/* 携带物品容器 */
.carried-items-container {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #3498db;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  gap: 10px;
  z-index: 15;
  backdrop-filter: blur(10px);
}

/* 成功到达终点动画 */
.player.success {
  animation: success 1s ease-in-out;
}

@keyframes success {
  0% { transform: rotate(var(--player-rotation)) scale(1); }
  10% { transform: rotate(var(--player-rotation)) scale(1.2) translateX(-5px) translateY(-5px); }
  20% { transform: rotate(var(--player-rotation)) scale(1.3) translateX(5px) translateY(5px); }
  30% { transform: rotate(var(--player-rotation)) scale(1.2) translateX(-5px) translateY(-5px); }
  40% { transform: rotate(var(--player-rotation)) scale(1.3) translateX(5px) translateY(5px); }
  50% { transform: rotate(var(--player-rotation)) scale(1.4) translateX(0) translateY(0); }
  60% { transform: rotate(var(--player-rotation)) scale(1.3) translateX(-3px) translateY(-3px); }
  70% { transform: rotate(var(--player-rotation)) scale(1.2) translateX(3px) translateY(3px); }
  80% { transform: rotate(var(--player-rotation)) scale(1.3) translateX(-3px) translateY(-3px); }
  90% { transform: rotate(var(--player-rotation)) scale(1.2) translateX(3px) translateY(3px); }
  100% { transform: rotate(var(--player-rotation)) scale(1); }
}

/* 游戏消息样式 */
.game-message {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  z-index: 20;
  min-width: 200px;
  text-align: center;
}

.game-message.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.game-message.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.game-message.info {
  background-color: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

.game-message.warning {
  background-color: #baeff8;
  color: #035767;
  border: 1px solid #9be9f6;
}

/* Blockly区域样式 */
.blockly-section {
  flex: 1;
  min-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

// 合并重复的区块样式
.map-section, .toolbox-section, .workspace-section {
  background: rgba(248, 249, 250, 0.82);
  padding: 15px;
  border-radius: 15px;
  height: 100%;
}

.map-section h2, .toolbox-section h2, .workspace-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;
}

#blocklyDiv {
  height: rpx(300);
  // min-height: 500px;
  width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.controls {
  display: flex;
  gap: 10px;
  margin: 15px 0px;
  flex-wrap: wrap;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background: #3498db;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  background: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

#runCode {
  background: #e74c3c;
}

#runCode:hover {
  background: #c0392b;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .map-section,
  .blockly-section {
    flex: 1;
    min-width: 45%;
  }

  .map-background {
    width: 100%;
    height: 400px;
  }
}
</style>