Arreglos multidimensionales en JavaScript

Clase 6 de 24 • Taller Práctico de JavaScript: ¡Crea tu Primer Videojuego!

Tommy Toala Cox

student•

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(""))

Josue Cerron Tuesta

student•

Mucho más limpio. regex God!

Josue Cerron Tuesta

student•

Gracias bro!

César Augusto Cortés Labrada

student•

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.

Julia Gabriela Nieva Paredes

student•

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.

Diego Toro Cárdenas

student•

⏯

Antonio Mora

student•

Les comparto mi solución al reto:

Ordenar los mapas para que sean arreglos multidimensionales.

Código utilizado
Resultado

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

Código utilizado
Resultado

Diego Hanssel Perez

student•

Increible solucion bro, mas limpia en codigo y bastante elegible tambien.

Luis Palomo

student•

A mi me pasa que los íconos tienen una especie de margin o line-height muy grande y aunque use las medidas de elementSize, todos aparecen corridos hacia la derecha. Lo solucioné restandole 16px a cada uno, pero quisiera saber si alguien más tiene una mejor solución para eso. ¿Alguno tendrá algún truquitiyo por ahí?

Guadalupe Monge Barale

student•

También hice lo mismo. Dejo mi comentario para ver si a alguien se le ocurrió otra cosa.

Duvan Yesid Becerra Rodríguez

student•

Después de una hora (o algo más) quitando y poniendo, llegue a la conclusión que es mejor modificar el elementSize. Dado que son un par de pixeles los que molestan decidí en un inicio restar 1 o dos al elementSize:

  elementSize = (canvasSize / 10) - 2;

Pero de está forma, al cambiar a desktop quedaba muy grande, entonces en el if del tamaño del canvas puse 1 para mobile y 2 para tablet:

if (window.innerHeight > window.innerWidth) {
    canvasSize = window.innerWidth * 0.8;
    elementSize = (canvasSize / 10) - 1;
  } else {
    canvasSize = window.innerHeight * 0.8;
    elementSize = (canvasSize / 10) - 2;
  }

Y aunque mejoro, seguía un poquito mal colocado. Hice más pruebas en los ejes X y Y pero no me cuadraba. Por lo cual pensé que si lo dañaba el responsive había que solucionarlo de una forma que dependiera del responsive. Y quedó así:

function setCanvasSize() {
  if (window.innerHeight > window.innerWidth) {
    canvasSize = window.innerWidth * 0.8;
  } else {
    canvasSize = window.innerHeight * 0.8;
  }

  canvas.setAttribute('width', canvasSize);
  canvas.setAttribute('height', canvasSize);

  elementSize = (canvasSize / 10) * 0.97;

  startGame();
}

Pueden agregar o quitar al 0.97 poniendo una tercera unidad dependiendo sus necesidades.

Así quedó:

Espero haber podido ayudar a resolver su problema.

Angel David Velasco Bonifaz

student•

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

![](

Máximo Calderon

student•

Hola Angel.... Me parece mucho mas limpio y organizado como lo propones... Excelente aporte....

Génesis Jarlenis Patiño Ynfante

student•

Gracias Ángel!! Que fuente usaste? mis emojis se ven muy grandes xD

Andres Cavedal

student•

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.

Luis Miguel Rodriguez

student•

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

Miguel Torres Cerna

student•

genial estuvo la clase.

Santiago Velásquez Serna

student•

Haciendo lo mismo pero con For of

David Silgado

student•

Uff Casi que no, así va quedando

Brandon Argel Verdeja Domínguez

student•

El back slash se puede añadir con Alt gr + ' Alt gr más comilla simple (Alt gr no es la misma tecla qué Alt)

Juan Mercado

student•

¿Si yo quisiera un mapa personalizado solamente tendria que diseñar un nuevo array verdad?

Juan Castro

teacher•

Correcto

Adhemar Duran Gahuincha

student•

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('')));

Juan Mercado

student•

Linda forma de generar mapas....

Holman Hernan Galeano Caballero

student•

Alt + 92 = \

Marcia Hernández

student•

wat?

Juan Castro

teacher•

Puedo ayudarte en algo, Marcia?

Aaron Santiago Loyo Zabala

student•

Le responde el profe por decir wat, y a muchos otros que aportaron cosas re buenas les re ignoro

Jhon Eduard Bocanegra Ortiz

student•

Amado Dubón

student•

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"

sergio andres navarro melendez

student•

sigo sin entender lo del ciclo doble, algguien me puede explicar?

Juan Zarate

student•

Imagina que tienes esta matriz y necesitas saber cuantos numeros negativos hay, para recorrer todos los valores de la matriz debes usar un ciclo doble.

Un ciclo simple te permitira recorrer solo una fila, si le agregas un ciclo mas podras recorrer todas las filas de la matriz.

Vamos al codigo

// el primer ciclo se encargara de recorrer las filas de la matriz
for(int fila = 0; fila < 4; fila++){
	// el segundo ciclo se encargara de recorrer las columnas de la matriz
	for(int columna = 0; columna< 4; columna++){
		System.out.println("valor de fila " + fila + ", valor de columna " + columna + ", valor obtenido" + matriz[fila][columna]);
	}
}

En la primera vuelta del ciclo doble obtendras estos valores. valor de fila 0, valor de columna 0, valor obtenido 1 valor de fila 0, valor de columna 1, valor obtenido 1 valor de fila 0, valor de columna 2, valor obtenido 3 valor de fila 0, valor de columna 3, valor obtenido -2

En la segunda vuelta del ciclo doble obtendras estos valores. valor de fila 1, valor de columna 0, valor obtenido 2 valor de fila 1, valor de columna 1, valor obtenido -4 valor de fila 1, valor de columna 2, valor obtenido 7 valor de fila 1, valor de columna 3, valor obtenido 2

y asi hasta que termine el ciclo.

Yosber Emmanuel Guerrero Colmenares

student•

El ciclo doble se usa para recorrer las filas y las columnas como te dijo el otro compañero. Pero algo que me hizo entenderlo mejor es de esta manera.

El ciclo exterior es el que permite decidir en que "fila" estará trabajando y el ciclo interior se encargará de la columna. De esta manera el ciclo exterior inicia y de una vez inicia el ciclo interior que se encarga de las columnas, de esta manera el ciclo de las columnas se completa y vuelve a reiniciarse el ciclo exterior cambiando su valor, permitiendo que se ejecute la siguiente fila.

/* Iniciamos el ciclo de la fila que solo avanzará al siguiente valor una vez el ciclo de columna se complete.
*/

for (fila = 0; fila < 10; fila++) {

	/* Iniciamos el ciclo interior que se encargará de las columnas. Este se completará y reiniciará en cada iteración del ciclo exterior.*/

	for (columna = 0; columna < 10; columna++) {

		/*Le decimos a game.fillText que en el array de emojis nos proporcione el emoji correspondiente que es proporcionado por nuestro array tratado mapaFinal, permitiendo que influya tanto el elemento exterior (fila o primer array) y el elemento interior (columna o array interno) */

		game.fillText(emojis[mapaFinal[fila][columna]], 			elementSize * (columna + 1), elementSize * (fila + 1))
        }
    }

Espero esto te haya ayudado algo.