Estoy tratando de hacer un mapa de colisión en un juego de vista de arriba hacia abajo en 2D en Javascript. Estoy usando Tiled para construir los mapas. Tiled genera un archivo json/javascript con una matriz de cada elemento en mi mapa. Puedo establecer un booleano para cada mosaico, por lo que aquellos con la configuración verdadera aparecerán en la matriz como 1 y aquellos con el valor falso devolverán 0.
Ahora quiero generar esos datos como coordenadas x, y. Quiero decir, si tengo la matriz [0,0,0,0], quiero que salgan como (x,y) (0,0), (1,0), (2,0), (3,0) basado en el ancho y el alto de la matriz del mapa de mosaicos. Algo como esto:
"data":[0,0,0,0, 1,1,1,1, 0,0,0,0, 0,0,0,0] "height":4, "width":4, "x":0, "y":0Mi problema es que no sé cómo decirle a mi bucle que habrá cuatro columnas y cuatro filas y que el índice debería cambiar de (0,0), (0,1), (0,2), (0 ,3) a (1,0), (1,1),(1,2),(1,3) después de terminar la primera fila continuar hasta la última columna.
¿Alguna idea?
Podría usar dos bucles for para la row y la col actuales, respectivamente:
const tiledOutputJson = { "data": [ 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0 ], "height": 4, "width": 4, "x": 0, "y": 0 }; const { data, height, width, x, y } = tiledOutputJson; for (let row = 0; row < height; row++) { for (let col = 0; col < width; col++) { console.log(`(${row}, ${col}) = ${data[row * height + col]}`); } console.log(); }En general, recomendaría convertirlo en una matriz para x que contenga las matrices para y
[ [0,0,0,0], [1,1,1,1], [0,0,0,0], ]Puedes hacer el mapeo así.
const data = { "data": [0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0 ], "height": 4, "width": 4, "x": 0, "y": 0 } for (let x = 0; x < data.height * data.width; x = x + data.width) { for (let y = x; y < data.width + x; y++) { console.log({ x: x / data.height, y: y % data.width, v: data.data[y] }) } }