BananaMaster

47.1 - Battle Scene: Damage, Practice (JS lessons — arguments and return)

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

📘 Task: Battle HP Bar

The page shows a character with an HP bar above it. Below the character are 4 attack buttons.

🏗️ What you need to prepare in HTML:

• An element with the HP text — for example, class="hp-text"
• The HP bar — for example, class="hp-bar-fill"
• 4 attack buttons

⚔️ Battle rules:

• ❤️ Max HP — 100, the same at the start of the battle
• 👊 Punch — 10 damage
• 🦵 Kick — 15 damage
• 🔥 Fireball — 25 damage
• 💥 Critical — 40 damage

📐 How this should work:

Clicking any of the 4 buttons decreases the character's current HP by that button's damage. HP can't go below 0. After every click the HP bar and text on screen update and show the current value.

🧪 Example:

The character starts the battle with 100 HP. The user clicks the buttons in order:

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

After these three clicks the screen should show:

25 / 100 HP