¿Qué es un array bidimensional?

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

Contenido del curso

Introducción

1
Programemos un juego con JavaScript
17:13 min

Canvas

Mapa del juego

Movimientos del jugador

Colisiones

Bonus: adictividad

Deploy

Próximos pasos

Tomar examen

Comentarios

Juan Pablo Soto Velasco

student•

Comparto mi solución al reto 😄:

Aaron Carhuaricra

student•

Yo lo hice parecido pero el (+5) lo vincule al (element size) para que responda con cualquier tamaño, saludos

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

Miguel Torres Cerna

student•

genial , me gusta mucho su enseñanza.

Josue Cerron Tuesta

student•

Muy buen curso!

Beder Danilo Casa Condori

student•

es muy bueno en lo que hace

Manuel Araujo

student•

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

Julia Gabriela Nieva Paredes

student•

Mi solución: [](

Laura Muñoz

student•

RETO:

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

Gualberto Montiel

student•

Asi quedo mi codigo:

Andrés Toledo Margalef

student•

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

Darvin Emil Rodriguez Nuñez

student•

me sale mal esto, no entendo por que?

Juan Castro

teacher•

Recuerda que puedes revisar propiedades como el textAlign: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign

JORGE MANRIQUE CHAVARRO

student•

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

Santiago Montero

student•

Solucion del Reto <3

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

Miguel Negron Garcia

student•

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

(

Elío Diez

student•

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

Alexander Palazuelos

student•

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

Cristian Zapata

student•

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 ++;
        }

Victor Hugo Cruz Carballo

student•

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

}

Axel Enrique Galeed Gutierrez

student•

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

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

Jhon Eduard Bocanegra Ortiz

student•

Asi quedo:

Javier Núñez

student•

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

Luis Angel Santillan

student•

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!!!

JeanCarlos Atoche Pascual

student•

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

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

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

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

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

}

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

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

¿Qué es un array bidimensional?

Introducción

Programemos un juego con JavaScript

Canvas

¿Qué es canvas en JavaScript?

Tamaño del canvas y sus elementos

Canvas responsive

Mapa del juego