¿Qué es un array bidimensional?

Comparto mi solución al reto 😄:

genial , me gusta mucho su enseñanza.

for(j=1; j<=10; j++) {
    for(i=1; i <= 10; i++) {
        game.fillText(emojis['X'], elementsSize*i, elementsSize*j);
    }
}

Mi solución: [](

RETO:

for(let i = 1; i <= 10; i++){
        for(let j = 1; j <= 10; j++){
            game.fillText(emojis['X'], elementsSize * i , elementsSize * j);
        }
    }

Yo lo arme asi, porque me molestaba como se salia la Bombita (Rodriguez 😉 😉 ) del canvas

function startGame() {
  game.font = (elementsSize - 8) + "px Helvetica";
    console.log(game.font)
  game.textAlign = "left";

  for (let i = 1; i <= 10; i++) {
      for(let f = 0; f < 10; f++) {
          game.fillText(emojis["X"], elementsSize * f, elementsSize * i - 10);
      }
  }
}

Comparto mi solución.

    for (let x = 1; x <= 10; x++) {
        for (let y = 1; y <= 10; y++) {
            game.fillText(emojis['X'], elementSize * x, elementSize * y);
        }
    }

Solucion del Reto ❤️

function starGame() {
  game.font = elementSize + "px Verdana";
  game.textAlign = "end";

  for (let i = 1; i <= 10; i++) {
    for (let z = 1; z <= 10; z++) {
      game.fillText(emojis["X"], elementSize * i, elementSize * z);
    }
  }
}

Esta es una solucion que vi en clases pasadas y que trate de replicarla:

(

Mi solución:

for (let i=1; i<=10; i++){
   for (let h=1; h<=10; h++){   
     game.fillText(emojis['X'], elementSize*h, elementSize*i);
   };  
 };

Mi solución:

  for(let i=1; i<=10; i++){
    for (let j = 1; j <= 10; j++) {
      game.fillText(emojis['X'], elementsSize * j, elementsSize * i);
    }
  }

Asi quedo mi codigo:

Solución corta utilizando un ciclo while y creando una nueva variable.

let columnNumber = 1;
while (columnNumber < 11){

            for (let i = 1; i < 11; i++) {

            game.fillText(emojis['X'], columnNumber*elementsSize , elementsSize * i) ;
            }
            columnNumber ++;
        }

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++) {
    console.group(x)
    for (let y = 1; y <= 10; y++) {
      game.fillText(emojis[mapRowCol[y-1][x-1]],elemtSize*x,elemtSize*y-10);  
      console.log('fila' + x)
      console.log('columna' + y)
    }  
    console.groupEnd()  
  }

}

Les comparto mi solución al reto, les estaré dejando tanto el código como el resultado final. 😄

Repositorio de GitHub.

Código

import { EMOJIS } from './maps.js';

const startGame = (fontSize, elementSize) => {
    GAME.font = `${fontSize}px sans-serif`;
    GAME.textAlign = 'left';

    let yPositionEmoji = elementSize;
    let yCounterPositionEmoji = 1;
    let xCounterPositionEmoji = 0;

    for (let i = 0; i < 100; i++) {
        if (i % 10 === 0 && i !== 0) {
            yCounterPositionEmoji++;
            yPositionEmoji = elementSize * yCounterPositionEmoji;
            xCounterPositionEmoji = 0;
        }

        const X = elementSize * xCounterPositionEmoji * 1.015;
        const Y = yPositionEmoji * 0.98;

        GAME.fillText(EMOJIS['X'], X, Y);
        xCounterPositionEmoji++;
    }
};

