Arreglos multidimensionales en JavaScript

Para transformar el string de los mapas en un arreglo bidimensional, también puedes usar expresiones regulares y un match

const map = maps[0]
.match(/[IXO\-]+]/g)
.map(a=>a.split(""))

Explicación
en

.match(/[IXO\-]+]/g)

estamos diciendo:
Búscame las palabras que cumplan con estas características

/[IXO\-]+/g

desglose
[IXO-]+ significa
búscame todo lo que empiece por I,X,O o -, pero como el - es una palabra reservada usamos el slash invertido -

• decimos que si o si hay 1 o más caracteres iguales, despues del primero
  g le decimos que haga esa busqueda en todo el string
  Resumen
  Le decimos búscame todo lo que empiece por I,X,O o -, y que todos los caracteres de ese tipo que le siguen
  Entonces como, cada fila esta separada por una espacio o salto de linea, solo devolverá esas palabras

//(10)
 ['IXXXXXXXXX',
 '-XXXXXXXXX',
 '-XXXXXXXXX', 
'-XXXXXXXXX', 
'-XXXXXXXXX', 
'-XXXXXXXXX', 
'-XXXXXXXXX',
 '-XXXXXXXXX', 
'-XXXXXXXXX',
 'OXXXXXXXXX']

Luego ya es facil. le pasamos un map y le decimos que por cada array recibido, vamos a revolverlo, pero ahora separado los elementos

.map(a=>a.split(""))

Una clase genial. Toca aprender todos esos métodos de arrays y string para no quedarse estancado en encontrar una solución, pero con los cursos sobre manejo de arrays y expresiones regulares se resuelve ese problema. Igualmete se entendió todo lo que se hizo, el curso va muy bien.

Estimado team Platzi: por favor corrijan la falta de ortografía: es “bidimensional”, no “bidimencional”. Dale “me gusta” para que el comentario sea visto por el team. Gracias.

Les comparto mi solución al reto:

Ordenar los mapas para que sean arreglos multidimensionales.

1. Código utilizado
   
2. Resultado
   

Modificar la función startGame para que muestre el mapa que le indiquemos.

1. Código utilizado
   
2. Resultado
   

Mejore el código, evitando el uso del trim y del split("\n"),
Los mapas ya los podemos hacer directamente, en un array. Para evitar los espacios y la \n, de esta forma.
Hacemos un push del array, y ya nos dará como resultado
el
const mapRows= maps[0]; nos da los 10 arrays.

maps.push([
  "IXXXXXXXXX",
  "-XXXXXXXXX",
  "-XXXXXXXXX",
  "-XXXXXXXXX",
  "-XXXXXXXXX",
  "-XXXXXXXXX",
  "-XXXXXXXXX",
  "-XXXXXXXXX",
  "-XXXXXXXXX",
  "OXXXXXXXXX",
]);

y en el código de game.js solo agregamos.

const mapRows= maps[2];
const mapRowCols= mapRows.map(row => row.split(''));
for (let row = 1; row <= 10; row++) {
	for (let col = 1; col <= 10; col++) {
	game.fillText(emojis[mapRowCols[row-1][col-1]], elementsSize * col+5, elementsSize * row-10);
	}
}

Con eso nos ahorramos codigo, y es mas sencillo realizar nuestros mapas.

quedando el resultado igual

