feat(game): 优化地图生成

lovezhangchuangxin · Dec 5, 2024 · 9c34df0 · 9c34df0
1 parent 65b0128
commit 9c34df0
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 80 deletions.
diff --git a/packages/game/components.d.ts b/packages/game/components.d.ts
@@ -16,17 +16,13 @@ declare module 'vue' {
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElLink: typeof import('element-plus/es')['ElLink']
-    ElOption: typeof import('element-plus/es')['ElOption']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
-    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSpace: typeof import('element-plus/es')['ElSpace']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']

diff --git a/packages/game/src/components/game-map/index.vue b/packages/game/src/components/game-map/index.vue
@@ -8,7 +8,7 @@ import { inject, onMounted, Ref, ref } from 'vue'
 import { Socket } from 'socket.io-client'
 import { message as toast } from '@/utils/message'
 import { PlanetData, UniverseMap } from '@star-angry/core'
-import { throttle } from '@star-angry/shared'
+import { debounce } from '@star-angry/shared'
 
 interface MapObjectData {
   seed: number
@@ -43,7 +43,7 @@ onMounted(() => {
   stage.add(layer)
 
   render(stage, layer)
-  stage.on('dragend', () => {
+  stage.on('dragmove', () => {
     render(stage, layer)
   })
 
@@ -67,7 +67,7 @@ onMounted(() => {
     }
 
     let newScale = e.deltaY < 0 ? oldScale * scaleBy : oldScale / scaleBy
-    newScale = Math.min(10, Math.max(1, newScale))
+    newScale = Math.min(10, Math.max(2, newScale))
     stage.scale({ x: newScale, y: newScale })
 
     const newPos = {
@@ -111,85 +111,80 @@ const getMapObject = (
 /**
  * 渲染可视区的物体
  */
-const render = throttle(
-  (stage: Konva.Stage, layer: Konva.Layer) => {
-    // 先获取可视区域的坐标范围
-    const scale = stage.scaleX()
-    const x = -stage.x() / scale
-    const y = -stage.y() / scale
-    const width = stage.width() / scale
-    const height = stage.height() / scale
-
-    const chunkIds = blankMap.getChunks(
-      Math.floor(x - width / 3),
-      Math.floor(y - width / 3),
-      Math.floor(x + (width * 4) / 3),
-      Math.floor(y + (height * 4) / 3),
-    )
-
-    getMapObject(chunkIds, (mapObjectData) => {
-      const { seed, chunkObjects, occupiedPlanets } = mapObjectData
-      const universeMap = new UniverseMap(seed)
-
-      chunkIds.forEach((chunkId) => {
-        // 先判断是否已经存在
-        const chunkGroup = layer.find(`#${chunkId}`)[0]
-        if (chunkGroup) {
+const render = debounce((stage: Konva.Stage, layer: Konva.Layer) => {
+  // 先获取可视区域的坐标范围
+  const scale = stage.scaleX()
+  const x = -stage.x() / scale
+  const y = -stage.y() / scale
+  const width = stage.width() / scale
+  const height = stage.height() / scale
+  // 多取一些
+  const chunkIds = blankMap.getChunks(
+    Math.floor(x - width / 3),
+    Math.floor(y - width / 3),
+    Math.floor(x + (width * 4) / 3),
+    Math.floor(y + (height * 4) / 3),
+  )
+
+  getMapObject(chunkIds, (mapObjectData) => {
+    const { seed, chunkObjects, occupiedPlanets } = mapObjectData
+    const universeMap = new UniverseMap(seed)
+    chunkIds.forEach((chunkId) => {
+      // 先判断是否已经存在
+      const chunkGroup = layer.find(`#${chunkId}`)[0]
+      if (chunkGroup) {
+        return
+      }
+
+      const group = new Konva.Group({
+        id: chunkId.toString(),
+      })
+
+      const planets = universeMap.getPlanets(chunkId)
+      const occupiedPlanetSets = new Set(occupiedPlanets[chunkId])
+      planets.forEach((planet) => {
+        const planetX = planet[0]
+        const planetY = planet[1]
+        const planetId = universeMap.getBlockId(planetX, planetY)
+
+        if (occupiedPlanetSets?.has(planetId)) {
           return
         }
 
-        const group = new Konva.Group({
-          id: chunkId.toString(),
-        })
-
-        const planets = universeMap.getPlanets(chunkId)
-        const occupiedPlanetSets = new Set(occupiedPlanets[chunkId])
-        planets.forEach((planet) => {
-          const planetX = planet[0]
-          const planetY = planet[1]
-          const planetId = universeMap.getBlockId(planetX, planetY)
-
-          if (occupiedPlanetSets?.has(planetId)) {
-            return
-          }
-
-          const [circle, text] = getPlanetObject(
-            layer,
-            planetId,
-            planetX,
-            planetY,
-          )
-          group.add(circle, text)
-        })
-
-        chunkObjects[chunkId]?.forEach((data) => {
-          const { planet, userId, userName } = data
-          const [circle, text] = getPlanetObject(
-            layer,
-            +planet.id,
-            planet.position[0],
-            planet.position[1],
-            userName,
-          )
-          circle.fill(userId ? '#f4d2d2' : '#e1d2f4')
-          group.add(circle, text)
-        })
-
-        layer.add(group)
+        const [circle, text] = getPlanetObject(
+          layer,
+          planetId,
+          planetX,
+          planetY,
+        )
+        group.add(circle, text)
       })
-    })
 
-    // 移除不在可视区域的chunk
-    const chunkIdsSet = new Set(chunkIds.map((id) => id.toString()))
-    layer.children.forEach((child) => {
-      if (!chunkIdsSet.has(child.id())) {
-        child.destroy()
-      }
+      chunkObjects[chunkId]?.forEach((data) => {
+        const { planet, userId, userName } = data
+        const [circle, text] = getPlanetObject(
+          layer,
+          +planet.id,
+          planet.position[0],
+          planet.position[1],
+          userName,
+        )
+        circle.fill(userId ? '#f4d2d2' : '#e1d2f4')
+        group.add(circle, text)
+      })
+
+      layer.add(group)
     })
-  },
-  200,
-  true,
-)
+  })
+
+  // 移除不在可视区域的chunk
+  const chunkIdsSet = new Set(chunkIds.map((id) => id.toString()))
+  layer.children.forEach((child) => {
+    if (!chunkIdsSet.has(child.id())) {
+      child.destroy()
+    }
+  })
+}, 100)
 
 function getPlanetObject(
   layer: Konva.Layer,