Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

231
Vistas
How to create procedural array map (using arrays for tile maps)

I have a game, (published BTW its here at https://juniorcpc.itch.io/dungeon-game and the download file for the code is there too), and it uses arrays to create tile maps. (0-4 numbers represent different tiles) The problem is i can only create maps and publish those, and i want to know how to have the code create those array maps for me. I cannot use other tutorials, as they only show how to with tile maps, or mazes, or something else, but mine uses arrays not other systems. If there is a way to make a procedural map with arrays that would be awesome, thanks!

BTW the arrays are 10x10 grids, 1 = wall, 0 = empty space, 3 = exit.

Example of array:

 [1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  1, 0, 0, 0, 0, 0, 0, 2, 4, 1,
  1, 2, 2, 0, 0, 2, 2, 2, 2, 1,
  1, 1, 1, 2, 0, 2, 2, 2, 2, 1,
  1, 2, 2, 0, 0, 2, 2, 2, 4, 1,
  1, 0, 0, 0, 2, 2, 2, 3, 2, 1,
  1, 0, 2, 2, 2, 2, 2, 2, 2, 1,
  1, 0, 2, 1, 1, 2, 0, 0, 0, 1,
  1, 0, 2, 2, 2, 2, 0, 0, 0, 1,
  1, 0, 0, 0, 0, 0, 0, 0, 0, 1,
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  ],

Here is how it draws them: ( i have a canvas in my HTML with a width of 300px and a height of 300px)

function mapM() {

var ctx = document.getElementById("canv").getContext('2d');
ctx.fillStyle = "red";
var mapOnX = -1;
var mapOnY = 0;
var l = map[0].length + 1;

for (i = 0; i < l; i++) {
if (i % 10 == 0) {
  var mapOnX = 0;
  mapOnY++;
} else {
  mapOnX++;
}
if (map[level][i] == 1) {
  ctx.fillStyle = "red";
} else {
  if (map[level][i] == 0) {
    ctx.fillStyle = 'blue';
  } else {
    if (map[level][i] == 3) {
      ctx.fillStyle = 'gold';
    } else {
      if (map[level][i] == 2) {
        ctx.fillStyle = 'black';
      } else {
        ctx.fillStyle = 'lightBlue';
      }
    }
  }
}
ctx.fillRect(mapOnX * 25, mapOnY * 25, 25, 25);
ctx.fillStyle = 'purple';
ctx.fillRect(mapX * 25, mapY * 25, 25, 25);
}
}

Dont worry about other numbers i can do that. Thanks!

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda