在p5.js中显示地图的问题

时间:2018-06-17 16:33:23

标签: javascript multidimensional-array processing p5.js

我目前正在尝试使用二维数组显示处理中的地图。 目前我有这个:

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);
      }
    }
  }
}

但是,当我确实显示地图时,它似乎顺时针旋转了90度。造成这种情况的原因是什么?如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

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

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

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

2D数组是一个数组数组。第一个索引选择该索引处的子数组,第二个索引选择该子数组中的元素。

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

如果您将索引视为x, y对,这似乎有点令人惊讶。在这种情况下,您希望0, 1给您3,对吗?但它不是x, y对。它是外部数组的索引,然后是子数组的索引。

换句话说,它实际上是y, x对。因此,为了解决您的问题,您实际上只需交换索引的顺序:

`map[y][x]`

现在使用y值来选择所需的子阵列(您想要哪个行),并使用x值来选择所需子阵列中的哪个元素(您想要哪个列)。