Canvas responsive
Contenido del curso
Canvas
Mapa del juego
Movimientos del jugador
Colisiones
Bonus: adictividad
Deploy
Próximos pasos
Canvas responsive
Canvas responsive
Contenido del curso
Milton Estrada
Josue Cerron Tuesta
jose maria garcia
Jonhatan prieto mora
milton coronado
Miguel Torres Cerna
Josue Cerron Tuesta
Eduardo Nila
Tommy Toala Cox
Josue Cerron Tuesta
Guillermo Baldán López
Miguel Angel Barron Vallejo
José Fernando Fuentes Roa
Juan Mercado
Darvin Emil Rodriguez Nuñez
Victor Hugo Cruz Carballo
Gerónimo Pondal
Cecilia Mansilla
----- ----
Luis Palomo
Juan Castro
ProfesorLuis Palomo
Sebastián Andrés Sanhueza Tapia
Miguel Angel
Ricardo Alfonso Chavez Vilcapoma
Aaron Santiago Loyo Zabala
Ricardo Alfonso Chavez Vilcapoma
----- ----
Hector Maluy Fernandez
Así voy :P
const canvas = document.getElementById("game"); const game = canvas.getContext("2d"); window.addEventListener("load", setCanvasSize); window.addEventListener("resize", setCanvasSize); let elementsSize; function setCanvasSize() { const canvasSize = window.innerHeight > window.innerWidth ? window.innerWidth * 0.8 : window.innerHeight * 0.8; canvas.setAttribute("width", canvasSize); canvas.setAttribute("height", canvasSize); elementsSize = canvasSize / 10; startGame(); } function startGame() { game.font = `${elementsSize}px Verdana`; game.textAlign = "end"; for (let i = 1; i <= 10; i++) { game.fillText(emojis["X"], elementsSize * i, elementsSize); game.fillText(emojis["X"], elementsSize, elementsSize * i); game.fillText(emojis["X"], elementsSize * i, elementsSize * i); } }
Gracias por compartir!
yo encontre esto :D
window.onresize=startGame;
si la ventana cambia de tamaño ejecuta la funcion 'startGame'
asi voy hasta ahora con typescript.
const canvas = <HTMLCanvasElement> document.querySelector("#game"); const game = canvas.getContext("2d"); let canvasSize: number; let elementsSize: number; window.addEventListener("load", startGame); window.addEventListener("resize", setCanvasSize); function startGame():void { game!.font = `${elementsSize}px Verdana` game!.textAlign = "end" for (let i = 1; i <= 10; i++) { game!.fillText(emojis["X"], elementsSize * i, elementsSize); } } function setCanvasSize(): void { canvasSize = window.innerHeight > window.innerWidth ? window.innerWidth * 0.8 : window.innerHeight * 0.8; elementsSize = canvasSize * 0.1; canvas.setAttribute("width", canvasSize.toString()) canvas.setAttribute("height", canvasSize.toString()) }
con typeScript! que valiente jejeje
Muy genial tu clase. Me encanta.
Estuvo bueno la clase!
En mi solucion descubri que hay una funcion llamada window.location.reload(); utilice eso en el if else pero mi navegador termino en un bucle infinito
if(window.innerHeight > window.innerWidth){ canvasSize = window.innerWidth * 0.8; window.location.reload(); }else{ canvasSize = window.innerHeight * 0.8; window.location.reload(); }
xD, que loco, y se queda en bucle infinito cuando lo ejecutas o cuando intentas cambiar el tamaño de la pagina?
Wow! que loco!
Lección 4: Canvas responsive Objetivo de la lección: ¿Qué pasa si cambiamos el tamaño de la ventana de nuestro navegador mientras estamos jugando? Ese problema es el que vamos a solucionar.
3)Ahora lo que hacemos es que cada vez que hagamos resize borramos el mapa.
De esta manera el código de game.js queda así: const canvas = document.getElementById("game"); const game = canvas.getContext("2d");
window.addEventListener("load", setCanvasSize);
window.addEventListener("resize", setCanvasSize);
let elementsSize;
function setCanvasSize() {
const canvasSize =
window.innerHeight > window.innerWidth
? window.innerWidth * 0.8
: window.innerHeight * 0.8;
canvas.setAttribute("width", canvasSize);
canvas.setAttribute("height", canvasSize);
elementsSize = canvasSize / 10;
startGame();
}
function startGame() {
game.font = ${elementsSize}px Verdana;
game.textAlign = "end";
for (let i = 1; i <= 10; i++) {
game.fillText(emojis["X"], elementsSize * i, elementsSize);
game.fillText(emojis["X"], elementsSize, elementsSize * i);
game.fillText(emojis["X"], elementsSize * i, elementsSize * i);
}
}
Si me ocurrio esto:
window.addEventListener('load', startGame); function startGame(){ //game.fillRect(0,0,100,1000); //game.cleanRect(50,50,50,50); //game.cleanRect(); //game.cleanRect(50,50,50,50); //game.font - '25px Vernada'; //game.fillStyle = 'purple'; //game.textAlign = 'left'; //game.fillText( 'Pandamonio', 25, 25); resizeGame(); } window.addEventListener('resize', resizeGame); function resizeGame(){ // para hacer que el canvas adopte el tamaño de la ventana html se requiere de realizar los siguientes comandos let canvasSize; canvasSize = Math.min(canvasSize = window.innerHeight *.7, canvasSize = window.innerWidth *.7); canvas.setAttribute( 'width', canvasSize ); canvas.setAttribute( 'height', canvasSize); // dividinos el canvas entre 10 const elementSize = canvasSize /10; game.font = elementSize + 'px Verdana'; // debemos de poner tanto tamaño y tipo de fuente for (let x = 0; x < 10; x++) { for (let y = 1; y <= 10; y++) { game.fillText ( emojis['X'], elementSize * x, elementSize * y ) ; } } console.log({canvasSize, elementSize}); }
Hola a todos
Acá dejo mi aporte del renderizado del canvas. Realizando algunos cálculos siempre garantizo que el tamaño del canvas es un entero y que los elementos siempre van a tener el tamaño adecuado y van a estar perfectamente alineados.
const canvas = document.querySelector('#game'); const game = canvas.getContext('2d'); let canvasSize; let elementSize; window.addEventListener('load',setCanvasSize); window.addEventListener('resize', setCanvasSize); function setCanvasSize(params) { //Dependiendo del tamaño de la pantalla, va a colocar el tamaño cuadrado del canvas //Al dividir entre 10 y luego aproximar el valor a un entero garantiza que el canvas será un entero múltiplo de 10. Finalmente se multiplica la expresión por 10 para obtener el dato real del canvas canvasSize = Math.ceil((window.innerWidth >= window.innerHeight ? window.innerHeight * 0.5 : window.innerWidth * 0.70) / 10) * 10; canvas.setAttribute('width', canvasSize); canvas.setAttribute('height', canvasSize); elementSize = canvasSize / 10; startGame(); } function startGame() { game.font = `${elementSize}px Verdana`; game.textAlign = 'center'; game.textBaseline = 'middle'; for (let i = 1; i <= 10; i++) { for (let j = 1; j <= 10; j++) { game.fillText(emojis['X'], elementSize * (i - 1/2), elementSize * (j - 1/2)); } } }
Cualquier duda me pueden preguntar. Saludos
EH EH EH EH!! TE JURO QUE LOGRE SOLUCIONARLO DE LA MISMA FORMA PERO TENIA UN PROBLEMA... PORQUE ESTABA PONIENDO EL EVENTO RESIZE DENTRO DE LA FUNCION STARTGAME, ESTO HACIA QUE QUE AL INICIAR EL JUEGO TENIA POR DEFECTO EL TAMAÑO DEL CANVAS Y SOLO FUNCIONABA AL COMENZAR EL EVENTO
asi voy
const canvas = document.querySelector("#game"); //llamamos al elemento canvas const game = canvas.getContext('2d'); //aqui creamos el contexto del elemento . let canvasSize; let elementsSize; /* This is the main function */ const startGame = () =>{ console.log({canvasSize, elementsSize}) // ejemplo game.font = `${elementsSize}px Verdana`; game.textAlign = 'end'; for (let i = 1; i <= 10; i++) { game.fillText(emojis['X'],elementsSize * i,elementsSize); } } const setCanvasSize = () =>{ // canvasSize = window.innerWidth * 0.70; //solucion 1 // let canvasSize; if(window.innerHeight > window.innerWidth){ //solucion 2 canvasSize = window.innerWidth * 0.8; }else{ canvasSize = window.innerHeight * 0.8; } canvas.setAttribute('width', canvasSize); canvas.setAttribute('height', canvasSize); // window.innerHeight //Para saber el alto de la ventana // window.innerWidth //para saberl el ancho de la ventana elementsSize = (canvasSize / 10) - 1; startGame() } window.addEventListener("load", setCanvasSize); window.addEventListener("resize", setCanvasSize)
const canvas = document.querySelector('#game__layout'); const game = canvas.getContext('2d'); let canvasSize; let elemtSize; window.addEventListener('load', setCanvaSize); window.addEventListener('resize',setCanvaSize); //funcion que establece la dimension del canvas function setCanvaSize(){ if(window.innerWidth>window.innerHeight){ canvasSize = window.innerHeight * 0.8; }else{ canvasSize=window.innerWidth * 0.8; } canvas.setAttribute('width',canvasSize); canvas.setAttribute('height', canvasSize); elemtSize = canvasSize /10; startGame(); } 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); } }
por favor que alguien me ayude. tengo el código exactamente con el profe lo tiene y las bombas no se acomodan bien y no se que hacer. sigo todo como esta indicado pero no puedo dar con el resultado que tiene el profe
Hola, pudiste solucionarlo? Me esta pasando exactamente lo mismo
Cambie el emoji de la bomba por una caja y ya no encaja bien las cosas, supogno que el tamaño del emoji también afecta e,e
¿No podría acomodarse el tamaño con CSS usando "aspect-ratio: 1 / 1; width: 90%; de manera que siempre sería un cuadrado?
¡Muéstranos cómo lo harías, Luisillo!
Lo probé y funcionó. Se mantiene en una proporción exacta de acuerdo al tamaño y orientación:
CSS:
#canvas { width: auto; height: 80%; border: 1px black solid; aspect-ratio: 1 / 1; margin: 0 auto; display: block; } @media (orientation: portrait) { #canvas { width: 90%; height: auto; } }
Lo que se podría hacer luego para sacar la unidad es
const canvasWidth = document.getElementById('canvas').offsetWidth; const elementSize = canvasWidth / 10
Escucho sus criticas y sugerencias :D
Me molestaba mucho que estuviese descentrado y al profe le quedase bien
Así que me puse a medir y coloqué una cuadricula
he aquí el código para hacer las líneas, también dejo el código copiable al final
El problema es el emoji en windows Al final achique el elementsSize y le quite el decimal
elementsSize = parseInt((canvasSize / 10) - 1.5)
Ahora queda descentrado
Así que le hice un padding paddingCanvas = (canvasSize - (elementsSize * 10)) / 2
paddingCanvas = (canvasSize - (elementsSize * 10)) / 2 ```y ahora considero que está aceptable  he aquí el código ```js const canvas = document.querySelector("#game"); const game = canvas.getContext("2d"); window.addEventListener("load", setCanvasSize); window.addEventListener("resize", setCanvasSize); let canvasSize; let elementsSize; let paddingCanvas; function setCanvasSize() { if (window.innerHeight > window.innerWidth) { canvasSize = window.innerWidth * 0.75; } else { canvasSize = window.innerHeight * 0.75; } canvas.setAttribute("width", canvasSize); canvas.setAttribute("height", canvasSize); elementsSize = parseInt(canvasSize / 10 - 1.5); // para crear la grilla, el -1.5 es para achicar el tamaño del elemento paddingCanvas = (canvasSize - elementsSize * 10) / 2; startGame(); } function startGame() { console.log({ canvasSize, elementsSize, paddingCanvas }); game.font = elementsSize + "px Verdana"; game.textAlign = "left"; // Alineación horizontal game.textBaseline = "top"; // Alineación Vertical for (let i = 0; i < 10; i++) { for (let j = 0; j < 10; j++) { let xx = elementsSize * i + paddingCanvas / 2; let yy = elementsSize * j + paddingCanvas; game.fillText(emojis["X"], xx, yy); console.log({ xx, yy, elementsSize }); } //Cuadricula for (let i = 0; i <= 10; i++) { let xx = elementsSize * i; // fillLine(xx, 0, xx, canvasSize); } for (let i = 0; i <= 10; i++) { // let xx = elementsSize * i; let yy = elementsSize * i; // fillLine(0, yy, canvasSize, yy); } } } function fillLine(x1, y1, x2, y2) { game.beginPath(); // Inicia un nuevo camino game.moveTo(x1, y1); // Mueve el punto de inicio a (x1, y1) sin rayar nada game.lineTo(x2, y2); // Dibuja una línea hasta (x2, y2) game.stroke(); // Dibuja el contorno del camino } ```const canvas = document.querySelector("#game");const game = canvas.getContext("2d"); window.addEventListener("load", setCanvasSize);window.addEventListener("resize", setCanvasSize); let canvasSize;let elementsSize;let paddingCanvas; function setCanvasSize() { if (window.innerHeight > window.innerWidth) { canvasSize = window.innerWidth \* 0.75; } else { canvasSize = window.innerHeight \* 0.75; } canvas.setAttribute("width", canvasSize); canvas.setAttribute("height", canvasSize); elementsSize = parseInt(canvasSize / 10 - 1.5); *// para crear la grilla, el -1.5 es para achicar el tamaño del elemento* paddingCanvas = (canvasSize - elementsSize \* 10) / 2; startGame();} function startGame() { console.log({ canvasSize, elementsSize, paddingCanvas }); game.font = elementsSize + "px Verdana"; game.textAlign = "left"; *// Alineación horizontal* game.textBaseline = "top"; *// Alineación Vertical* for (let i = 0; i < 10; i++) { for (let j = 0; j < 10; j++) { let xx = elementsSize \* i + paddingCanvas / 2; let yy = elementsSize \* j + paddingCanvas; game.fillText(emojis\["X"], xx, yy); console.log({ xx, yy, elementsSize }); } *//Cuadricula* for (let i = 0; i <= 10; i++) { let xx = elementsSize \* i; *// fillLine(xx, 0, xx, canvasSize);* } for (let i = 0; i <= 10; i++) { *// let xx = elementsSize \* i;* let yy = elementsSize \* i; *// fillLine(0, yy, canvasSize, yy);* } }} function fillLine(x1, y1, x2, y2) { game.beginPath(); *// Inicia un nuevo camino* game.moveTo(x1, y1); *// Mueve el punto de inicio a (x1, y1) sin rayar nada* game.lineTo(x2, y2); *// Dibuja una línea hasta (x2, y2)* game.stroke(); *// Dibuja el contorno del camino*}
investigue antes de ver la clase sobre algún eventListener que escuche los cambios de tamaño y me encontré "resize".
function startGame(){ let medida; function updateWindowWidth() { if (window.innerWidth > 800){ medida = 500; }else{ medida = window.innerWidth* 0.63 } canvas.setAttribute("width", medida) canvas.setAttribute("height", medida) const elementsSize = medida/10; game.font = elementsSize + "px Verdana"; game.textAlign = "end" game.fillText(emojis["X"],elementsSize,elementsSize) for (let i = 1; i <= 10; i++){ game.fillText(emojis["X"], elementsSize * i, elementsSize) } } updateWindowWidth(); window.addEventListener("resize", updateWindowWidth); }
al canva le doy la medida de 0.63 para que no haya un cambio brusco cuando la ventana mida 800px, y tenga que ajustar su medida a 500px"¡
//Variable que almacena la etiqueta canvas const canvas = document.querySelector("#game"); //Creación del espacio de juego, en este caso en 2d const game = canvas.getContext("2d"); //Cangar el canvas luego de haberse cargado por completo el HTML window.addEventListener("load",resizeCanvas); //Cambiar tamaño de canvas cuando se actualzia el tamaño de pantalla (responsive) window.addEventListener("resize",resizeCanvas); let canvasSize; function resizeCanvas(){ //Para que según la resolución de pantalla agregue el tamaño de width y height al canvas if(window.innerHeight>window.innerWidth){ canvasSize = window.innerWidth * 0.8; } else{ canvasSize = window.innerHeight * 0.8; } canvas.setAttribute("width",canvasSize); //al actualizarse, borra el contenido dentro del mapa canvas.setAttribute("height",canvasSize); starGame(); } function starGame(){ //Dividir el cuadro de canvas en 10 const elementsSize = canvasSize / 10; game.font = (elementsSize-12) + "px Verdana"; //siempre el tamaño con el tipo de letra. Resto 12 porque...para que no ocupe más de la cuenta. game.textAlign = "end"; //cada bombita acabara en la primera coordenada de fillText //Imprimir 10 veces la bombita al lado del otro for (let i = 1; i <= 10; i++) { game.fillText(emojis["X"],elementsSize*i,elementsSize); } //Métodos de canvas /* game.fillStyle = "rgb(0, 162, 232)"; game.fillRect(0,0,50,50); */ //dibujuar un rectangulo (x,y,ancho,alto) }
del 1 al 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 te doy un 1000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
Uy creo que saque mala nota porque veo más nueves que ceros a la izquierda de tu puntuación :( 😅
Ta potente, le hacemos ajuste al canvas cada que hay un resize.
Para hacer el Canvas responsive yo sólo agregue otro eventListener:
window.addEventListener("resize", startGame);