const setCanvasSize = () => {
    const WIDTH_WINDOWS = window.innerWidth;
    const HEIGHT_WINDOWS = window.innerHeight;
    const IS_SMALLER_HEIGHT = WIDTH_WINDOWS < HEIGHT_WINDOWS && WIDTH_WINDOWS < 550;
    const WIDTH_BASE = window.innerWidth * 0.9;
    const HEIGHT_BASE = window.innerHeight * 0.6;
    const SIDE_CANVAS = (IS_SMALLER_HEIGHT)
        ? (WIDTH_BASE).toString()
        : (HEIGHT_BASE).toString();

    CANVAS.setAttribute('width', SIDE_CANVAS);
    CANVAS.setAttribute('height', SIDE_CANVAS);

    const ELEMENT_SIZE = Number(SIDE_CANVAS) / 10.25;
    const FONT_SIZE = ELEMENT_SIZE * 0.82;

    startGame(FONT_SIZE, ELEMENT_SIZE);
};

const CANVAS = document.querySelector('#main__game-container-id');
const GAME = CANVAS.getContext('2d');

window.addEventListener('load', setCanvasSize);
window.addEventListener('resize', setCanvasSize);

Resultado

Asi quedo:

Comparto la solución del reto, o una soloción:

for (let j = 1; j <= 10; j++){
        for (let i = 1; i <= 10; i++){
            game.fillText(emojis['X'], elementsSize * i, elementsSize * j);      
        }         
}

Lo resolvi de la siguiente manera.

Y aqui el resultado…

Por alguna razon le etoy sumando 22 a mi eje y* por que no entra dentro del canva si alguien me pudiera ayudar a resolver eso, Gracias!!!

Hice el Reto usando el mapa, sin ver las siguientes clases, de momento, solo reenderize el primer mapa, no se que venga mas adelante xD

const startGame = () => {

  game.font = elementsSize + 'px Verdana';
  game.textAlign = 'start';
  game.textBaseline = 'top';

  let newMaps = maps[0];
  newMaps = newMaps.trim().split('\n')
  newMaps = newMaps.map(element => element.trim());
  newMaps = newMaps.map(element => [...element])

  for (let i = 0; i < newMaps.length; i++) {
    for (let j = 0; j < newMaps.length; j++) {
      game.fillText(emojis[newMaps[i][j]], elementsSize * j, elementsSize * i)
    }
  }
};

Use los mapas ya disponibles, si se cambia de mapa se cambia el orden con

maps[0][i]

maps[1][i]

Código

const canvas = document.querySelector("#game");
const game = canvas.getContext("2d");

window.addEventListener("load",setCanvasSize);
window.addEventListener("resize",setCanvasSize);


let canvassize;

function setCanvasSize(){
    
    if( window.innerWidth > window.innerHeight ){
        canvassize = window.innerHeight*0.70;
    }else{
        canvassize = window.innerWidth*0.60;
        
    }  
    
    canvas.setAttribute("width", canvassize);
    canvas.setAttribute("height", canvassize);
    startGame()
}
function startGame(){
    // Espera que se cargue la página
    // game.fillRect(0,50,100,100);
    // game.clearRect(50,50,100,100);
    // game.fillStyle ="Purple"; 
    // game.font = "25px Verdana";
    // game.textAlign ="center"; //start, end, left, center, right
    // game.fillText("Platzi",50,50,200);
    // const valueheight = window.innerHeight; // height value of windows
    // const valuewidth = window.innerWidth; // width value of windows
    
    const elementSize = canvassize/10;
    console.log({elementSize,game});  
    game.textAlign = "end";
    game.textBaseline = "bottom"; // align text en forma vertical 'top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'
    game.font = String (elementSize -10) + "px Arial" ;
    const valuemaps = Object.keys(emojis);
    console.log(valuemaps);
    let count1 = 1;
    let count2 = 1;
    for (let i = 0; i <maps[0].length; i++) {
        for (let j = 0; j < valuemaps.length; j++) {
           if(maps[0][i] == valuemaps[j]){
            game.fillText(emojis[valuemaps[j]] ,elementSize * count1 , elementSize * count2);
            if(count1 == 10){
                count1 = 1;
                count2++;
            }else{
                count1++;
               
            }
            
           }
        }
        if(count2 > 10){
            count2 = 1 ;
        }  
    }
    console.log({count1,count2})
}

Mi solución

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

Bien! también hice el reto pero en realidad desde la 3ra clase.
Aquí está mi aporte:

    for (let y = 1; y <= 10; y++) {
        let possY = elementSize * y - 16;
            for (let i = 0; i < 10; i++) { 
            game.fillText('▚', elementSize * i + 1, possY);
        }
    }

