Original article: How to use the Fullscreen API in JavaScript
¿Cómo ejecutas un juego creado para la web en pantalla completa? En este rápido tutorial, verás como mostrar un juego o cualquier otro elemento HTML en pantalla completa, cómo salir de pantalla completa, y cómo hacer un lindo botón de activación de pantalla completa en SVG.
Recientemente, publiqué un tutorial largo de un juego en JavaScript. Si bien fue una guía muy completa, hubo unas pocas cosas que no pudimos cubrir: cómo mostrar el juego en pantalla completa.
Cuando miras un vídeo en YouTube, tienes la opción también de mirarlo en pantalla completa. Pero, ¿sabía que la característica de pantalla completa no es solamente para elementos de vídeo?
En JavaScript, hay una API Fullscreen. Y es sorprendentemente simple de usar. Aquí hay una demo de lo que estamos a punto de implementar. Veamos cómo funciona.
También puedes mirar este artículo como un vídeo en YouTube.
Tabla de Contenidos:
- Cómo entrar en Modo Pantalla Completa
- Cómo estilar la Pantalla Completa
- Cómo mostrar juegos con el Elemento Canvas en Pantalla Completa
- Cómo salir de Pantalla Completa
- Cómo codificar un ícono Pantalla Completa con SVG
- Aprender más
Cómo entrar en Modo Pantalla Completa
Digamos que tenemos un sitio web sencillo con algo de texto. Y al final, tenemos un botón que mostrará el texto en pantalla completa. Vamos a refinar la apariencia de este botón, pero primero, vamos a trabajar en la lógica principal.
body {
font-family: Montserrat;
margin: 50px;
max-width: 500px;
}En el código de arriba, adjuntamos un manejador de evento al botón en HTML. Entonces podemos implementar la lógica de la función toggleFullscreen en JavaScript.
En esta función, todo lo que tenemos que hacer es llamar al método requestFullscreen en la propiedad documentElement del documento. Y eso es:
function toggleFullscreen() {
document.documentElement.requestFullscreen();
}Si haces clic al botón, tu sitio web aparecerá en pantalla completa.
Cómo estilar la Pantalla Completa
Antes de que abarquemos cómo salir de la pantalla completa y crear un lindo botón de activación, veamos algunas cosas más.
Lo que podrías dar cuenta enseguida es que, con más espacio, tu contenido se podría perder en pantalla completa. Asegúrate que tienes un estilo responsivo que se vea bien en cada tamaño de pantalla.
Inclusive puedes estilar el diseño específicamente para pantalla completa. En CSS puedes establecer una media query que solamente se aplique al estilo en caso de que el display-mode sea fullscreen.
Por ejemplo, puedes cambiar el font-size, o cambiar el background-color para tener una apariencia distinta en pantalla completa.
@media (display-mode: fullscreen) {
body {
background-color: #f9bb86;
font-size: 1.2em;
}
}Cómo mostrar Juegos con el Elemento Canvas en Pantalla Completa
En este caso, queremos hacer un juego que use el elemento canvas que sea en pantalla completa - como el juego Gorillas - también necesitamos cambiar el tamaño del elemento canvas para que encaje en pantalla completa.
En este caso, podemos usar el evento resize del objeto window. El evento se dispara cuando simplemente cambia el tamaño de la ventana del navegador, y cuando entramos o salimos del modo pantalla completa.
Con el evento resize, podemos cambiar el tamaño del elemento canvas para que encaje en toda la pantalla completa, actualizar la escalabilidad, ajustar cualquier otra propiedad que necesitamos cambiar al cambiar de tamaño y redibujar toda la escena.
window.addEventListener("resize", () => {
// Cambiar de tamaño el elemento de canvas
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Actualizar la escalabilidad
// . . .
// Ajustar las propiedades dependientes del tamaño
// . . .
// Redibujar el canvas
draw();
});Si revisas el código fuente del juego Gorillas en CodePen, encontrarás pasos similares.
Cómo salir de Pantalla Completa
Ahora que sabemos cómo entrar en pantalla completa, ¿cómo salimos?
Por defecto, si presionas la tecla Escape, el navegador vuelve a la vista normal. En Google Chrome, inclusive obtienes una notificación en la parte superior de la pantalla sobre esto cuando entras en modo pantalla completa.
¿Qué sucede si quieres salir del modo pantalla completa cuando haces clic al botón de HTML? Cambiemos nuestro comportamiento del botón para activar o desactivar la pantalla completa.
function toggleFullscreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
document.exitFullscreen();
}
}Primero, comenzamos verificando si ya estamos en modo pantalla completa. Podemos hacer esto verificando la propiedad fullscreenElement del objeto document. Si no está definido, entonces entramos en modo fullscreen de la misma forma como hicimos antes. Y si ya estamos en modo pantalla completa, entonces podemos salir llamando al método exitFullscreen de document.
Es realmente así de simple. Con unas pocas líneas de código, podemos implementar la lógica para un botón de activación de pantalla completa.
Cómo codificar un ícono de Pantalla Completa con SVG
Si sigues mis tutoriales, sabes que amo la codificación creativa, y dibujar desde código. Así actualizamos la apariencia de nuestro botón, para hacerlo similar a lo que tenemos en YouTube.
Vamos a crear una imagen SVG dentro de nuestro botón. Si verificas el código fuente de YouTube, verás que también usan un SVG.
Definamos un elemento SVG dentro de HTML. Estableceremos su tamaño a 30 x 30 y definiremos un elemento path:
. . .
<button onclick="toggleFullscreen()">
<svg width="30" height="30">
<path
stroke="black"
stroke-width="3"
fill="none"
d="
M 10, 2 L 2,2 L 2, 10
M 20, 2 L 28,2 L 28, 10
M 28, 20 L 28,28 L 20, 28
M 10, 28 L 2,28 L 2, 20"
/>
</svg>
</button>
. . .Para estilizar el path, pondremos su color con la propiedad stroke, ponemos su stroke-width, y nos aseguramos que no terminamos con una forma rellena. Los paths de SVG por defecto se rellenan, así que necesitamos poner explícitamente que no queremos fill (rellenar) esta forma.
Luego definimos el path con unos pocos comandos de move-to y line-to. Podemos poner estos comandos como una cadena en el atributo `d` del elemento path.
Comenzamos con un comando move-to: M 10, 2. La letra M significa que tenemos un comando move-to, y el 10 y 2 son las coordenadas x e y de este comando. Movimos al principio de una de las cuatro líneas.
Luego continuamos el path con un comando line-to que se mueve a la esquina, y después con otro comando line-to. El comando line-to funciona de una forma similar. Comienza con la letra L, entonces ponemos las coordenadas donde la línea debería de ir.
Luego hicimos lo mismo con las otras esquinas. Nos movemos al siguiente segmento de línea con otro comando move-to y dibujamos una línea con otros dos comandos line-to.
Nota: si lees my tutorial anterior sobre cómo hacer el juego gorillas, entonces te habrás dado cuento que tuvimos algo similar aquí. También dibujamos paths con move-to y line-to. Excepto que allí nos dibujaron en un elemento canvas con JavaScript, y ahora tenemos los comandos como una cadena dentro del archivo HTML.
Cómo cambiar la Apariencia del Icono
Ahora el SVG se ve bien, pero, ¿qué sucede si queremos tener una apariencia distinta cuando estamos en modo pantalla completa? En YouTube, cuando entramos en modo pantalla completa, el botón cambia de ícono.
Puedes hacer esto de diferentes maneras. La manera más fácil es probablemente definir otro path, dentro del mismo elemento SVG con una apariencia distinta. Luego hace a este path transparente por defecto. Vamos a cambiar la visibilidad de estos dos paths en JavaScript.
. . .
<button onclick="toggleFullscreen()">
<svg width="30" height="30">
<path
id="enter-fullscreen"
stroke="black"
stroke-width="3"
fill="none"
d="
M 10, 2 L 2,2 L 2, 10
M 20, 2 L 28,2 L 28, 10
M 28, 20 L 28,28 L 20, 28
M 10, 28 L 2,28 L 2, 20"
/>
<path
id="exit-fullscreen"
stroke="transparent"
stroke-width="3"
fill="none"
d="
M 10, 2 L 10,10 L 2, 10
M 20, 2 L 20,10 L 28, 10
M 28, 20 L 20,20 L 20, 28
M 10, 28 L 10,20 L 2, 20"
/>
</svg>
</button>
. . .Este segundo path es muy similar al anterior. Excepto que usamos diferentes coordenadas para algunos de los comandos line-to.
Luego ponemos IDs únicos para ambos de estos paths, y actualizamos nuestra función toggle en JavaScript. En JavaScript, obtenemos una referencia a estos paths por ID, y luego en el manejador de evento del botón, podemos cambiar la visibilidad de estos elementos de un lado a otro.
const enterFullscreen = document.getElementById("enter-fullscreen");
const exitFullscreen = document.getElementById("exit-fullscreen");
function toggleFullscreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
enterFullscreen.setAttribute("stroke", "transparent");
exitFullscreen.setAttribute("stroke", "black");
} else {
document.exitFullscreen();
enterFullscreen.setAttribute("stroke", "black");
exitFullscreen.setAttribute("stroke", "transparent");
}
}Ahora si haces clic a este botón, cambia el modo pantalla completa y cambia su apariencia.
Aprender más
Si quieres aprender más sobre SVGs, mira SVG-Tutorial.com donde puedes encontrar un montón de ejemplos desde lo básico a niveles más avanzados. Es un sitio gratis y puedes también encontrar el ejemplo que discutimos en este artículo.
Para usar el botón para ejecutar un juego en JavaScript en pantalla completa, mira todo el Tutorial del Juego en JavaScript en cómo rehacer el juego clásico de Gorillas en freeCodeCamp o en YouTube. Es un tutorial masivo que abarca cosas, desde dibujar en un elemento Canvas de HTML, a toda la lógica del juego, desde manejo de eventos, hasta el bucle de animación, detección de golpes, e inclusive lógica de AI, para el enemigo de gorilla.
Te puedes suscribir a mi canal para más tutoriales de desarrollo de juego en JavaScript: