Chuck's Academy

HTML5 Canvas

Añadiendo un HUD y Marcador

En este capítulo, aprenderemos a implementar un HUD (Heads-Up Display) en el canvas. Un HUD es esencial para mostrar información importante al jugador, como la puntuación, el nivel, y otros estados del juego. Esto permite a los jugadores comprender su progreso y la situación en el juego en todo momento.

Mostrar el Puntaje en el Canvas

Una de las partes más importantes de un HUD es el marcador o puntaje. Esto permite al jugador ver su progreso o rendimiento. Usaremos la función fillText para dibujar el puntaje en el canvas.

javascript
"En este ejemplo, creamos una función drawScore que utiliza fillText para mostrar el puntaje en la esquina superior izquierda del canvas. En la función draw, llamamos a drawScore cada vez que se actualiza el canvas, asegurándonos de que el puntaje esté visible y actualizado en todo momento."

Añadir un Temporizador al HUD

Podemos añadir un temporizador al HUD para mostrar el tiempo transcurrido en el juego o para establecer un límite de tiempo. Para esto, usamos setInterval para actualizar el tiempo y fillText para mostrarlo en pantalla.

Ejemplo: Temporizador de Cuenta Ascendente

Este ejemplo muestra cómo crear un temporizador que cuenta el tiempo en segundos desde el inicio del juego.

javascript
"En este código, usamos setInterval para incrementar el tiempo en uno cada segundo, simulando un temporizador. En la función drawTimer, mostramos el tiempo acumulado en la pantalla. Llamamos a drawTimer dentro de la función principal draw para que el temporizador esté siempre visible en el HUD."

Mostrar un Estado del Juego

Además de puntajes y tiempo, podemos mostrar el estado del juego en el HUD, como 'Jugando', 'Pausado', o 'Fin del juego'. Esta información es útil para que el jugador entienda en qué fase del juego se encuentra.

Ejemplo: Mensaje de Estado

Podemos usar una variable para definir el estado actual del juego y mostrar este estado en pantalla.

javascript
"En este ejemplo, creamos una variable gameState para almacenar el estado actual del juego, como 'Playing', 'Paused' o 'Game Over'. La función drawGameState muestra este estado en la esquina superior derecha del canvas. Cambiamos el valor de gameState en las funciones pauseGame y endGame, según las condiciones del juego."

Ejercicio: Completar el HUD

Para practicar, intente combinar todos los elementos del HUD en una interfaz completa que incluya puntaje, temporizador, y estado del juego. También puede añadir un contador de vidas o cualquier otro elemento informativo para enriquecer el HUD.

javascript
"Aquí, combinamos todos los elementos del HUD en una única función drawHUD que muestra el puntaje, el tiempo, y el estado del juego. Llamamos a drawHUD dentro de la función principal draw para mantener el HUD actualizado en el canvas."

Conclusión

En este capítulo, hemos aprendido a crear un HUD para mostrar información clave sobre el juego en el canvas. El HUD mejora la experiencia del jugador al mantenerlo informado sobre su progreso y el estado del juego.


Pregúntame lo que sea