Tamaño del canvas y sus elementos

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

Clase anteriorSiguiente clase

Agustin Gonzalez

student•

Por si a alguien le queda desalineado le muestro el codigo para solucionarlo ++ERROR:++

++SOLUCION:++

Y para completar todo el canvas:

Rodrigo Espinosa

student•

God 💚

Luis Miguel Rodriguez

student•

sos un capoo <3

Iván Camilo Jaramillo García

student•

el eje X siempre es el horizontal y el eje Y el vertical, no entiendo por qué dice que en canvas es diferente a las matematicas si, al contrario, es igual

Steven García

student•

ver a juan multiplicar por 0 y esperar un resultado diferente Xd

Angel Riera

student•

mi solución inicial no-responsive, fue básicamente

canvasSize = window.innerHeight * 0.75;

canvas.setAttribute('width',canvasSize);
canvas.setAttribute('height',canvasSize);

no es lo que esperaba, perooo en cuanto a tener una simple proporción, digamos que, visualmente adecuada a la dinámica del juego, tipo:

(no tomen en consideración este comentario de ninguna forma para la clase xD)

Luis Javier Velázquez Ávila

student•

Yo hice la misma solución jsjs

Alejandro Senger

student•

Yo encontré esta solución:

let canvasSize = Math.min(window.innerHeight, window.innerWidth)*0.75;
canvas.setAttribute('width', canvasSize);
canvas.setAttribute('height', canvasSize);

PD: A mí me enseñaron que el eje horizontal es el de las X y el vertical el de las Y

Libian María Hernández Gil

student•

Esta solución está genial... Muchas gracias compañero.

Jhon Eduard Bocanegra Ortiz

student•

Lo intente de esta manera:

silfredo mario

student•

inner width genera un cálculo diferente a inner heigth

Esto se debe a que las pantallas no son cuadrados, por lo general una pantalla es un rectángulo. Si pensamos en un celular, los celulares tienen una pantalla donde su heigth es más grande que su width, al hacer window.innerWidth * 0.5, window.innerHeight * 05. Estamos pidiendo la mitad de esto, pero una mita puede ser 640px y la otra de 360px. Por eso nunca nos va a dar un cuadrado de esta forma.

Tommy Toala Cox

student•

¿Alguien sabe por qué me sale así? Incluso copie el código original del profe y lo pegue en mi editor, pero me sigue saliendo así

Josue Cerron Tuesta

student•

Creo que se debe al tamaño de tu pantalla. A mi me pasa igual.

Juan David Reyes

student•

Ami tambien me sale igual :/

Manuel Andres García Vera

student•

me quedo desalineado y probé con los aportes de otro compañero y aun asi no cuadraba

entonces pude corregirlo volviendo el elemento un poco mas pequeño

este es el código

Ivan Soca

student•

GRACIAS! fue el unico que me sirvio :D

Luis Palomo

student•

Bien, lo hice bien desde el principio! Aquí como lo solucioné:

    let canvasSize = window.innerWidth > window.innerHeight ?
                 window.innerHeight * 0.7 : window.innerWidth * 0.9

César Augusto Cortés Labrada

student•

Yo pensé en algo parecido a los breakpoints para hacer más responsive el canvas. Incluso me gustaría hacer cambios en el html para posicionar los botones y textos del contador después, según el device.

Gualberto Montiel

student•

Creo que tengo un problema en mi codigo:
me queda asi en el browser:

Luis Oscar Sequera Contreras

student•

Aaron Santiago Loyo Zabala

student•

🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴

marco antonio

student•

En mi vida jamás he usado JavaScript

del curso básico de css y html me salte para acá XD

silfredo mario

student•

Te recomiendo que mires los cursos básicos de JavaScript, para que te metas mejor en los conceptos. Estos cursos son superbuenos.

marco antonio

student•

@silfredo11 te agradezco tu recomendación >///< pero no creo que me haga falta estoy viendo que js hereda un monto de C y C++ lenguajes que domino bastante bien, incluso apenas aprobé el examen de js básico sin tomar el curso, aun que si hay algunos métodos que si tengo que buscar sus nombres para poder usarlos y una que otra peculiaridad que tiene el lenguaje :D

