javascript - 在 p5.js 中显示 map 的问题

Question

我目前正在尝试使用二维数组在处理中显示 map 。 目前我已经记录下来了:

var start_map = [
  [1, 1, 1, 1, 1],
  [1, 0, 0, 0, 0],
  [1, 0, 0, 0, 0],
  [1, 0, 0, 0, 0],
  [1, 1, 1, 1, 1]
];

function drawMap(map) {
  for (var x = 0; x < 5; x++) {
    for (var y = 0; y < 5; y++) {
      if (map[x][y] == 0) {
        fill(51, 153, 51);
        rect((10 + 50*x), (10 + 50*y), 50, 50);
      }
      else if (map[x][y] == 1) {
        fill(0, 102, 0);
        rect((10 + 50*x), (10 + 50*y), 50, 50);
      }
    }
  }
}

但是，虽然我确实显示了 map ，但它似乎顺时针旋转了 90 度。造成此问题的原因是什么以及如何解决此问题？

Answer 1

考虑一下二维数组的索引是如何工作的。让我们看一个更简单的例子:

var map = [
  [1, 2],
  [3, 4]
];

map[0][1]在哪里？ map[1][0]在哪里？

二维数组是数组的数组。第一个索引选择该索引处的子数组，第二个索引选择该子数组中的元素。

因此，在上面的简单示例中，map[0] 选择索引 0 处的子数组，即 [1, 2]。然后，map[0][1] 选择该子数组中索引 1 处的元素，即 2。

如果您将索引视为 x, y 对，这可能看起来有点令人惊讶。在这种情况下，您会期望 0, 1 为您提供 3，对吧？但它不是 x, y 对。它是外部数组的索引，然后是子数组的索引。

换句话说，它实际上是一个 y, x 对。因此，要解决您的问题，您实际上可以交换索引的顺序:

`map[y][x]`

现在，您可以使用 y 值来选择您想要的子数组(您想要的行)，并使用 x 值来选择您想要该子数组中的哪个元素(您想要哪一列)。