Javascriptの「二次元配列」と「ループ」の組み合わせ方を教えて下さい

Question

僕はいま、ブロック崩しゲームを作ろうとしています。
そのため、二次元配列とループを組み合わせてブロックを表示させようとしているのですが、
Cannot set property '0' of undefined (sketch: line 42)
というエラーが出てしまっています…
どうやら、配列の宣言方法を間違えたか、値の代入方法を間違えてしまったようです。
https://www.javadrive.jp/javascript/array/index5.html　
このサイトを確認したのですが、どこが間違っているのかわかりません…

var countX;
var countY;
let blx = [
  [],
  []
];
let bly = [
  [],
  []
];
let blwidth = [
  [],
  []
];
let blheight = [
  [],
  []
];
let c;

// プレイヤー用
var px;
var py;
var pwidth;
var pheight;
var bx;
var by;
var bsize;
var xbs;
var ybs;


function setup() {
  createCanvas(600, 400);
  //   ブロック用
  countX = 30;
  countY = 10;
  for (var i = 0; i < countX; i++) {
    for (var j = 0; j < countY; j++) {
      
      blx[i][j] = 20 * i;
      bly[i][j] = 20 * j;
      blwidth[i][j] = 20;
      blheight[i][j] = 20;
    }
  }
  
  
  //   プレイヤー用
  py = 350;
  pwidth = 75;
  pheight = 10;
  bx = width / 2;
  by = 330;
  bsize = 15;
  xbs = 4;
  ybs = 4;
  for (var i = 0; i < countX; i++) {
    for (var j = 0; j < countY; j++) {
      c = color(random(256), random(256), random(256));
      pc = color(random(256), random(256), random(256));
    }
  }

}

function draw() {
  background(0);

  //   ブロック用
  for (var i = 0; i < countX; i++) {
    for (var j = 0; j < countY; j++) {
      stroke(0);
      fill(c);
      rect(blx[i][j], bly[i][j], blwidth[i][j], blheight[i][j]);
    }
  }
  //   プレイヤー用
  px = mouseX - 75 / 2;

  if (px < 0) {
    px = 0;
  }
  if (px > width - pwidth) {
    px = width - pwidth;
  }
  fill(pc);
  rect(px, py, pwidth, pheight);

  noStroke();
  fill(pc);
  circle(bx, by, bsize);

  bx += xbs;
  by -= ybs;
  if (bx < bsize / 2 || bx > width - bsize / 2) {
    xbs *= -1;
  }
  if (by < bsize / 2 || by > height - bsize / 2) {
    ybs *= -1;
  }


  if (bx >= px && bx <= px + pwidth && by >= py && by <= py + pheight) {
    if (bx >= px && bx <= px + pwidth / 4) {
      xbs = -4;
    }
    if (bx >= px + pwidth / 4 && bx <= px + pwidth / 2) {
      xbs = -2;
    }
    if (bx > px + pwidth / 4 * 3 && bx < px + pwidth) {
      xbs = 4;
    }
    if (bx > px + pwidth / 2 && bx < px + pwidth / 4 * 3) {
      xbs = 2;
    }
    if (by >= py && by <= py + pheight) {
      ybs *= -1;
    }
  }

  for (var i = 0; i < countX; i++) {
    for (var j = 0; j < countY; j++) {
      if (bx + bsize / 2 > blx[i][j] && bx < blx[i][j] + blwidth[i][j] &&
        by + bsize / 2 > bly[i][j] && by < bly[i][j] + blheight[i][j]) {
        ybs *= -1;
        blwidth[i][j] = 0;
        blheight[i][j] = 0;
        blx[i][j] = 0;
        bly[i][j] = 0;
        // block.col=color(0);
      }
    }
  }
}
コード

Answer 1

２次元配列の宣言の仕方が間違っています。

let blx = [
  [],
  []
];

この場合blxは 2×n の配列しか作れません。

let blx =[];
for(int i=0;i<countx;i++){
  blx[i]=[];
  for(int j=0;j<county;j++){
    blx[i][j]= ...  
  }
}

という形で宣言する必要があります。