BananaMaster

47.3 - Battle Scene: Regen and Reset, Practice (JS lessons — arguments and return)

If you forgot something — click to go to the lesson.

📘 Task: Battle HP Bar — Regen & Reset

🏗️ What you need to prepare in HTML:

The page currently has 2 buttons that look like a ❓ icon — they're hidden. To reveal them: open the HTML file, find the blocks with the class reveal-wrapper hidden (around lines 89 and 100) and remove the word hidden from the class, so it becomes just reveal-wrapper. After that, the real buttons will appear instead of ❓: ✨ Regen and 🔄 Reset.

⚔️ Battle rules:

• ✨ Regen — restores 10 HP every second, for 5 seconds
• 🔄 Reset — instantly returns the character's HP to the maximum (100)
• 🎨 The HP bar color depends on the health percentage:
  — above 50% — "#3ecf4a"
  — from 20% to 50% inclusive — "yellow"
  — below 20% — "red"

📐 How this should work:

Clicking Regen starts a countdown: once every second the character's HP increases by 10, for a total of 5 times. The HP bar and text update after every tick. HP can't go above 100.

Clicking Reset instantly sets the character's HP to 100, no matter what it was before. The HP bar and text update immediately.