Clase 6 de 24 • Taller Práctico de JavaScript: ¡Crea tu Primer Videojuego!
Contenido del curso
Tommy Toala Cox
Josue Cerron Tuesta
Josue Cerron Tuesta
César Augusto Cortés Labrada
Julia Gabriela Nieva Paredes
Diego Toro Cárdenas
Antonio Mora
Diego Hanssel Perez
Luis Palomo
Guadalupe Monge Barale
Duvan Yesid Becerra Rodríguez
Angel David Velasco Bonifaz
Máximo Calderon
Génesis Jarlenis Patiño Ynfante
Andres Cavedal
Luis Miguel Rodríguez
Miguel Torres Cerna
Santiago Velásquez Serna
David Silgado
Brandon Argel Verdeja Domínguez
Juan Mercado
Juan Castro
Adhemar Duran Gahuincha
Juan Mercado
Holman Hernan Galeano Caballero
Marcia Hernández
Juan Castro
Aaron Santiago Loyo Zabala
Jhon Eduard Bocanegra Ortiz
Amado Dubón
sergio andres navarro melendez
Juan Zarate
Yosber Emmanuel Guerrero Colmenares
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 -
//(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(""))
Mucho más limpio. regex God!
Gracias bro!
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.
Modificar la función startGame para que muestre el mapa que le indiquemos.
Increible solucion bro, mas limpia en codigo y bastante elegible tambien.
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í?
También hice lo mismo. Dejo mi comentario para ver si a alguien se le ocurrió otra cosa.
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.
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
Hola Angel.... Me parece mucho mas limpio y organizado como lo propones... Excelente aporte....
Gracias Ángel!! Que fuente usaste? mis emojis se ven muy grandes xD
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
Notes
matriz[i][j].📌 SUMMARY:-
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
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)
¿Si yo quisiera un mapa personalizado solamente tendria que diseñar un nuevo array verdad?
Correcto
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?
Puedo ayudarte en algo, Marcia?
Le responde el profe por decir wat, y a muchos otros que aportaron cosas re buenas les re ignoro
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:
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:
sigo sin entender lo del ciclo doble, algguien me puede explicar?
!matriz
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.
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.