Tamaño del canvas y sus elementos
Contenido del curso
Canvas
Mapa del juego
Movimientos del jugador
Colisiones
Bonus: adictividad
Deploy
Próximos pasos
Tamaño del canvas y sus elementos
Tamaño del canvas y sus elementos
Contenido del curso
Agustin Gonzalez
Rodrigo Espinosa
Luis Miguel Rodríguez
Iván Camilo Jaramillo García
Steven García
Alejandro Senger
Libian María Hernández Gil
Jhon Eduard Bocanegra Ortiz
silfredo mario
Tommy Toala Cox
Josue Cerron Tuesta
Juan David Reyes
Manuel Andres García Vera
Ivan Soca
Luis Palomo
César Augusto Cortés Labrada
Gualberto Montiel
Luis Oscar Sequera Contreras
Aaron Santiago Loyo Zabala
marco antonio
silfredo mario
marco antonio
Paula Inés Cudicio
Eliezer Hernandez
----- ----
Juan Carlos Montilla Sánchez
----- ----
Ricardo Alfonso Chavez Vilcapoma
Candela Tapia
Miguel Angel Barron Vallejo
Guillermo Baldán López
Alejandro López Aguilar
Por si a alguien le queda desalineado le muestro el codigo para solucionarlo ++ERROR:++
Y para completar todo el canvas:
God 💚
sos un capoo <3
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
ver a juan multiplicar por 0 y esperar un resultado diferente Xd
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
Esta solución está genial... Muchas gracias compañero.
Lo intente de esta manera:
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.
¿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í
Creo que se debe al tamaño de tu pantalla. A mi me pasa igual.
Ami tambien me sale igual :/
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
GRACIAS! fue el unico que me sirvio :D
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
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.
Creo que tengo un problema en mi codigo:
me queda asi en el browser:
x2
🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴
En mi vida jamás he usado JavaScript
Te recomiendo que mires los cursos básicos de JavaScript, para que te metas mejor en los conceptos. Estos cursos son superbuenos.
@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
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);
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
Tengo problema de que el emoji sale recortado :| y las soluciones que vi en los comentarios no ayudan D:
Me puedes mostrar la imagen de tu problema, por favor
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
Para ajustar las bombitas mejor agrege a la iteración dentro del for sumar +15 para que se desplace a la derecha.
Me aparecian las bombas muy a la derecha, dejo mi solucion por si a alguien le sirve, combine aportes de dos personas.
<3
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);
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.
Basandome en los aportes de los demas, asi solucione el error grafico que aparecia
function startGame(){ let canvasSize; let elementSize if(window.innerHeight > window.innerWidth){ //Con esto si el height es mayor al widht, le damos un 80% porciento del width al width y al heigth canvasSize = window.innerWidth * 0.8; } else{ //Con esto si el widht es mayor a el height, el damos un 80% porciento del height al width y al height canvasSize = window.innerHeight * 0.8; } canvas.setAttribute('width', canvasSize); canvas.setAttribute('height', canvasSize); //Para saber el tamaño de cada elemento dividimos el el tamaño total (canvasSize) por 10, ya que la cuadricula sera de 10 x 10 elementSize = (canvasSize * 0.98) / 10; console.log({ canvasSize, elementSize }) //Hay que definir una fuente game.font = (elementSize - 12) + 'px Verdana'; game.textAlign = ''; for (let i = 0; i < 10; i++) { for(let z = 1; z < 11; z++){ game.fillText(emojis['X'], elementSize * i, elementSize * z); } }
