javascript - 如何创建程序数组地图（使用数组作为平铺地图）

Question

我有一个游戏，（顺便说一句，它在https://juniorcpc.itch.io/dungeon-game上发布 ，代码的下载文件也在那里），它使用数组来创建平铺地图。（0-4 个数字代表不同的图块）问题是我只能创建地图并发布它们，我想知道如何让代码为我创建这些数组地图。我不能使用其他教程，因为它们只展示了如何使用平铺地图、迷宫或其他东西，但我使用的是数组而不是其他系统。如果有一种方法可以使用很棒的数组制作程序地图，谢谢！

顺便说一句，阵列是 10x10 网格，1 = 墙壁，0 = 空白空间，3 = 退出。

数组示例：

 [1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  1, 0, 0, 0, 0, 0, 0, 2, 4, 1,
  1, 2, 2, 0, 0, 2, 2, 2, 2, 1,
  1, 1, 1, 2, 0, 2, 2, 2, 2, 1,
  1, 2, 2, 0, 0, 2, 2, 2, 4, 1,
  1, 0, 0, 0, 2, 2, 2, 3, 2, 1,
  1, 0, 2, 2, 2, 2, 2, 2, 2, 1,
  1, 0, 2, 1, 1, 2, 0, 0, 0, 1,
  1, 0, 2, 2, 2, 2, 0, 0, 0, 1,
  1, 0, 0, 0, 0, 0, 0, 0, 0, 1,
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  ],

以下是它如何绘制它们：（我的 HTML 中有一个宽度为 300 像素、高度为 300 像素的画布）

function mapM() {

var ctx = document.getElementById("canv").getContext('2d');
ctx.fillStyle = "red";
var mapOnX = -1;
var mapOnY = 0;
var l = map[0].length + 1;

for (i = 0; i < l; i++) {
if (i % 10 == 0) {
  var mapOnX = 0;
  mapOnY++;
} else {
  mapOnX++;
}
if (map[level][i] == 1) {
  ctx.fillStyle = "red";
} else {
  if (map[level][i] == 0) {
    ctx.fillStyle = 'blue';
  } else {
    if (map[level][i] == 3) {
      ctx.fillStyle = 'gold';
    } else {
      if (map[level][i] == 2) {
        ctx.fillStyle = 'black';
      } else {
        ctx.fillStyle = 'lightBlue';
      }
    }
  }
}
ctx.fillRect(mapOnX * 25, mapOnY * 25, 25, 25);
ctx.fillStyle = 'purple';
ctx.fillRect(mapX * 25, mapY * 25, 25, 25);
}
}

不要担心我能做到的其他数字。谢谢！

标签： javascriptarraystileprocedural