Paula Inés Cudicio

student•

Aquí va mi solución antes de mirar más, antes de volver a darle play al video

   let canvasSize;
    let wHeight = window.innerHeight;
    let wWidth = window.innerWidth;

    (wHeight < wWidth)
        ? canvasSize = wHeight * 0.75
        : canvasSize = wWidth * 0.75;

    canvas.setAttribute('width', canvasSize);
    canvas.setAttribute('height', canvasSize);

Eliezer Hernandez

student•

Esta es mi solución: Solución 1:

	canvas.setAttribute("width", window.innerWidth * 0.75);
  canvas.height = canvas.getAttribute("width");
  canvas.style.maxWidth = `${window.innerHeight * 0.75}px`; // seria lo mismo 75vh

Alejandro Ramos

student•

Tengo problema de que el emoji sale recortado :| y las soluciones que vi en los comentarios no ayudan D:

Juan Carlos Montilla Sánchez

student•

Me puedes mostrar la imagen de tu problema, por favor

Alejandro Ramos

student•

Juancodev, ya hace lo suyo de esto, no soy al único que le pasa, pero al final lo corregí con el aporte de un compañero de Platzi que se puso a corregirlo intentando valores hasta centrarlo xd

Ricardo Alfonso Chavez Vilcapoma

student•

Para ajustar las bombitas mejor agrege a la iteración dentro del for sumar +15 para que se desplace a la derecha.

Candela Tapia

student•

Me aparecian las bombas muy a la derecha, dejo mi solucion por si a alguien le sirve, combine aportes de dos personas.

Miguel Angel Barron Vallejo

student•

Pudria ser con un min, pero todavia tenermos que hacer que, cuando la ventana cambie de tamaño, se ejecute los siguientes comandos

let canvasSize;
    canvasSize = Math.min(canvasSize = window.innerHeight *.7, canvasSize = window.innerWidth *.7);
    canvas.setAttribute( 'width', canvasSize );
    canvas.setAttribute( 'height', canvasSize);

Guillermo Baldán López

student•

Lección 3: Tamaño del canvas y sus elementos. Objetivo de la lección: Vamos a definir el ancho y el alto del canvas y a partir de esto vamos a calcular el alto y el ancho de lo que deberían medir nuestros elementos internos dentro del canvas para hacer nuestra grilla 10 x 10 para los distintos niveles de nuestro juego.

Hacemos que el alto y el ancho del canvas sea responsive, esto es que sea dinámico. Para esto usamos window.innerHeight y window.innherWidth. Volvemos a la función startGame: y metemos al principio estas línea dentro de esta función: let canvasSize; if (window.innerHeight > window.innerWidth) { canvasSize = window.innerWidth * 0.8 } else { canvasSize = window.innerHeight * 0.8 } canvas.setAttribute('width', canvasSize) canvas.setAttribute('height', canvasSize)
Calculamos el ancho y el alto de un elemento a partir de nuestro canvas. Después de las líneas anteriores, dentro de la función startGame, escribimos estas: const elementsSize = canvasSize /10; console.log ({ canvasSize, elementsSize }); game.font = elementsSize + 'px Verdana'; game.tesxAlign = 'end' for (let i = 1; i <= 10; i++) { game.fillText(emojis['X'], elementsSize*i, elementsSize);

   let canvasSize;
    let wHeight = window.innerHeight;
    let wWidth = window.innerWidth;

    (wHeight < wWidth)
        ? canvasSize = wHeight * 0.75
        : canvasSize = wWidth * 0.75;

    canvas.setAttribute('width', canvasSize);
    canvas.setAttribute('height', canvasSize);

let canvasSize;
    canvasSize = Math.min(canvasSize = window.innerHeight *.7, canvasSize = window.innerWidth *.7);
    canvas.setAttribute( 'width', canvasSize );
    canvas.setAttribute( 'height', canvasSize);

Tamaño del canvas y sus elementos

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?