Cursos Empresas Blog Live Conf Eventos Precios

0:005:48

¿Qué es un array bidimensional?

Taller Práctico de JavaScript: ¡Crea tu Primer Videojuego!

Clase 5 de 24

Clase 5 / 24

Axel Enrique Galeed Gutierrez

Hace 4 años

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

Comentarios (51)51 comentarios

Juan Pablo Soto Velasco

Comparto mi solución al reto 😄:

Aaron Carhuaricra

Hace 3 años

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

genial , me gusta mucho su enseñanza.

Josue Cerron Tuesta

Muy buen curso!

Beder Danilo Casa Condori

Hace 2 años

es muy bueno en lo que hace

Manuel Araujo

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

Julia Gabriela Nieva Paredes

Mi solución: [](

Laura Muñoz

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

Asi quedo mi codigo:

Andrés Toledo Margalef

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

me sale mal esto, no entendo por que?

Juan Castro

Profesor

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

JORGE MANRIQUE CHAVARRO

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

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

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

(

Elío Diez

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

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

Cristian Zapata

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

Jhon Eduard Bocanegra Ortiz

Asi quedo:

Javier Núñez

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

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

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

¿Qué es un array bidimensional?

Progreso del curso

Introducción

Canvas

Mapa del juego

Movimientos del jugador

Colisiones

Bonus: adictividad

Deploy

Próximos pasos