Почему возникает ошибка на 61 строке JS?

Question

[Venyak]

ссылка на гит с кодом

текст ошибки:
index.js:61 Uncaught TypeError: Cannot set properties of undefined (setting '3')
at get viewArea [as viewArea] (index.js:61:30)
at index.js:125:21

const SIZE_BLOCK = 30;

// Механика игры

const game = {
  area: [
    ['o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
    ['o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
    ['o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
    ['o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
    ['o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
    ['o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
    ['o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
    ['o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
    ['o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
    ['o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
    ['o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
    ['o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
    ['o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
    ['o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
    ['o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
    ['o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
    ['o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
    ['o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'x'],
    ['o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'x'],
    ['o', 'o', 'x', 'x', 'x', 'x', 'o', 'o', 'x', 'x'],
  ],
  activeTetramino: {
    x: 3,
    y: 0,
    block: [
      ['o', 'o', 'o'],
      ['o', 'x', 'x'],
      ['x', 'x', 'o'],
    ],
  },
  moveLeft() {
    if (this.checkOutPosition(this.activeTetramino.x - 1, this.activeTetramino.y)) {
      this.activeTetramino.x -= 1;
    }
  },
  moveRight() {
    if (this.checkOutPosition(this.activeTetramino.x + 1, this.activeTetramino.y)) {
      this.activeTetramino.x += 1;
    }
  },
  moveDown() {
    if (this.checkOutPosition(this.activeTetramino.x, this.activeTetramino.y + 1)) {
      this.activeTetramino.y += 1;
    }
  },
  rotateTetramino() {},
  get viewArea() {
    const area = JSON.parse(JSON.stringify(this.area));
    const { x, y, block: tetramino } = this.activeTetramino;

    for (let i = 0; i < tetramino.length; i++) {
      const row = tetramino[i];
      for (let j = 0; j < row.length; j++) {
        if (row[j] === 'x') {
          area[y + i][x + j] = tetramino[i][j]; // ВОТ ЗДЕСЬ ОШИБКА
        }
      }
    }

    return area;
  },
  checkOutPosition(x, y) {
    const tetramino = this.activeTetramino.block;

    for (let i = 0; i < tetramino.length; i++) {
      for (let j = 0; j < tetramino[i].length; j++) {
        if (!this.area[y + i] || !this.area[y + i][x + j]) {
          return false;
        }
      }
      return true;
    }
  },
};

// Отрисовка
const container = document.querySelector('.container');

const canvas = document.createElement('canvas');
container.append(canvas);
canvas.classList.add('game-area');
canvas.width = SIZE_BLOCK * 10;
canvas.height = SIZE_BLOCK * 20;

const context = canvas.getContext('2d');

const showArea = (area) => {
  context.clearRect(0, 0, canvas.width, canvas.height);

  for (let y = 0; y < area.length; y++) {
    const line = area[y];

    for (let x = 0; x < line.length; x++) {
      const block = line[x];
      if (block === 'x') {
        context.fillStyle = 'purple';
        context.strokeStyle = 'white';
        context.fillRect(x * SIZE_BLOCK, y * SIZE_BLOCK, SIZE_BLOCK, SIZE_BLOCK);
        context.strokeRect(x * SIZE_BLOCK, y * SIZE_BLOCK, SIZE_BLOCK, SIZE_BLOCK);
      }
    }
  }
};

window.addEventListener('keydown', (event) => {
  const key = event.code;

  switch (key) {
    case 'ArrowLeft':
      game.moveLeft();
      showArea(game.viewArea);
      break;
    case 'ArrowRight':
      game.moveRight();
      showArea(game.viewArea);
      break;
    case 'ArrowDown':
      game.moveDown();
      showArea(game.viewArea);
      break;
    case 'ArrowUp':
      game.rotateTetramino();
      showArea(game.viewArea);
      break;
  }
});

showArea(game.viewArea);

Comments

[Venyak]

Yokaze,
index.js:61 Uncaught TypeError: Cannot set properties of undefined (setting '3')
at get viewArea [as viewArea] (index.js:61:30)
at index.js:125:21

[RAX7]

-if (row[j] === 'x' ) {
-  area[y + i][x + j] = tetramino[i][j]; // ВОТ ЗДЕСЬ ОШИБКА
-}
+if (row[j] === 'x' && y + i < area.length) {
+  area[y + i][x + j] = tetramino[i][j];
+}

[Teleweb developer]

А вы можете указать где именно? Тут нет нумерации строк

[Venyak]

Teleweb, написал комментарий // ВОТ ЗДЕСЬ ОШИБКА

[Teleweb developer]

Venyak, ах да, извиняюсь