Tommy Toala Cox
Josue Cerron Tuesta
Mucho más limpio. regex God!
Josue Cerron Tuesta
Gracias bro!
0:00/23:38
Arreglos multidimensionales en JavaScript
Tommy Toala Cox
Josue Cerron Tuesta
Mucho más limpio. regex God!
Josue Cerron Tuesta
Gracias bro!
Antonio Mora
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.
Diego Hanssel Perez
Increible solucion bro, mas limpia en codigo y bastante elegible tambien.
Luis Palomo
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
También hice lo mismo. Dejo mi comentario para ver si a alguien se le ocurrió otra cosa.
Duvan Yesid Becerra Rodríguez
Angel David Velasco Bonifaz
Máximo Calderon
Hola Angel.... Me parece mucho mas limpio y organizado como lo propones... Excelente aporte....
Génesis Jarlenis Patiño Ynfante
Gracias Ángel!! Que fuente usaste? mis emojis se ven muy grandes xD
Andres Cavedal
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 Rodríguez
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
Miguel Torres Cerna
genial estuvo la clase.
Santiago Velásquez Serna
Haciendo lo mismo pero con For of
David Silgado
Uff Casi que no, así va quedando
Brandon Argel Verdeja Domínguez
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
¿Si yo quisiera un mapa personalizado solamente tendria que diseñar un nuevo array verdad?
Juan Castro
ProfesorCorrecto
Adhemar Duran Gahuincha
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
Linda forma de generar mapas....
Holman Hernan Galeano Caballero
Alt + 92 = \
Marcia Hernández
wat?
Juan Castro
ProfesorPuedo ayudarte en algo, Marcia?
Aaron Santiago Loyo Zabala
Le responde el profe por decir wat, y a muchos otros que aportaron cosas re buenas les re ignoro
Jhon Eduard Bocanegra Ortiz
Amado Dubón
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:
Alejandro Aguilar Sierra
Para no tener que crear un arreglo de arreglos, se puede usar directamente el mapa. Para calcular la posición correspondiente:
p = (row-1)*15 + 5 + (col-1);
y luego usas
emojis[map[p]]
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(""))
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
