如何在TypeScript中基于Map Graph构建二维游戏网格

需求背景 #

我要做一款以二维网格展示游戏地图的项目，计划用Map Graph随机生成地图——通过随机选择邻居节点来建立网格间的连接关系。

现有类型定义 #

type TileType = 'grass' | 'rock' | 'water' | 'empty';

type TileNode = {
  id: number; // 存储节点ID
  type: TileType; // 节点类型
  neighbors: number[]; 

                // 存储邻居节点的ID，数量范围1到4
}

type MapGraph = {
  tiles: Map<number, TileNode>; // 保存ID与对应节点的映射表
}

export type { TileType, TileNode, MapGraph };

示例MapGraph（硬编码，实际由随机生成函数生成） #

const mapGraph2: MapGraph = {
    tiles: new Map([
        [0, {id: 0, type: 'grass', neighbors: [1, 3]}],      
        [1, {id: 1, type: 'grass', neighbors: [0, 4, 2]}],   
        [2, {id: 2, type: 'grass', neighbors: [1, 5]}],       
        [3, {id: 3, type: 'grass', neighbors: [0, 4, 6]}],
        [4, {id: 4, type: 'grass', neighbors: [1, 3, 5, 7]}],
        [5, {id: 5, type: 'grass', neighbors: [2, 4, 8]}],
        [6, {id: 6, type: 'grass', neighbors: [3, 7]}],
        [7, {id: 7, type: 'grass', neighbors: [6, 4, 8]}],
        [8, {id: 8, type: 'grass', neighbors: [7, 5]}],
    ]),
    nextId: mapGraph.nextId
}

期望的二维网格布局 #

// [0 1 2]
// [3 4 5]
// [6 7 8]

尝试过的方案与问题 #

• 用React组件先渲染Tile 0的SVG，再依次渲染其邻居节点，但因为没有方向信息，布局完全乱掉，失败了。
• 考虑修改TileNode类型，给每个节点添加明确的方向字段：

type TileNode = {
    id: number;
    node-south: number; // 南向邻居ID
    node-north: number; // 北向邻居ID
    node-west: number;  // 西向邻居ID
    node-east: number;  // 东向邻居ID
}

这个方案虽然能明确方向，方便映射到二维地图，但总觉得不是最优解。

核心疑问 #

能不能不修改现有类型定义，直接把Map Graph转换成符合邻居关系、布局合理的二维网格？（二维数组只是用来直观展示问题，不是最终实现目标）

补充示例 #

需要将图结构：

转换为对应的二维网格布局：

内容的提问来源于stack exchange，提问作者Fire Frekox