Canvas responsive

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

Milton Estrada

student•

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

Josue Cerron Tuesta

student•

Gracias por compartir!

jose maria garcia

student•

yo encontre esto :D

window.onresize=startGame;

si la ventana cambia de tamaño ejecuta la funcion 'startGame'

Jonhatan prieto mora

student•

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

milton coronado

student•

con typeScript! que valiente jejeje

Angel Riera

student•

poco a poco !

// extensión de vscode para tomar capturas presentables de nuestro código

https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap

Daniel Martinez Cornejo

student•

Muchas gracias! no conocía esa extensión y siempre me pregunté cómo lo hacían.

Miguel Torres Cerna

student•

Muy genial tu clase. Me encanta.

Josue Cerron Tuesta

student•

Estuvo bueno la clase!

Angel Riera

student•

les dejo este pack de extensiones para vscode q nos ayudarán bastante con el mundo de js https://marketplace.visualstudio.com/items?itemName=BretDoyle.javascript-extensions-pack---js-essentials

Eduardo Nila

student•

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

Tommy Toala Cox

student•

xD, que loco, y se queda en bucle infinito cuando lo ejecutas o cuando intentas cambiar el tamaño de la pagina?

Josue Cerron Tuesta

student•

Wow! que loco!

Guillermo Baldán López

student•

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.

Introducimos un nuevo evento en nuestro navegador, resize: window.addEventListener('resize', startGame);
Decidimos refactorizar la lógica de nuestro juego. Para ello creamos una función llamada setCanvasSize(): 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(); }

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

Miguel Angel Barron Vallejo

student•

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

José Fernando Fuentes Roa

student•

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

Juan Mercado

student•

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

Darvin Emil Rodriguez Nuñez

student•

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)

Victor Hugo Cruz Carballo

student•

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

}

Gerónimo Pondal

student•

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

Cecilia Mansilla

student•

Hola, pudiste solucionarlo? Me esta pasando exactamente lo mismo

Alejandro Ramos

student•

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

Luis Palomo

student•

¿No podría acomodarse el tamaño con CSS usando "aspect-ratio: 1 / 1; width: 90%; de manera que siempre sería un cuadrado?

Juan Castro

teacher•

¡Muéstranos cómo lo harías, Luisillo!

Luis Palomo

student•

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

Sebastián Andrés Sanhueza Tapia

student•

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

![](https://static.platzi.com/media/user_upload/6-4ba7ccc1-c44b-44ba-a364-ad7c5a369fd6.jpg)

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*}

Miguel Angel

student•

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"¡

Ricardo Alfonso Chavez Vilcapoma

student•

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

Aaron Santiago Loyo Zabala

student•

del 1 al 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 te doy un 1000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

Ricardo Alfonso Chavez Vilcapoma

student•

Uy creo que saque mala nota porque veo más nueves que ceros a la izquierda de tu puntuación :( 😅

Alejandro Ramos

student•

Ta potente, le hacemos ajuste al canvas cada que hay un resize.