¿Qué es un array bidimensional?

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

Clase anteriorSiguiente clase

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

¿Qué es un array bidimensional?

Arreglos multidimensionales en JavaScript

Refactor del mapa de juego

Movimientos del jugador

Eventos y botones

Objeto playerPosition

Limpieza de movimientos

No te salgas del mapa

Colisiones

Detectando colisiones fijas

Detectando colisiones con arrays

Victoria: subiendo de nivel

Derrota: perdiendo vidas

Bonus: adictividad

Sistema de vidas y corazones

Sistema de tiempo y puntajes

¿Qué es localStorage?

Guardando records del jugador

Deploy

Depurando errores del juego

Desplegando el juego a GitHub Pages

Próximos pasos

Reto: reinicio del juego

Reto: timeouts de victoria o derrota

¿Quieres un simulador laboral?