¿Qué es un array bidimensional?

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

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

Comentarios (51)51 comentarios

Juan Pablo Soto Velasco

Hace 4 años

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

Hace 4 años

genial , me gusta mucho su enseñanza.

Josue Cerron Tuesta

Hace 4 años

Muy buen curso!

Beder Danilo Casa Condori

Hace 2 años

es muy bueno en lo que hace

Manuel Araujo

Hace 4 años

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

Julia Gabriela Nieva Paredes

Hace 4 años

Mi solución: [](

Laura Muñoz

Hace 4 años

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

Hace 4 años

Asi quedo mi codigo:

Andrés Toledo Margalef

Hace 4 años

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

Hace 4 años

me sale mal esto, no entendo por que?

Juan Castro

Profesor

Hace 4 años

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

JORGE MANRIQUE CHAVARRO

Hace 3 años

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

Hace 3 años

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

Hace 3 años

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

(

Elío Diez

Hace 4 años

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

Hace 4 años

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

Hace 4 años

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

Hace 4 años

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

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

Jhon Eduard Bocanegra Ortiz

Hace 4 años

Asi quedo:

Javier Núñez

Hace 4 años

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

Hace 4 años

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

Hace 4 años

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

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?

¿Qué es un array bidimensional?