BananaMaster

47.3 - Escena de Batalla: Regen y Reset, Práctica (Lecciones JS — argumentos y return)

Si olvidaste algo — haz clic para ir a la lección.

📘 Tarea: Battle HP Bar — Regen & Reset

🏗️ Qué hay que preparar en el HTML:

En la página hay ahora 2 botones que parecen un icono ❓ — están ocultos. Para revelarlos: entra en el archivo HTML, busca los bloques con la clase reveal-wrapper hidden (aproximadamente en las líneas 89 y 100) y quita la palabra hidden de la clase, para que quede solo reveal-wrapper. Después de eso, en lugar de ❓ aparecerán los botones reales: ✨ Regen y 🔄 Reset.

⚔️ Reglas del combate:

• ✨ Regen — restaura 10 HP cada segundo, durante 5 segundos
• 🔄 Reset — devuelve instantáneamente el HP del personaje al máximo (100)
• 🎨 El color de la barra de HP depende del porcentaje de vida:
  — más del 50% — "#3ecf4a"
  — del 20% al 50% inclusive — "yellow"
  — menos del 20% — "red"

📐 Cómo debe funcionar:

Al hacer clic en Regen comienza una cuenta regresiva: una vez por segundo el HP del personaje aumenta en 10, y así 5 veces seguidas. La barra y el texto de HP se actualizan después de cada tick. El HP no puede superar 100.

Al hacer clic en Reset, el HP del personaje se vuelve 100 de inmediato, sin importar cuánto HP tenía antes. La barra y el texto de HP se actualizan al instante.