Habbo walls algorithm
I am 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 an array of numbers where 0 indicates that there will be no floor and the rest refer to the height of the floor.
I noticed that the walls are rendered starting from the bottom left corner and ending at the top right.
I have this code until then, his problem is that in some cases the block is not rendered, such as block (2,2) which 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>
0
Author: Salomão Neto, 2019-11-22