|
|
@@ -0,0 +1,2166 @@
|
|
|
+<template>
|
|
|
+ <div class="title-box">
|
|
|
+ <!-- 左侧标题部分 -->
|
|
|
+ <div class="left-container">
|
|
|
+ <!-- 游戏编号 -->
|
|
|
+ <div class="game-badge">{{ gameSort }}</div>
|
|
|
+ </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_boolean"></block>
|
|
|
+ </category>
|
|
|
+
|
|
|
+ <!-- 循环控制积木 -->
|
|
|
+ <category name="循环" colour="%{BKY_LOOPS_HUE}">
|
|
|
+ <block type="controls_repeat_ext"></block>
|
|
|
+ <!-- <blockly type="controls_whileUntil"></blockly>-->
|
|
|
+ </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>
|
|
|
+</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';
|
|
|
+
|
|
|
+// 定义组件属性
|
|
|
+const props = defineProps({
|
|
|
+ // 游戏ID
|
|
|
+ gameId: {
|
|
|
+ type: [String, Number],
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ // 地图背景
|
|
|
+ mapBackground: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ // 地图瓦片大小
|
|
|
+ mapTileSize: {
|
|
|
+ type: [String, Object],
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ // 地图起点
|
|
|
+ mapStartPoint: {
|
|
|
+ type: [String, Object],
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ // 地图终点
|
|
|
+ mapEndPoint: {
|
|
|
+ type: [String, Object],
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ // 可行走点
|
|
|
+ mapWalkablePoints: {
|
|
|
+ type: [String, Array],
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ // 用户方向
|
|
|
+ userDirection: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ // 用户图片
|
|
|
+ userImage: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ // 游戏信息
|
|
|
+ info: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ // 游戏标题
|
|
|
+ gameTitle: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ // 课程列表
|
|
|
+ courseList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ // 当前课程索引
|
|
|
+ currentIndex: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+// 游戏接口数据
|
|
|
+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: 2000, // 消息显示时间
|
|
|
+ COLLISION_RESET: 1000, // 碰撞状态重置时间
|
|
|
+ LOOP_PREVENTION: 10, // 循环防止UI阻塞的延迟
|
|
|
+ ITEMS_APPEAR: 300, // 物品出现延迟时间
|
|
|
+ ITEMS_FLIGHT_ANIMATION_DELAY: 800, // 飞行动画延迟时间
|
|
|
+ },
|
|
|
+ // 游戏配置
|
|
|
+ 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: '当前位置无通路，无法移动',
|
|
|
+ UNFINISHED: '任务未完成！',
|
|
|
+ FINISH: '恭喜你到达终点！',
|
|
|
+ PICKUP_ITEM: '拾取物品成功！',
|
|
|
+ NULL_PICKUP_ITEM: '当前位置没有可拾取的物品',
|
|
|
+ USE_ITEM_SUCCESS: '使用物品成功',
|
|
|
+ USE_SPECIAL_ITEM: '需要特殊物品才能使用',
|
|
|
+ NO_USE_ITEM: '当前位置不需要使用物品',
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 路由和游戏状态
|
|
|
+const route = useRoute();
|
|
|
+const gameTitle = computed(() => props.gameTitle);
|
|
|
+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',//冰块
|
|
|
+ TASK: 'task',//钥匙
|
|
|
+ ITEM: 'item',//物品
|
|
|
+ TRAP: 'trap',//陷阱
|
|
|
+
|
|
|
+};
|
|
|
+
|
|
|
+// 计算属性 - 提高性能和可读性
|
|
|
+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;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取地图数据中的最大坐标
|
|
|
+ let size = JSON.parse(gameState.mapConfig.tileSize);
|
|
|
+ // 计算基于容器的瓦片大小，确保地图完全可见
|
|
|
+ const tileWidth = mapContainerDimensions.value.width / size.x;
|
|
|
+ const tileHeight = mapContainerDimensions.value.height / size.y;
|
|
|
+
|
|
|
+ // 返回较小的值以确保地图完全可见
|
|
|
+ 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 {
|
|
|
+ // 优先使用props传递的数据
|
|
|
+ if (props.gameId && props.mapBackground) {
|
|
|
+ // 使用props数据构建游戏数据对象
|
|
|
+ currentGameData.value = {
|
|
|
+ mapBackground: props.mapBackground,
|
|
|
+ mapTileSize: props.mapTileSize,
|
|
|
+ mapStartPoint: props.mapStartPoint,
|
|
|
+ mapEndPoint: props.mapEndPoint,
|
|
|
+ mapWalkablePoints: props.mapWalkablePoints,
|
|
|
+ userDirection: props.userDirection,
|
|
|
+ userImage: props.userImage,
|
|
|
+ info: props.info
|
|
|
+ };
|
|
|
+
|
|
|
+ // 直接更新游戏状态
|
|
|
+ await updateGameStateFromData(currentGameData.value);
|
|
|
+
|
|
|
+ // 数据更新后强制刷新容器尺寸（等待DOM更新）
|
|
|
+ await nextTick();
|
|
|
+ updateMapContainerDimensions();
|
|
|
+ } else {
|
|
|
+ // 如果没有props数据，则从API获取
|
|
|
+ const gameId = route.query.gameId || props.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.5;
|
|
|
+
|
|
|
+ return {
|
|
|
+ position: 'relative',
|
|
|
+ width: baseSize + 'px',
|
|
|
+ height: baseSize + 'px',
|
|
|
+ backgroundSize: 'contain',
|
|
|
+ backgroundPosition: 'center',
|
|
|
+ backgroundRepeat: 'no-repeat',
|
|
|
+ backgroundImage: `url(${item.img})`,
|
|
|
+ animationDelay: index * 0.1 + 's'
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+// 注册自定义积木
|
|
|
+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(blockly, 'DO');
|
|
|
+ const branch = ""
|
|
|
+
|
|
|
+ // 生成支持异步的循环代码
|
|
|
+ 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(blockly) {
|
|
|
+ // const until = blockly.getFieldValue('MODE') === 'UNTIL';
|
|
|
+ // const condition = javascriptGenerator.valueToCode(blockly, 'CONDITION',
|
|
|
+ // javascriptGenerator.ORDER_NONE) || 'false';
|
|
|
+ // const branch = javascriptGenerator.statementToCode(blockly, '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;
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+const setupBlocklyChineseLocale = () => {
|
|
|
+ // 覆盖默认的英文文本为中文
|
|
|
+ if (!Blockly.Msg) Blockly.Msg = {};
|
|
|
+
|
|
|
+ // 逻辑积木中文配置
|
|
|
+ Blockly.Msg.CONTROLS_IF_MSG_IF = "如果";
|
|
|
+ Blockly.Msg.CONTROLS_IF_MSG_ELSEIF = "否则如果";
|
|
|
+ Blockly.Msg.CONTROLS_IF_MSG_ELSE = "否则";
|
|
|
+ Blockly.Msg.CONTROLS_IF_MSG_DO = "执行"; // 添加这行将'do'转换为中文
|
|
|
+ Blockly.Msg.CONTROLS_IF_TOOLTIP_1 = "如果条件为真，则执行相应的代码。";
|
|
|
+ Blockly.Msg.CONTROLS_IF_TOOLTIP_2 = "如果条件为真，则执行相应的代码；否则执行其他代码。";
|
|
|
+ Blockly.Msg.CONTROLS_IF_TOOLTIP_3 = "如果条件为真，则执行相应的代码；否则检查其他条件。";
|
|
|
+
|
|
|
+ // 添加设置按钮相关的中文配置
|
|
|
+ Blockly.Msg.CONTROLS_IF_ELSEIF_TOOLTIP = "否则如果条件为真，则执行相应的代码。";
|
|
|
+ Blockly.Msg.CONTROLS_IF_ELSE_TOOLTIP = "否则执行相应的代码。";
|
|
|
+
|
|
|
+ // 打开/关闭块的提示文本
|
|
|
+ Blockly.Msg.CONTROLS_IF_TOOLTIP_IF = "添加或删除条件。";
|
|
|
+ Blockly.Msg.CONTROLS_IF_TOOLTIP_ELSE = "添加或删除否则块。";
|
|
|
+
|
|
|
+
|
|
|
+ // 比较运算符中文配置 - 添加显示文本
|
|
|
+ Blockly.Msg.LOGIC_COMPARE_EQ = "等于";
|
|
|
+ Blockly.Msg.LOGIC_COMPARE_NEQ = "不等于";
|
|
|
+ Blockly.Msg.LOGIC_COMPARE_LT = "小于";
|
|
|
+ Blockly.Msg.LOGIC_COMPARE_LTE = "小于等于";
|
|
|
+ Blockly.Msg.LOGIC_COMPARE_GT = "大于";
|
|
|
+ Blockly.Msg.LOGIC_COMPARE_GTE = "大于等于";
|
|
|
+
|
|
|
+ // 比较运算符提示文本（已存在）
|
|
|
+ Blockly.Msg.LOGIC_COMPARE_TOOLTIP_EQ = "比较两个值是否相等。";
|
|
|
+ Blockly.Msg.LOGIC_COMPARE_TOOLTIP_NEQ = "比较两个值是否不相等。";
|
|
|
+ Blockly.Msg.LOGIC_COMPARE_TOOLTIP_LT = "比较第一个值是否小于第二个值。";
|
|
|
+ Blockly.Msg.LOGIC_COMPARE_TOOLTIP_LTE = "比较第一个值是否小于或等于第二个值。";
|
|
|
+ Blockly.Msg.LOGIC_COMPARE_TOOLTIP_GT = "比较第一个值是否大于第二个值。";
|
|
|
+ Blockly.Msg.LOGIC_COMPARE_TOOLTIP_GTE = "比较第一个值是否大于或等于第二个值。";
|
|
|
+
|
|
|
+ // 逻辑运算中文配置 - 添加显示文本
|
|
|
+ Blockly.Msg.LOGIC_OPERATION_AND = "且";
|
|
|
+ Blockly.Msg.LOGIC_OPERATION_OR = "或";
|
|
|
+
|
|
|
+ // 逻辑运算提示文本（已存在）
|
|
|
+ Blockly.Msg.LOGIC_OPERATION_TOOLTIP_AND = "如果两个条件都为真，则结果为真。";
|
|
|
+ Blockly.Msg.LOGIC_OPERATION_TOOLTIP_OR = "如果任一条件为真，则结果为真。";
|
|
|
+
|
|
|
+ // 布尔值配置
|
|
|
+ Blockly.Msg.LOGIC_BOOLEAN_TRUE = "真";
|
|
|
+ Blockly.Msg.LOGIC_BOOLEAN_FALSE = "假";
|
|
|
+ Blockly.Msg.LOGIC_BOOLEAN_TOOLTIP = "返回一个布尔值：真或假。";
|
|
|
+
|
|
|
+ // 循环积木中文配置（保持不变）
|
|
|
+ Blockly.Msg.CONTROLS_REPEAT_TITLE = "重复%1次";
|
|
|
+ Blockly.Msg.CONTROLS_REPEAT_TOOLTIP = "重复执行内部代码指定次数。";
|
|
|
+ // Blockly.Msg.CONTROLS_WHILEUNTIL_TITLE_WHILE = "当%1时重复";
|
|
|
+ // Blockly.Msg.CONTROLS_WHILEUNTIL_TITLE_UNTIL = "重复直到%1";
|
|
|
+ // Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_WHILE = "只要条件为真，就重复执行内部代码。";
|
|
|
+ // Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_UNTIL = "重复执行内部代码，直到条件变为真。";
|
|
|
+
|
|
|
+ // 数学积木中文配置（保持不变）
|
|
|
+ Blockly.Msg.MATH_NUMBER_TOOLTIP = "一个数字。在编辑器中双击以更改。";
|
|
|
+ Blockly.Msg.MATH_ADDITION_SYMBOL = "加";
|
|
|
+ Blockly.Msg.MATH_SUBTRACTION_SYMBOL = "减";
|
|
|
+ Blockly.Msg.MATH_MULTIPLICATION_SYMBOL = "乘";
|
|
|
+ Blockly.Msg.MATH_DIVISION_SYMBOL = "除";
|
|
|
+ Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_ADD = "返回两个数的和。";
|
|
|
+ Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_SUBTRACT = "返回第一个数减去第二个数的差。";
|
|
|
+ Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MULTIPLY = "返回两个数的积。";
|
|
|
+ Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_DIVIDE = "返回第一个数除以第二个数的商。";
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// 初始化Blockly工作区
|
|
|
+function initBlockly() {
|
|
|
+ // 应用中文配置
|
|
|
+ setupBlocklyChineseLocale();
|
|
|
+
|
|
|
+ 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(type, isMapType = null) {
|
|
|
+ //取人物当前位置
|
|
|
+ let x = playerPosition.value.x;
|
|
|
+ let y = playerPosition.value.y;
|
|
|
+ let tileMap = walkablePointsMap.get(`${x},${y}`);
|
|
|
+
|
|
|
+ //判断是否是指定地图类型
|
|
|
+ if (isMapType) {
|
|
|
+ return isMapType === tileMap.type;
|
|
|
+ }
|
|
|
+
|
|
|
+ //移动前置
|
|
|
+ if (type === 0) {
|
|
|
+ //判断方块类型并处理逻辑
|
|
|
+ switch (tileMap.type) {
|
|
|
+ case BLOCKLY_MAP_TYPE_DICT.TASK:
|
|
|
+ await taskLogic(tileMap);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ }else {//移动后置
|
|
|
+
|
|
|
+ //判断方块类型并处理逻辑
|
|
|
+ switch (tileMap.type) {
|
|
|
+ case BLOCKLY_MAP_TYPE_DICT.ICE:
|
|
|
+ do {
|
|
|
+
|
|
|
+ showGameMessage(tileMap.tip, 'warning',300)
|
|
|
+
|
|
|
+
|
|
|
+ // 处理方块类型逻辑
|
|
|
+ await switchMapType(0);
|
|
|
+
|
|
|
+ console.log("滑行前位置：" + playerPosition.value.x + "," + playerPosition.value.y);
|
|
|
+ await slidingLogic();
|
|
|
+
|
|
|
+ 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.TRAP:
|
|
|
+ showGameMessage(tileMap.tip, 'error')
|
|
|
+ await handleWallCollision(tileMap.tip);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 处理冰块滑行逻辑
|
|
|
+async function slidingLogic() {
|
|
|
+ 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 {
|
|
|
+ // 使用统一的碰撞处理方法，但不等待延迟（因为slidingLogic不需要这个延迟）
|
|
|
+ await handleWallCollision();
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('滑行过程中发生错误:', error);
|
|
|
+ } finally {
|
|
|
+ // 无论如何都要确保滑行状态被重置
|
|
|
+ gameState.player.isSliding = false;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 处理任务逻辑
|
|
|
+async function taskLogic(tileMap) {
|
|
|
+ if (shouldStopExecution || isColliding.value) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 判断当前位置是否有特殊需求
|
|
|
+ if (tileMap && tileMap.type === BLOCKLY_MAP_TYPE_DICT.TASK && tileMap.must === true && tileMap.status !== true) {
|
|
|
+ await handleWallCollision(tileMap.unfinishedTip);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('处理任务逻辑发生错误:', error);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 物品拾取动画函数
|
|
|
+async function animateItemPickup(item, itemX, itemY) {
|
|
|
+ // 创建临时动画元素
|
|
|
+ const tempItem = document.createElement('div');
|
|
|
+ const iconSize = tileSize.value * CONFIG.STYLES.PLAYER_SIZE_RATIO;
|
|
|
+ const marginSize = tileSize.value * CONFIG.STYLES.PLAYER_SIZE_MARGIN;
|
|
|
+
|
|
|
+ // 计算物品在地图上的实际位置
|
|
|
+ const itemLeft = itemX * tileSize.value - tileSize.value + marginSize;
|
|
|
+ const itemTop = itemY * tileSize.value - tileSize.value + marginSize;
|
|
|
+
|
|
|
+ // 平行移动到容器位置，同时调整大小
|
|
|
+ const finalSize = tileSize.value * CONFIG.STYLES.PLAYER_SIZE_RATIO * 0.3;
|
|
|
+
|
|
|
+ // 获取携带物品容器的位置（左上角）
|
|
|
+ // 注意：这里不需要考虑当前已携带物品数量，因为物品还没被添加
|
|
|
+ let containerLeft = 30;
|
|
|
+ let containerTop = 30;
|
|
|
+
|
|
|
+ // 如果已经有物品，计算新物品应该出现的位置
|
|
|
+ if (gameState.player.carriedItems.length > 0) {
|
|
|
+ let containerSize = finalSize + 10;
|
|
|
+ containerLeft = 30 + gameState.player.carriedItems.length * containerSize;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设置临时元素样式
|
|
|
+ Object.assign(tempItem.style, {
|
|
|
+ position: 'absolute',
|
|
|
+ left: itemLeft + 'px',
|
|
|
+ top: itemTop + 'px',
|
|
|
+ width: iconSize + 'px',
|
|
|
+ height: iconSize + 'px',
|
|
|
+ backgroundImage: `url(${item.img})`,
|
|
|
+ backgroundSize: 'contain',
|
|
|
+ backgroundPosition: 'center',
|
|
|
+ backgroundRepeat: 'no-repeat',
|
|
|
+ zIndex: '100', // 确保在最上层
|
|
|
+ opacity: '0', // 初始完全透明
|
|
|
+ transform: 'scale(1)',
|
|
|
+ });
|
|
|
+
|
|
|
+ // 将临时元素添加到地图容器
|
|
|
+ const mapBackground = document.querySelector('.map-background');
|
|
|
+ if (!mapBackground) {
|
|
|
+ console.error('地图容器未找到');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ mapBackground.appendChild(tempItem);
|
|
|
+
|
|
|
+ // 触发淡入动画
|
|
|
+ tempItem.offsetHeight;
|
|
|
+ tempItem.style.transition = 'opacity ' + CONFIG.DELAY.ITEMS_APPEAR + 'ms ease-out';
|
|
|
+ tempItem.style.opacity = '1'; // 完全显示
|
|
|
+ await new Promise(resolve => setTimeout(resolve, CONFIG.DELAY.ITEMS_APPEAR));
|
|
|
+
|
|
|
+ // 移动动画
|
|
|
+ tempItem.style.transition = 'all ' + CONFIG.DELAY.ITEMS_FLIGHT_ANIMATION_DELAY + 'ms ease-out'; // 减慢动画速度
|
|
|
+ Object.assign(tempItem.style, {
|
|
|
+ left: containerLeft + 'px',
|
|
|
+ top: containerTop + 'px',
|
|
|
+ width: finalSize + 'px',
|
|
|
+ height: finalSize + 'px',
|
|
|
+ opacity: '0.8',
|
|
|
+ transform: 'scale(1)',
|
|
|
+ });
|
|
|
+
|
|
|
+ // 等待动画完成
|
|
|
+ await new Promise(resolve => setTimeout(resolve, CONFIG.DELAY.ITEMS_FLIGHT_ANIMATION_DELAY));
|
|
|
+
|
|
|
+ // 移除临时元素
|
|
|
+ if (mapBackground.contains(tempItem)) {
|
|
|
+ mapBackground.removeChild(tempItem);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 物品使用动画函数
|
|
|
+async function animateItemUse(item, itemIndex) {
|
|
|
+ // 创建临时动画元素
|
|
|
+ const tempItem = document.createElement('div');
|
|
|
+ const finalSize = tileSize.value * CONFIG.STYLES.PLAYER_SIZE_RATIO * 0.3;
|
|
|
+ const iconSize = tileSize.value * CONFIG.STYLES.PLAYER_SIZE_RATIO;
|
|
|
+ const marginSize = tileSize.value * CONFIG.STYLES.PLAYER_SIZE_MARGIN;
|
|
|
+
|
|
|
+ // 计算物品在物品栏中的初始位置
|
|
|
+ let startLeft = 30;
|
|
|
+ let startTop = 30;
|
|
|
+ let containerSize = finalSize + 10;
|
|
|
+
|
|
|
+ // 根据物品索引计算在物品栏中的位置
|
|
|
+ if (itemIndex > 0) {
|
|
|
+ startLeft = 30 + itemIndex * containerSize;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 计算玩家当前位置（物品目标位置）
|
|
|
+ const playerLeft = playerPosition.value.x * tileSize.value - tileSize.value + marginSize;
|
|
|
+ const playerTop = playerPosition.value.y * tileSize.value - tileSize.value + marginSize;
|
|
|
+
|
|
|
+ // 获取玩家元素
|
|
|
+ const playerElement = document.querySelector('.player');
|
|
|
+ const originalPlayerZIndex = playerElement ? playerElement.style.zIndex : '';
|
|
|
+
|
|
|
+ // 获取当前位置的任务点元素
|
|
|
+ let taskPointElement = null;
|
|
|
+ const walkablePointsElements = document.querySelectorAll('.walkable-point');
|
|
|
+ walkablePointsElements.forEach(el => {
|
|
|
+ const rect = el.getBoundingClientRect();
|
|
|
+ const targetRect = {
|
|
|
+ left: playerLeft,
|
|
|
+ top: playerTop,
|
|
|
+ width: iconSize,
|
|
|
+ height: iconSize
|
|
|
+ };
|
|
|
+ // 简单判断元素是否在玩家位置附近
|
|
|
+ if (Math.abs(rect.left - targetRect.left) < iconSize &&
|
|
|
+ Math.abs(rect.top - targetRect.top) < iconSize) {
|
|
|
+ taskPointElement = el;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 先将任务图标置顶盖住人物
|
|
|
+ if (taskPointElement) {
|
|
|
+ taskPointElement.style.zIndex = '150';
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设置临时元素初始样式
|
|
|
+ Object.assign(tempItem.style, {
|
|
|
+ position: 'absolute',
|
|
|
+ left: startLeft + 'px',
|
|
|
+ top: startTop + 'px',
|
|
|
+ width: finalSize + 'px',
|
|
|
+ height: finalSize + 'px',
|
|
|
+ backgroundImage: `url(${item.img})`,
|
|
|
+ backgroundSize: 'contain',
|
|
|
+ backgroundPosition: 'center',
|
|
|
+ backgroundRepeat: 'no-repeat',
|
|
|
+ zIndex: '120',
|
|
|
+ transition: 'transform ' + CONFIG.DELAY.ITEMS_APPEAR + 'ms ease-out',
|
|
|
+ transform: 'scale(1)',
|
|
|
+ });
|
|
|
+
|
|
|
+ // 将临时元素添加到地图容器
|
|
|
+ const mapBackground = document.querySelector('.map-background');
|
|
|
+ if (!mapBackground) {
|
|
|
+ console.error('地图容器未找到');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ mapBackground.appendChild(tempItem);
|
|
|
+
|
|
|
+ // 准备漂移动画
|
|
|
+ await new Promise(resolve => setTimeout(resolve, CONFIG.DELAY.ITEMS_APPEAR));
|
|
|
+
|
|
|
+ // 设置漂移动画样式
|
|
|
+ tempItem.style.transition = 'all 1s ease-out';
|
|
|
+ Object.assign(tempItem.style, {
|
|
|
+ left: playerLeft + 'px',
|
|
|
+ top: playerTop + 'px',
|
|
|
+ width: iconSize + 'px',
|
|
|
+ height: iconSize + 'px',
|
|
|
+ });
|
|
|
+
|
|
|
+ // 等待漂移到玩家位置
|
|
|
+ await new Promise(resolve => setTimeout(resolve, CONFIG.DELAY.ITEMS_FLIGHT_ANIMATION_DELAY));
|
|
|
+
|
|
|
+ // 物品使用效果动画
|
|
|
+ tempItem.style.transition = 'transform 0.3s ease-in-out';
|
|
|
+ tempItem.style.transform = 'scale(1.2)';
|
|
|
+
|
|
|
+ await new Promise(resolve => setTimeout(resolve, CONFIG.DELAY.ITEMS_APPEAR));
|
|
|
+
|
|
|
+ // 移除临时元素
|
|
|
+ if (mapBackground.contains(tempItem)) {
|
|
|
+ mapBackground.removeChild(tempItem);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 延迟一段时间后将人物图标置顶，露出完整的人物图标
|
|
|
+ await new Promise(resolve => setTimeout(resolve, CONFIG.DELAY.ITEMS_APPEAR));
|
|
|
+
|
|
|
+ // 恢复层级关系
|
|
|
+ if (taskPointElement) {
|
|
|
+ taskPointElement.style.zIndex = '';
|
|
|
+ }
|
|
|
+
|
|
|
+ if (playerElement) {
|
|
|
+ playerElement.style.zIndex = originalPlayerZIndex || '';
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 拾取物品函数
|
|
|
+window.pickupItem = async function() {
|
|
|
+ if (shouldStopExecution || isColliding.value || isSliding.value) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ //取人物当前位置
|
|
|
+ let x = playerPosition.value.x;
|
|
|
+ let y = playerPosition.value.y;
|
|
|
+ let tileMap = walkablePointsMap.get(`${x},${y}`);
|
|
|
+
|
|
|
+ // 判断是否是要拾取的方块类型
|
|
|
+ if (tileMap && tileMap.type === BLOCKLY_MAP_TYPE_DICT.ITEM) {
|
|
|
+ showGameMessage(tileMap.tip || CONFIG.TIPS.PICKUP_ITEM, 'warning')
|
|
|
+
|
|
|
+ // 处理携带物品逻辑
|
|
|
+ if (tileMap && tileMap.img) {
|
|
|
+
|
|
|
+ // 从地图上移除图标（但保留点的可通行性）
|
|
|
+ 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);
|
|
|
+
|
|
|
+ // 执行物品拾取动画：放大晃动两下然后移动到左上角物品容器
|
|
|
+ await animateItemPickup(tileMap, x, y);
|
|
|
+
|
|
|
+ // 将物品添加到玩家携带物品中
|
|
|
+ gameState.player.carriedItems.push({
|
|
|
+ ...tileMap,
|
|
|
+ originalX: x,
|
|
|
+ originalY: y
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ showGameMessage(CONFIG.TIPS.NULL_PICKUP_ITEM, 'info')
|
|
|
+ }
|
|
|
+
|
|
|
+ await new Promise(resolve => setTimeout(resolve, CONFIG.DELAY.ACTION_DELAY));
|
|
|
+}
|
|
|
+
|
|
|
+// 使用物品函数
|
|
|
+window.useItem = async function() {
|
|
|
+ if (shouldStopExecution || isColliding.value || isSliding.value) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ //取人物当前位置
|
|
|
+ let x = playerPosition.value.x;
|
|
|
+ let y = playerPosition.value.y;
|
|
|
+ let tileMap = walkablePointsMap.get(`${x},${y}`);
|
|
|
+
|
|
|
+ // 判断当前位置是否有特殊需求
|
|
|
+ if (tileMap && tileMap.type === BLOCKLY_MAP_TYPE_DICT.TASK) {
|
|
|
+ // 检查玩家是否携带了需要的物品
|
|
|
+ const requiredItems = tileMap.type;
|
|
|
+
|
|
|
+ let hasRequiredItem = false;
|
|
|
+ let itemIndex = -1;
|
|
|
+
|
|
|
+ if (gameState.player.carriedItems.length > 0) {
|
|
|
+ hasRequiredItem = true;
|
|
|
+ itemIndex = 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (hasRequiredItem) {
|
|
|
+
|
|
|
+ // 获取要使用的物品
|
|
|
+ const itemToUse = gameState.player.carriedItems[itemIndex];
|
|
|
+ // 执行物品使用动画
|
|
|
+ await animateItemUse(itemToUse, itemIndex);
|
|
|
+ // 从携带物品中移除已使用的物品
|
|
|
+ gameState.player.carriedItems.splice(itemIndex, 1);
|
|
|
+
|
|
|
+ // 从地图上移除图标（但保留点的可通行性）
|
|
|
+ const pointIndex = gameState.mapData.walkablePoints.findIndex(
|
|
|
+ p => p.x === x && p.y === y
|
|
|
+ );
|
|
|
+ if (pointIndex !== -1) {
|
|
|
+
|
|
|
+ // 保留点但移除img属性并设置完成状态图标
|
|
|
+ const updatedPoint = { ...gameState.mapData.walkablePoints[pointIndex] };
|
|
|
+ updatedPoint.img = updatedPoint.endImg; // 设置完成状态图标
|
|
|
+ updatedPoint.status = true;
|
|
|
+ gameState.mapData.walkablePoints.splice(pointIndex, 1, updatedPoint);
|
|
|
+
|
|
|
+ // 更新映射
|
|
|
+ walkablePointsMap.set(`${x},${y}`, updatedPoint);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 使用物品成功
|
|
|
+ showGameMessage(tileMap.finishedTip || CONFIG.TIPS.USE_ITEM_SUCCESS, 'success');
|
|
|
+
|
|
|
+ } else {
|
|
|
+ // 提示缺少所需物品
|
|
|
+ showGameMessage(tileMap.unfinishedTip || CONFIG.TIPS.USE_SPECIAL_ITEM, 'warning');
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ showGameMessage(CONFIG.TIPS.NO_USE_ITEM, 'info');
|
|
|
+ }
|
|
|
+
|
|
|
+ await new Promise(resolve => setTimeout(resolve, CONFIG.DELAY.ACTION_DELAY));
|
|
|
+}
|
|
|
+
|
|
|
+// 向前移动
|
|
|
+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 switchMapType(0);
|
|
|
+
|
|
|
+ // 使用平滑移动动画
|
|
|
+ await smoothMoveTo(newX, newY);
|
|
|
+
|
|
|
+ // 处理方块类型逻辑
|
|
|
+ await switchMapType(1);
|
|
|
+
|
|
|
+ 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) {
|
|
|
+
|
|
|
+ //检查是否有未完成的任务点
|
|
|
+ const pointIndex = gameState.mapData.walkablePoints.findIndex(
|
|
|
+ p => p.type === BLOCKLY_MAP_TYPE_DICT.TASK && p.status !== true
|
|
|
+ );
|
|
|
+ if (pointIndex !== -1) {
|
|
|
+ showGameMessage(CONFIG.TIPS.UNFINISHED, 'error');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ 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(endMsg = CONFIG.TIPS.NO_ENTRY) {
|
|
|
+ // 设置碰撞状态
|
|
|
+ gameState.player.isColliding = true;
|
|
|
+ // 显示错误消息
|
|
|
+ showGameMessage(endMsg, 'error');
|
|
|
+
|
|
|
+ // 立即中止整个代码执行
|
|
|
+ if (executionAbortController) {
|
|
|
+ executionAbortController.abort();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 所有动画和移动操作立即停止
|
|
|
+ shouldStopExecution = true;
|
|
|
+
|
|
|
+ // 碰撞状态重置时间后取消碰撞状态
|
|
|
+ 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;
|
|
|
+ background-image: url('@/assets/programming/list_bg03.png');
|
|
|
+}
|
|
|
+
|
|
|
+/* 自定义滚动条样式 */
|
|
|
+.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;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+/* 左侧容器样式 */
|
|
|
+.left-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 右侧两个角为圆角的长方形格子样式 */
|
|
|
+.game-badge {
|
|
|
+ width: rpx(80);
|
|
|
+ height: rpx(20);
|
|
|
+ margin-left: rpx(3);
|
|
|
+ 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;
|
|
|
+}
|
|
|
+
|
|
|
+/* 右侧容器样式 */
|
|
|
+.right-container {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ padding-right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 上下节按钮样式 */
|
|
|
+.section-button {
|
|
|
+ padding: rpx(5) rpx(12);
|
|
|
+ border: none;
|
|
|
+ border-radius: rpx(10);
|
|
|
+ background: #3498db;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ font-size: rpx(7);
|
|
|
+}
|
|
|
+
|
|
|
+.section-button:hover {
|
|
|
+ background: #2980b9;
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+.previous-btn {
|
|
|
+ background-color: rgba(255, 255, 255, 0.8);
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+.previous-btn:hover {
|
|
|
+ background-color: rgba(255, 255, 255, 0.9);
|
|
|
+}
|
|
|
+.next-btn {
|
|
|
+ background: #5fb5dc;
|
|
|
+}
|
|
|
+.next-btn:hover {
|
|
|
+ background: #2980b9;
|
|
|
+}
|
|
|
+.box-icon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: rpx(5);
|
|
|
+ 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);
|
|
|
+ animation: fadeInScale 0.5s ease-out;
|
|
|
+}
|
|
|
+
|
|
|
+/* 淡入缩放动画 */
|
|
|
+@keyframes fadeInScale {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ transform: scale(0.5) translateY(-10px);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ transform: scale(1) translateY(0);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 携带物品样式 */
|
|
|
+.carried-item {
|
|
|
+ animation: bounceIn 0.3s ease-out forwards;
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 弹入动画 */
|
|
|
+@keyframes bounceIn {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ transform: scale(0.3) translateY(-20px);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ opacity: 0.7;
|
|
|
+ transform: scale(1.1) translateY(5px);
|
|
|
+ }
|
|
|
+ 80% {
|
|
|
+ opacity: 0.9;
|
|
|
+ transform: scale(0.95) translateY(-2px);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ transform: scale(1) translateY(0);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 成功到达终点动画 */
|
|
|
+.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(250);
|
|
|
+ // min-height: 500px;
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 优化Blockly积木样式 */
|
|
|
+/* 增加积木高度 */
|
|
|
+.blocklyBlockCanvas .blocklyBlock {
|
|
|
+ height: 45px; /* 增加默认高度 */
|
|
|
+ min-height: 45px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 增加积木内部元素的行高和间距 */
|
|
|
+.blocklyText {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+/* 增加输入字段的高度 */
|
|
|
+.blocklyHtmlInput {
|
|
|
+ height: 30px;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 增加下拉菜单的高度 */
|
|
|
+.blocklyDropdownMenu {
|
|
|
+ line-height: 28px;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 优化积木圆角和阴影效果 */
|
|
|
+.blocklyBlock {
|
|
|
+ border-radius: 8px;
|
|
|
+ filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
|
|
|
+}
|
|
|
+
|
|
|
+/* 增加积木之间的连接点间距 */
|
|
|
+.blocklyConnection {
|
|
|
+ height: 20px;
|
|
|
+ width: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 增加工具箱中积木的高度 */
|
|
|
+.blocklyTreeRow {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.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>
|
liyanbo