优化物品配置常量

src/components/blockly/MapGame.vue

@@ -286,9 +286,14 @@ const CONFIG = {
   STYLES: {
     DEFAULT_TILE_SIZE: 143,  // 默认瓦片大小
     PLAYER_SIZE_RATIO: 0.8,   // 玩家大小占瓦片的比例
-    PLAYER_SIZE_MARGIN: 0.1,   // 玩家大小占瓦片的比例
-    ITEM_CONTAINER_POSITION: { x: 30, y: 30 },
-    ITEM_CONTAINER_SPACING: 10
+    PLAYER_SIZE_MARGIN: 0.1,   // 玩家大小占瓦片边距
+
+    IMG_SIZE_RATIO: 0.8,   // 地图素材大小占瓦片的比例
+    IMG_SIZE_MARGIN: 0.1,   // 地图素材大小占瓦片边距
+
+    ITEM_CONTAINER_POSITION: { x: 30, y: 30 }, // 物品容器位置
+    ITEM_CONTAINER_RATIO: 0.4, // 物品大小占容器的比例
+    ITEM_CONTAINER_SPACING: 10 // 物品大小占容器的间距
   },
   //提示语
   TIPS: {
@@ -661,8 +666,8 @@ function getPointStyle(point) {
 
   // 如果point有img属性，则添加图标
   if (point.img) {
-    const iconSize = tileSize.value * CONFIG.STYLES.PLAYER_SIZE_RATIO;
-    const marginSize = tileSize.value * CONFIG.STYLES.PLAYER_SIZE_MARGIN;
+    const iconSize = tileSize.value * CONFIG.STYLES.IMG_SIZE_RATIO;
+    const marginSize = tileSize.value * CONFIG.STYLES.IMG_SIZE_MARGIN;
 
     // 重置可能影响背景图显示的样式
     style.backgroundColor = 'transparent';
@@ -682,7 +687,7 @@ function getPointStyle(point) {
 
 // 计算携带物品样式
 function getCarriedItemStyle(index, item) {
-  const baseSize = tileSize.value * CONFIG.STYLES.PLAYER_SIZE_RATIO * 0.5;
+  const baseSize = tileSize.value * CONFIG.STYLES.ITEM_CONTAINER_RATIO;
 
   return {
     position: 'relative',
@@ -1498,15 +1503,15 @@ async function taskLogic(tileMap) {
 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 iconSize = tileSize.value * CONFIG.STYLES.IMG_SIZE_RATIO;
+  const marginSize = tileSize.value * CONFIG.STYLES.IMG_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.5;
+  const finalSize = tileSize.value * CONFIG.STYLES.ITEM_CONTAINER_RATIO;
 
   // 获取携带物品容器的位置（左上角）
   // 注意：这里不需要考虑当前已携带物品数量，因为物品还没被添加
@@ -1573,9 +1578,9 @@ async function animateItemPickup(item, itemX, itemY) {
 async function animateItemUse(item, itemIndex, finishAnimation) {
   // 创建临时动画元素
   const tempItem = document.createElement('div');
-  const finalSize = tileSize.value * CONFIG.STYLES.PLAYER_SIZE_RATIO * 0.5;
-  const iconSize = tileSize.value * CONFIG.STYLES.PLAYER_SIZE_RATIO;
-  const marginSize = tileSize.value * CONFIG.STYLES.PLAYER_SIZE_MARGIN;
+  const finalSize = tileSize.value * CONFIG.STYLES.ITEM_CONTAINER_RATIO;
+  const iconSize = tileSize.value * CONFIG.STYLES.IMG_SIZE_RATIO;
+  const marginSize = tileSize.value * CONFIG.STYLES.IMG_SIZE_MARGIN;
 
   // 计算物品在物品栏中的初始位置
   let startLeft = CONFIG.STYLES.ITEM_CONTAINER_POSITION.x;
@@ -1735,11 +1740,11 @@ async function animateItemUse(item, itemIndex, finishAnimation) {
       videoElement.style.opacity = '0';
 
       // 等待淡出动画完成后再移除元素
-    setTimeout(() => {
-      if (mapBackground.contains(videoElement)) {
-        mapBackground.removeChild(videoElement);
-      }
-    }, CONFIG.DELAY.VIDEO_FADE_DURATION); // 与动画时长一致
+      setTimeout(() => {
+        if (mapBackground.contains(videoElement)) {
+          mapBackground.removeChild(videoElement);
+        }
+      }, CONFIG.DELAY.VIDEO_FADE_DURATION); // 与动画时长一致
     }
   } else {
     // 10.无视频