1、blocklyGame尺寸变成动态变化

src/views/block/MapGame.vue

@@ -226,7 +226,9 @@ function isWalkable(x, y) {
 function getPointStyle(point) {
   return {
     left: point.x * tileSize.value + 'px',
-    top: point.y * tileSize.value + 'px'
+    top: point.y * tileSize.value + 'px',
+    width: tileSize.value + 'px',
+    height: tileSize.value + 'px'
   };
 }
 
@@ -235,7 +237,10 @@ const playerStyle = computed(() => ({
   left: playerPosition.value.x * tileSize.value + 'px',
   top: playerPosition.value.y * tileSize.value + 'px',
   transform: `rotate(${playerDirection.value * 90}deg)`,
-  '--player-rotation': `${playerDirection.value * 90}deg` // 添加CSS变量
+  '--player-rotation': `${playerDirection.value * 90}deg`,
+  width: (tileSize.value * 0.8) + 'px',
+  height: (tileSize.value * 0.8) + 'px',
+  margin: (tileSize.value * 0.1) + 'px'
 }));
 
 // 显示游戏消息
@@ -724,6 +729,11 @@ onUnmounted(() => {
   @return math.div($px, 750) * 100vw;
 }
 
+//将tileSize属性绑定到CSS变量上
+:root {
+  --tile-size: v-bind('tileSize + "px"');
+}
+
 .map-game-container {
   position: fixed;
   top: 0;
@@ -837,8 +847,6 @@ onUnmounted(() => {
 /* 可行走区域样式 */
 .walkable-point {
   position: absolute;
-  width: 50px;
-  height: 50px;
   background-color: rgba(52, 152, 219, 0.2);
   border: 1px solid rgba(52, 152, 219, 0.5);
   box-sizing: border-box;
@@ -848,8 +856,6 @@ onUnmounted(() => {
 .start-point,
 .end-point {
   position: absolute;
-  width: 50px;
-  height: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -870,9 +876,6 @@ onUnmounted(() => {
 /* 玩家样式 */
 .player {
   position: absolute;
-  width: 40px;
-  height: 40px;
-  margin: 5px;
   background-image: url('@/assets/images/xiaozhi.png');
   background-size: contain;
   background-repeat: no-repeat;