Algorithm of Habbo walls

Question

I’m developing a Javascript game and its environment is very similar to that of Habbo: A floor and walls only at the bottom of the floor.

The game map is dynamic and represented by a matrix of numbers where 0 indicates that there will be no floor and the others refer to floor height.

I noticed that the walls are rendered starting at the lower left corner and ending at the upper right corner.

I have this code so far, his problem is that in some cases it is not rendered the block, as the block (2,2) that should be a vertical or horizontal block.

const $floor = document.getElementById("floor");
const $wall = document.getElementById("wall");

const WH = "-"; // Parede Horizontal
const WV = "|"; // Parede Vertical
const WC = "+"; // Parece Canto
const WN = "."; // Piso (Sem parede)

// Mapa de piso
const floor = [
  [0, 0, 1, 1, 1, 0, 1, 1],
  [0, 0, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1],
  [0, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1]
];

// Mapa de paredes
const walls = new Array(floor.length)
  .fill(null)
  .map((_, y) =>
    new Array(floor[0].length)
      .fill(null)
      .map((_, x) => (floor[y][x] === 0 ? " " : WN))
  );

const floorRows = floor.length;
const floorCols = floor[0].length;

let maxVX = Infinity;

// Paredes Horizontais
wallsH: for (let y = 0; y < floorRows; y++) {
  const row = floor[y];

  // Percorre às colunas até o primeiro bloco vertical
  for (let x = 0; x <= floorCols; x++) {
    // Se for 0, não inserir paredes
    if (!row[x]) continue;

    // Não enfileirar paredes horizontais verticalmente
    for (let wy = y; wy >= 0; wy--) {
      const block = walls[wy][x];
      if (block === WH || block === WC) continue wallsH;
    }

    // Renderiza
    walls[y][x] = WH;
  }
}

// Paredes Verticais
for (let y = 0; y < floorRows; y++) {
  const row = floor[y];

  for (let x = 0; x < floorCols; x++) {
    // Não testar blocos com 0
    if (!row[x]) continue;

    // Não enfileirar paredes verticais
    // horizontalmente
    if (x > maxVX) break;

    // Define a posição X máxima para o bloco atual
    maxVX = x;

    // Bloco com canto se já existir
    // um bloco horizontal nesta posição
    let conner = walls[y][x] === WH;

    // Renderiza
    walls[y][x] = conner ? WC : WV;
  }
}

$floor.textContent = floor.map(r => r.join(" ")).join("\n");
$wall.textContent = walls.map(r => r.join(" ")).join("\n");

<div id="app">
  <pre id="floor"></pre>
  <pre id="wall"></pre>
</div>