如何创建基于数组的程序化瓦片地图（适配10x10网格地牢游戏）

以下方案完全兼容你当前的10x10网格+一维数组存储规则，无需修改现有绘制逻辑即可直接使用：

方案1：细胞自动机生成随机地牢 #

实现逻辑简单，生成的地图自然度高，步骤如下：

• 第一步：初始化基础墙体框架
  你现有地图的外围默认全为墙体，所以先生成长度为110的空数组，将第0行（索引0-9）、第10行（索引100-109）、以及每行首尾两列（索引满足i%10==0或i%10==9）的位置统一赋值为1
• 第二步：随机初始化内部可编辑区域
  对中间的可通行区域（行1-9，列1-8，对应数组索引11-98区间排除首尾列），每个格子按30%概率赋值为2，70%概率赋值为0
• 第三步：迭代优化地图结构
  迭代2次，每次遍历所有内部格子，统计周围8格内值为2的格子数量：如果数量≥4则当前格子设为2，如果数量≤2则设为0，生成自然的区块分割效果
• 第四步：放置固定功能瓦片
  随机选一个非墙体的内部格子赋值为3作为出口，再按需随机选若干格子赋值为4即可

代码示例 #

function generateDungeon() {
  const map = new Array(110).fill(0);
  // 填充外围墙体
  for (let i = 0; i < 110; i++) {
    if (i < 10 || i >= 100 || i % 10 === 0 || i % 10 === 9) {
      map[i] = 1;
    }
  }
  // 随机初始化内部
  for (let i = 10; i < 100; i++) {
    if (map[i] !== 1) {
      map[i] = Math.random() < 0.3 ? 2 : 0;
    }
  }
  // 迭代优化
  for (let iter = 0; iter < 2; iter++) {
    for (let i = 10; i < 100; i++) {
      if (map[i] === 1) continue;
      let wallCount = 0;
      // 统计周围8格的2数量
      const neighbors = [i-11, i-10, i-9, i-1, i+1, i+9, i+10, i+11];
      neighbors.forEach(idx => {
        if (idx >=0 && idx <110 && map[idx] === 2) wallCount++;
      });
      if (wallCount >=4) map[i] = 2;
      else if (wallCount <=2) map[i] =0;
    }
  }
  // 放置出口
  let exitPos;
  do {
    exitPos = Math.floor(Math.random() * 80) + 15; // 避开边缘
  } while(map[exitPos] ===1);
  map[exitPos] = 3;
  // 放置4类瓦片，可自行调整数量
  for (let j=0; j<3; j++) {
    let itemPos;
    do {
      itemPos = Math.floor(Math.random() * 80) + 15;
    } while(map[itemPos] ===1 || map[itemPos] ===3);
    map[itemPos] =4;
  }
  return map;
}

生成的数组直接赋值给你现有的map变量即可正常渲染。

方案2：模板拼接可控生成 #

如果需要更稳定的地图结构，避免出现完全堵死的区域，可以提前制作若干5x5的小型地图模板数组，每次生成时随机选择3个模板拼接成中间的9x8区域，再补充外围墙体即可，你可以自行控制每个模板的路径连通性，保证所有生成的地图都有可通行的路径到出口。

内容的提问来源于stack exchange，提问作者Kyl Bar