试图通过创建一个 3x3 板然后将其可视化来找出二维阵列，但是，我遇到了一些障碍

Question

我想要实现的是这个 - 创建像这样的二维数组：

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

然后创建一个 300px canvas，其中将有 3x3 个宽度和高度为 100px 的矩形，每个矩形将根据数组元素值具有不同的颜色。

当值为 1 时，颜色应为红色，当值为 0 时，颜色应为蓝色。

我能够通过使用嵌套循环在 canvas 中创建一个 3x3 板，但是，我使用硬编码数字创建板而不是查找二维数组的长度并创建行和列根据长度。

问题是我只知道如何获取普通数组的长度而不是 2d。另一个问题是我不知道如何根据数组元素值来决定矩形的颜色。

到目前为止我的代码是：

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

function setup() {
    createCanvas(300, 300);
}

function draw() {
    for (var i = 0; i < 3; i++) {
        for (var j = 0; j < 3; j++) {
            var x = i*100;
            var y = j*100;
            fill(222);
            stroke(0);
            rect(x, y, 100, 100);
        }
    }
}

Answer 1

您可以使用此代码

    var board = [
[0, 0, 0],
[0, 0, 0],
[0, 0, 0]
];

function setup() {
    createCanvas(300, 300);
}

function draw() {
    for (var i = 0; i < board.length ; i++) {
        for (var j = 0; j < board[i].length; j++) {
            var x = j*100;
            var y = i*100;
            if(board[i][j] == 0)
                fill(211);
            else
                fill(10);
            stroke(0);
            rect(x, y, 100, 100);
        }
    }
}

Answer 2

您可以只使用嵌套 forEach 循环并使用索引根据当前索引和单元格大小获取 x 和 y 位置。

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

let board;

function setup() {
  createCanvas(200, 200);
  board = new Board(data, 50);
  board.create();
}

function draw() {
  board.show()
}

class Board {
  constructor(data, cellsize) {
    this.data = data;
    this.cells = [];
    this.cellsize = cellsize;
  }

  create() {
    this.data.forEach((arr, i) => {
      arr.forEach((type, j) => {
        let x = this.cellsize * j;
        let y = this.cellsize * i;
        this.cells.push(new Cell(type, x, y, this.cellsize))
      })
    })
  }

  show() {
    this.cells.forEach(cell => cell.show());
  }
}

class Cell {
  constructor(type, x, y, size) {
    this.type = type;
    this.x = x;
    this.y = y;
    this.size = size;
  }

  show() {
    fill(this.type == 1 ? "red" : "blue")
    rect(this.x, this.y, this.size, this.size)
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>

试图通过创建一个 3x3 板然后将其可视化来找出二维阵列，但是，我遇到了一些障碍

Trying to figure out 2D arrays by creating a 3x3 board and then visualizing it, however, I'm meeting some hurdles

javascript

p5.js