![](

El método .trim() se utiliza para eliminar los espacios en blanco al principio y al final de una cadena de texto. Es muy útil para normalizar la entrada de texto en formularios y otros tipos de entradas de usuario.

El método .split() se utiliza para dividir una cadena de texto en un array de elementos separados por un delimitador específico. Por ejemplo, si tenemos la cadena de texto “Hola, mundo”, podemos dividirla en un array utilizando la coma como delimitador de la siguiente manera:

let texto = "Hola, mundo"
let arrayTexto = texto.split(",")
//Resultado: arrayTexto = ["Hola", " mundo"]

En este caso, la coma se utiliza como delimitador para dividir la cadena en dos elementos separados.

Topic: Arreglos multidimensionales en JavaScript y los métodos .split() y .trim()

Recall

• ¿Cómo se crean los arreglos multidimensionales en JavaScript?
• ¿Cómo se accede a elementos específicos en arreglos multidimensionales?
• ¿Cómo se recorren los arreglos multidimensionales utilizando bucles?
• ¿Qué es el método .split() y cómo se utiliza?
• ¿Qué es el método .trim() y cómo se utiliza?

Notes

• Los arreglos multidimensionales en JavaScript se crean utilizando matrices anidadas.
• Se puede acceder a elementos específicos en arreglos multidimensionales utilizando la sintaxis de corchetes: matriz[i][j].
• Los bucles anidados son útiles para recorrer y manipular arreglos multidimensionales.
• El método .split(delimitador) se utiliza para dividir una cadena en una matriz de subcadenas.
• El delimitador puede ser un carácter, una expresión regular o una cadena de varios caracteres.
• El método .trim() se utiliza para eliminar los espacios en blanco al principio y al final de una cadena.

📌 SUMMARY:-

• Los arreglos multidimensionales en JavaScript se crean con matrices anidadas y se accede a sus elementos utilizando la sintaxis de corchetes.
• Los métodos .split() y .trim() son útiles para manipular cadenas de texto.
• El método .split() divide una cadena en una matriz de subcadenas utilizando un delimitador.
• El método .trim() elimina los espacios en blanco al principio y al final de una cadena.

Documentación

Arrays en JS

Método .split

Método .trim

genial estuvo la clase.

Haciendo lo mismo pero con For of

Uff Casi que no, así va quedando

También se podría el string en un array multidimensional de esta forma:

const map = maps.map(e => e.trim().split('\n').map(e => e.trim().split('')));

Linda forma de generar mapas…

Alt + 92 = \

wat?

Aquí hay una breve explicación del ciclo for por si tienes dudas:

for (let row = 1; row <= 10; row++) { 
	for (let col = 1; col <= 10; col++) { 
		game.fillText(emojis['X'], elementsScale * col, elementsScale * row); 
	} 
} 

Ejemplo:

• El row ya quiere empezar, en este caso desde la fila 1 hasta la 10 entonces manda la señal para iniciar, luego el “for hijo” recibe la señal y él decide qué desde la columna 1 hasta la 10 su “for padre” puede iterar filas.

En palabras más sencillas:

• Lo qué hace el código de arriba es que dentro de un canvas de 10x10 completa 10 filas por cada columna, es decir:

• • “El padre trabaja mucho y el hijo gestiona el trabajo del padre”

Yo use una minifunción 😅. Solo que por ahora me imprime el último mapa, debido al for.

Pues yo creé una función auxiliar para encapsular parte de la lógica que ya se tiene:

Bien entendi como poder acceder a los arrays y cuales metodos aplican y cuales no aplican para cuando se usan “strings”.

function startGame(){
  game.font = elemtSize + 'px Verdana';
  game.textAlign = 'end';
  // for (let i = 1; i <= 10; i++) {
  //   game.fillText(emojis['X'], elemtSize*i+4, elemtSize-10);
  // }

  const map = maps[0];
  const mapRow = map.trim().split('\n');
  const mapRowCol = mapRow.map(row => row.trim().split(''));
  // console.log({mapRowCol})
  
  for (let x = 1; x <= 10; x++) {
    for (let y = 1; y <= 10; y++) {
      game.fillText(emojis[mapRowCol[y-1][x-1]],elemtSize*x,elemtSize*y-10);
    }
  }

}

Estoy recién aprendiendo a trabajar con arreglos y cómo aún no me manejo pude lograr el reto pero sin el uso de arreglos dimensionales.

   let lastValue = '';
    const arrayMap = maps[0].split("");
    let row = 1;
    let col = 1;

    for (let a = 0; a < arrayMap.length; a++) {
        if (arrayMap[a].trim()) {
            lastValue = arrayMap[a];
            game.fillText(emojis[arrayMap[a]], elementsSize * col, elementsSize * row);
            col++;
        } else if (lastValue != arrayMap[a].trim() && col != 1) {
            col = 1;
            row++;
        }
    }

Con esta clase aprendí mucho mejor a utilizar los métodos de arreglos y a crear arreglos dimensionales, así que muchas gracias!!!

Asi creo mi array bidimensional

  const mapsRows = [];
  for (const element of maps) {
    mapsRows.push(element.trim().replaceAll(' ', '').split('\n'));
  }
  const mapRowsCols = mapsRows.map(element => element.map(subElement => subElement.split('')));

En mi funcion StarGame

function starGame(){
    canvasResize()
    game.textAlign = 'start';
    game.font = elementSize + 'px Arial'
    for (let i = 0; i < 10; i++) {
        for (let z = 1; z <= 10; z++) {
            game.fillText(emojis[mapRowsCols[2][i][z-1]], elementSize*i-10, elementSize*z-5)
        }
    }
}

A mi me quedó algo así

  const map = maps[lvl];
  const mapRow = map.trim().replaceAll(' ', '').split('\n');
  console.log(mapRow)

  for (let row = 1; row <= 10; row++) {
    for (let col = 1; col <= 10; col++) {
      const emoji = mapRow[row - 1][col - 1];
      game.fillText(emojis[emoji], elementSize * col, (elementSize -1) * row)
    }
  }

elementSize -1 es para que no se corten los emojis de la última fila

Aunque el código me esta quedando un poco diferente y deba resolver los problemas de otra manera (ya sea con ayuda de la comunidad o experimentando por mi cuenta), tal vez se deba a algunos cambios que hice al iniciar el proyecto. Estoy orgulloso de que me este proyecto me este quedando bastante bien 😁

En el ciclo for, al insertar el mapa con fillText, a la posición de X, la estamos multiplicando por ‘col’ y a la posicion de Y, por row.
Debería ser al revés ya que row (una fila) ,de izquierda a derecha debe multiplicar al eje X (el horizontal). Igual con el eje Y (el vertical), debe ser multiplicado por col (de arriba a abajo).

Asi el mapa se invierte:

Me parece muy enredoso andar transformando y creando map mapRows mapRowCols si con una linea podemos tener una matriz con los datos limpio. Aunque está muy bien saber usar funciones como map(), tampoco hay que matar moscas a base de cañonazos

    const ctx = canvas.getContext("2d");  
    ctx.font = (element_size-2) + "px Arial";

    const map = maps[1].trim().split("\n  ")
    console.log(map)
    for (let i = 0; i < 10; i++) {
      for (let j = 0; j < 10; j++) {
        ctx.fillText(emojis[map[j][i]], 
          (i * element_size) + 2, 
          ((j+1) * element_size) - 8
        );
      }
    }

Apuntes de clase:

• Slide 1
  
  
• Slide 2
  
  
• Slide 3
  
  
• Slide 4
  
  
• Slide 5
  
  
• Slide 6
  
  
• Slide 7
  
  
• Slide 8
  
  
• Slide 9
  
  
• Slide 10
  
  
• Slide 11
  
  
• Slide 12
  
  
• Slide 13
  
  
• Slide 14
  
  
• Slide 15
  
  
• Slide 16
  
  
• Slide 17
  
  
• Slide 18
  
  
• Slide 19
  
  
• Slide 20
  
  
• Slide 21
  
  
• Slide 22
  
  
• Slide 23
  
  
• Slide 24
  
  
• Slide 25
  
  
• Slide 26
  
  

Dato curioso que descubrí mientras jugaba con las funciones de hoy, Si le quitas el .split(’’) al:

const mapRowCols = mapRows.map(row => row.trim().split(''));

La consola te devolverá:

['IXXXXXXXXX', '-XXXXXXXXX', '-XXXXXXXXX', '-XXXXXXXXX', '-XXXXXXXXX', '-XXXXXXXXX', '-XXXXXXXXX', '-XXXXXXXXX', '-XXXXXXXXX', 'OXXXXXXXXX']

Todo dentro de un array y no en arrays separados dentro de un superarray, de todas maneras sigue funcionando el ciclo for con eso 😄

Por si no tienen claro el eje X y el Y.

Estoy haciendo un despapaye con mi código XD

 

realmente estoy descubriendo cosas interesantes de js, no sabia que en js no podía acceder al espacio de la memoria de un arreglo de strings por medio de los indices XD batalle por que estaba tratando al map como un registro

map[_idx][y][x] T^T

de hecho me sorprendió que el arreglo lo maneja de forma lineal y se pude acceder como un array unico valga la redundancia, el problema es que hay que meter condiciones para que quede bien y no opte por esta opcion.

map[idx][…] 0,1…OO

quien diría, me gusto mucho que tiene un recorredor aun que creo darme una idea de como funciona me intriga su sintaxis 😃

const _matrix = _m.map(fila => fila.trim().split(’’));