¿Qué es un array bidimensional?
Contenido del curso
Canvas
Mapa del juego
Movimientos del jugador
Colisiones
Bonus: adictividad
Deploy
Próximos pasos
¿Qué es un array bidimensional?
Contenido del curso
¿Qué es un array bidimensional?
Juan Pablo Soto Velasco
Estudiante
Aaron Carhuaricra
Estudiante
Miguel Torres Cerna
Estudiante
Josue Cerron Tuesta
Estudiante
Beder Danilo Casa Condori
Estudiante
Manuel Araujo
Estudiante
Julia Gabriela Nieva Paredes
Estudiante
Laura Muñoz
Estudiante
Gualberto Montiel
Estudiante
Andrés Toledo Margalef
Estudiante
Darvin Emil Rodriguez Nuñez
Estudiante
Juan Castro
Profesor
JORGE MANRIQUE CHAVARRO
Estudiante
Santiago Montero
Estudiante
Miguel Negron Garcia
Estudiante
Elío Diez
Estudiante
Alexander Palazuelos
Estudiante
Cristian Zapata
Estudiante
Victor Hugo Cruz Carballo
Estudiante
Axel Enrique Galeed Gutierrez
Estudiante
Jhon Eduard Bocanegra Ortiz
Estudiante
Javier Núñez
Estudiante
Luis Angel Santillan
Estudiante
JeanCarlos Atoche Pascual
EstudianteComparto mi solución al reto 😄:
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)); } }
genial , me gusta mucho su enseñanza.
Muy buen curso!
es muy bueno en lo que hace
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); } }
Asi quedo mi codigo:
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); } } }
me sale mal esto, no entendo por que?
Recuerda que puedes revisar propiedades como el textAlign: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign
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 <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); } } }
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); } }
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. :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
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) } } };