BananaMaster

47.1 - Escena de Batalla: Daño, Práctica (Lecciones JS — argumentos y return)

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

📘 Tarea: Battle HP Bar

En la página se muestra un personaje con una barra de HP encima. Debajo del personaje hay 4 botones de ataque.

🏗️ Qué hay que preparar en el HTML:

• Un elemento con el texto de HP — por ejemplo, class="hp-text"
• La barra de HP — por ejemplo, class="hp-bar-fill"
• 4 botones de ataque

⚔️ Reglas del combate:

• ❤️ HP máximo — 100, el mismo al inicio del combate
• 👊 Punch — 10 de daño
• 🦵 Kick — 15 de daño
• 🔥 Fireball — 25 de daño
• 💥 Critical — 40 de daño

📐 Cómo debe funcionar:

Al hacer clic en cualquiera de los 4 botones, el HP actual del personaje se reduce en el daño de ese botón. El HP no puede bajar de 0. Después de cada clic, la barra y el texto de HP en pantalla se actualizan y muestran el valor actual.

🧪 Ejemplo:

El personaje empieza el combate con 100 HP. El usuario hace clic en los botones en orden:

• 🔥 Fireball → 100 - 25 = 75
• 👊 Punch → 75 - 10 = 65
• 💥 Critical → 65 - 40 = 25

Después de estos tres clics, en pantalla debe verse:

25 / 100 HP