No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Arreglos multidimensionales en JavaScript

6/24
Recursos

Aportes 31

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渂idimensional鈥, no 鈥渂idimencional鈥. Dale 鈥渕e 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 鈥淗ola, 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.

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*)

Haciendo lo mismo pero con For of

Alt + 92 = \

wat?

genial estuvo la clase.

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 鈥渇or hijo鈥 recibe la se帽al y 茅l decide qu茅 desde la columna 1 hasta la 10 su 鈥渇or 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:

    • 鈥淓l padre trabaja mucho y el hijo gestiona el trabajo del padre鈥

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

Uff Casi que no, as铆 va quedando

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 鈥渟trings鈥.

Linda forma de generar mapas鈥

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('')));
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 鈥榗ol鈥 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鈥O

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(鈥欌));