BananaMaster

47.1 - Scène de Combat : Dégâts, Pratique (Leçons JS — arguments et return)

Si tu as oublié quelque chose — clique pour retourner à la leçon.

📘 Tâche : Battle HP Bar

La page affiche un personnage avec une barre de HP au-dessus. Sous le personnage se trouvent 4 boutons d'attaque.

🏗️ Ce qu'il faut préparer en HTML :

• Un élément avec le texte des HP — par exemple, class="hp-text"
• La barre de HP — par exemple, class="hp-bar-fill"
• 4 boutons d'attaque

⚔️ Règles du combat :

• ❤️ HP maximum — 100, autant au début du combat
• 👊 Punch — 10 de dégâts
• 🦵 Kick — 15 de dégâts
• 🔥 Fireball — 25 de dégâts
• 💥 Critical — 40 de dégâts

📐 Comment ça doit fonctionner :

En cliquant sur l'un des 4 boutons, les HP actuels du personnage diminuent des dégâts de ce bouton. Les HP ne peuvent pas descendre en dessous de 0. Après chaque clic, la barre et le texte des HP à l'écran se mettent à jour et affichent la valeur actuelle.

🧪 Exemple :

Le personnage commence le combat avec 100 HP. L'utilisateur clique sur les boutons dans l'ordre :

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

Après ces trois clics, l'écran doit afficher :

25 / 100 HP