Con un solo ciclo for 😉

const canvas = document.querySelector('#game');
const juego  = canvas.getContext('2d');

window.addEventListener('load', redimencionar);
window.addEventListener('resize', redimencionar);

function redimencionar(){
    const canvas_t = (window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight) *.75 ;
    canvas.setAttribute('width', canvas_t + canvas_t / 25 );
    canvas.setAttribute('height', canvas_t + canvas_t / 25);
    inicia(canvas_t / 10);}

function inicia(size_t = 0){
    juego.font = size_t +'px arial';
    for(i = 1, j = 0; j < 10;  j = (i/10) | 0, ++i)
        juego.fillText(emojis['X'], size_t * j, size_t * (i - (j * 10)));}

Ya lo habia compartido en la clase anterior, no sabia que iba a ser reto.

  for (let ver = 1; ver <= 10; ver++) {
    for (let hor = 1; hor <= 10; hor++) {
      game.fillText(emojis["X"], elementsSize * hor, elementsSize * ver);
    }
  }

reto solucionado

     for (let i = 1; i <= 10; i++) {
        for (let j = 1; j<= 10; j++) {
            game.fillText(emojis['X'], elemetsSize * i, elemetsSize * j)

        }
    }```

Les comparto mi solución al reto y una pequeña explicación de lo que entiendo. Si me equivoco, por favor sería de gran ayuda si me corriges!

Para llenar toda nuestra cuadricula de bombas lo que haremos es hacer uso de dos ciclos for, uno que se encargará de las filas y otro de las columnas respectivamente. Sabemos que tenemos una cuadricula de 10 x 10, por lo tanto necesitaremos llenar 100 elementos.

¿Cómo lo haremos?

Para esto crearemos el primer for que será el encargado de las filas, y luego crearemos dentro de este el segundo ciclo for encargado de las columnas, ahora dentro del segundo for haremos uso del método fillText para agregar nuestro emoji, dándole como coordenadas el valor de nuestro elementSize (o tamaño de celda) multiplicado por la fila e(el eje x), y luego el elementSize (o tamaño de celda) para las columnas (el eje y)

¿Cómo funciona esto?

El primer ciclo for se inicializa con un valor de 1, luego se inicializa el segundo ciclo for con un valor de 1 también, ahora este segundo ciclo se ejecutará completamente y lo único que cambiará es el valor de las columnas en la iteración del ciclo interior. Ahora continuamos con el ciclo exterior con un valor de 2 y el ciclo for interior con un valor de 1 nuevamente repitiendo el proceso, solo que con el cambio del valor en las filas.

MI solucion al reto es

for (let x = 0; x < 10; x++) {
    for (let y = 1; y <= 10; y++) {
      game.fillText(emojis["X"], elementsSize * x, elementsSize * y);
    }
  }

Ahora si viene lo chiiiido

el codigo completo es

document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('game');
    const game = canvas.getContext('2d');

    let canvasSize;
    let elementsSize;

    window.addEventListener("load", setCanvasSize());
    window.addEventListener("resize", setCanvasSize());

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

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

        elementsSize = (canvasSize / 10) - 1;

        startGame();
    }

    function startGame() {
    game.font = elementsSize + "px Verdana" ;
    game.textAlign = "";

    for(let w = 0; w < 10; w++){
        for (let h = 1; h <= 10; h++) {
            game.fillText(emojis['X'], elementsSize * w, elementsSize * h);
        }
    }

    }
});

y el ciclo de repetición es

for(let w = 0; w < 10; w++){
        for (let h = 1; h <= 10; h++) {
            game.fillText(emojis['X'], elementsSize * w, elementsSize * h);
        }
    }

Puede ser?

 for(let i = 0; i < 10; i++){
        for(let j = 1; j <= 10; j ++){
            game.fillText(emojis['X'],elementSize*i, elementSize*j);
        }
    }

Lección 5: ¿Qué es un array bidimensional?
Objetivo de la lección: Renderizar lo que nos entregue una variable o un array, usando el concepto de array multidimensional.
Siguiendo esta estructura:
Map[Row[“Col”]]

Nuestros arrays quedarán lucirán así:

[
[‘I’,’-’,’-’,‘X’,‘X’,‘X’,‘X’‘X’,‘X’,‘X’],
[‘X’,’-’,’-’,‘X’,‘X’,‘X’,‘X’‘X’,‘X’,‘X’],
[‘X’,’-’,’-’,‘X’,‘X’,‘X’,‘X’‘X’,‘X’,‘X’],
[‘X’,‘O’,’-’,’-’,‘X’,‘X’,‘X’‘X’,‘X’,‘X’],
]

Reto: Ir al archivo game.js y renderizar en los dos ejes, para que todas las filas y columnas tengan un elemento. Hay que usar dos ciclos for para ello.

Para rellenar el canvas con los obtáculos:

function startGame () {
    contextoCanvas.font = elementsSize + 'px Verdana' 
    contextoCanvas.textAlign = 'end'

    for (let i = 1; i <= 10; i++) {
        for (let z = 1; z <= 10; z++) {
            contextoCanvas.fillText(emojis['X'], elementsSize * i , elementsSize * z);   
        }
    }
}

Reto:

• Código:

• Resultado:
  
  

esta em mi solucion:

game.js

const canvas = document.querySelector("#game");
const game = canvas.getContext("2d");

window.addEventListener("DOMContentLoaded", startGame);
window.addEventListener("resize", setCanvasSize);

let elementsSize;
let map;

function startGame() {
  parseMap();
  setCanvasSize();
}

function setCanvasSize() {
  const canvasSize = Math.min(window.innerHeight, window.innerWidth) * 0.75;

  canvas.width = canvasSize;
  canvas.height = canvasSize;

  elementsSize = Math.floor(canvasSize / 10 - 1);

  game.font = `${elementsSize}px Verdana`;

  drawMap();
}

function drawMap() {
  game.clearRect(0, 0, canvas.width, canvas.height);

  for (let y = 0; y < map.length; y++) {
    for (let x = 0; x < map[y].length; x++) {
      const emoji = map[y][x];
      game.fillText(emoji, x * elementsSize, (y + 1) * elementsSize);
    }
  }
}

function parseMap() {
  const mapString = maps[0].trim();
  const lines = mapString.split("\n").map((line) => line.trim());

  map = lines.map((line) => line.split("").map((symbol) => emojis[symbol]));
}

function startGame(){
   
    game.font = elementsSize + 'px Verdana';
    game.textAlign = "end";

    for (let i = 0; i <= 10; i++) {
        for (let j = 1; j < 11; j++) {
          game.fillText(emojis['X'], elementsSize*i, elementsSize*j);
      }   
    }
}

Cada que dicen multidimensional o multivariable me viene a la mente el cálculo multivariable y yo lloro 😦

RETO CUMPLIDO.

Solución al reto:

function starGame(){
    
    game.font = elementSize + 'px Verdana';
    game.textAlign = 'start' 
    for (let i = 0; i < 10; i++) {
        for (let z = 1; z < 11; z++) {
           game.fillText(emojis['X'],elementSize * i,elementSize * z);    
        }    
    }
};

Logre hacer el reto pero yo lo hice de otra forma ya que al inicio no se me centraban de forma correcta las bombas, así que lo hice restándole 2 pixeles.

for (let i = 0; i < 10; i++) {
        for (let x = 1; x <= 10; x++) {
            game.fillText(emojis['X'], elementsSize * i, elementsSize*x);
        }
    }

Lo que se el for del inicio no le puse <= ya que si me salian los 10 desde un inicio y el segundo for si le puse ya que ese si me daba 9 y poniendo <= 10 me dio las 10 bombas.
Este es mi codigo completo por el momento.

const canvas = document.querySelector('#game');
const game = canvas.getContext('2d');

let canvasSize;
let elementsSize;


window.addEventListener('load', setCanvasSize);
window.addEventListener('resize', setCanvasSize);

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

    elementsSize = (canvasSize / 10) - 2;
    startGame();
}

function startGame(){
    game.font = elementsSize + 'px Helvetica Neue';
    game.textAling = 'end';

    for (let i = 0; i < 10; i++) {
        for (let x = 1; x <= 10; x++) {
            game.fillText(emojis['X'], elementsSize * i, elementsSize*x);
        }
    }

}

function cicloArray() {
  for (let i = 1; i <= 10; i++) {
    for (let j = 1; j <= 10; j++) {
      game.fillText(emojis["X"], elementsSize * i, elementsSize * j);
    }
  }
}

Hola a todos

Acá les dejo el reto de la clase

function startGame() {
  game.font = `${elementSize}px Verdana`;
  game.textAlign = 'center';
  game.textBaseline = 'middle';

  for (let i = 1; i <= 10; i++) {
    for (let j = 1; j <= 10; j++) {
      game.fillText(emojis['X'], elementSize * (i - 1/2), elementSize * (j - 1/2));
    }
  }
}

En la línea game.fillText(emojis['X'], elementSize * (i - 1/2), elementSize * (j - 1/2)); le resto 1/2 tanto a la posición en x como a la posición en y para que todos los elementos queden centrados dentro del mapa, ya que las propiedades game.textAlign = 'center'; y game.textBaseline = 'middle'; centran el texto en el canvas.

Pues yo lo entendí así:

for (let i = 1; i <= 10; i++) {
    for (let j = 1; j<= 10; j++) {
      game.fillText(emojis['X'], elementSize * i, elementSize * j);
    }
  }

MI solución elegante:

function startGame() {
  console.log({ canvasSize, elementsSize });

  game.font = elementsSize + 'px Verdana';
  game.textAlign = 'end';

  for (let i = 1; i <= 10; i++) {
    let vertical=elementsSize*i;
    for (let i = 1; i <= 10; i++){
    game.fillText(emojis['X'], vertical, elementsSize * i);
    }
   
  }
}

Solucion con ciclo while:

function drawElement(){
    const size = canvas.width / 10;
    let y = 5;
    
    context.font=`${size * 0.75}px sans-serif`;
    context.textAlign='left';
    context.textBaseline='top';

    while(y < canvas.height){
        context.fillText(emojis.X, 0, y);
        let x = size;
        while(x < canvas.width){
            context.fillText(emojis.X, x, y);
            x += size;
        };
        y += size;
    };
};

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.

Mi solución al reto de la clase de hoy, dejo todo el código js

const canvas = document.querySelector('#game')

const game = canvas.getContext('2d')

window.addEventListener('load', gameMain)
window.addEventListener('resize', gameMain)


function gameMain() {
    elementSize = adjustCanva()
    renderMap(elementSize)
}

function renderMap(elementSize) {
    game.font = elementSize + 'px Verdana'
    

    for (let i = 1; i <= 10; i++) {
        for (let j = 0; j < 10; j++) {
            game.fillText(emojis['X'], j * elementSize, i * elementSize)
        }
    }
}

function adjustCanva() {
    let sWidth = window.innerWidth
    let sHeight = window.innerHeight

    let canvaSize = sWidth > sHeight ? sHeight * 0.6 : sWidth * 0.6
    let corr = 0.015 * canvaSize

    canvas.setAttribute('width', canvaSize)
    canvas.setAttribute('height', canvaSize + corr)

    let elementSize = ( canvaSize * 0.98 ) / 10

    return elementSize
}

Reto completado:

    let newSize; 
    for (let i = 1; i <= 10; i++) {
        game.fillText(emojis['X'], elementSize * i, elementSize);
        newSize = elementSize * i
        for (let i = 1; i <= 10; i++){
            game.fillText(emojis['X'], newSize, elementSize * i)
        }
    }

for (let y = 1; y < 4; y++) {
	for (let x = 1; x < 4; x++) {
		game.fillText(arrows['up'],elementsSize * x, elementsSize * y);
	}
}

// en este caso, opté por la utilización de menos elementos