BananaMaster

47.3 - Scène de Combat : Regen et Reset, Pratique (Leçons JS — arguments et return)

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

📘 Tâche : Battle HP Bar — Regen & Reset

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

La page contient actuellement 2 boutons qui ressemblent à une icône ❓ — ils sont cachés. Pour les révéler : ouvre le fichier HTML, trouve les blocs avec la classe reveal-wrapper hidden (autour des lignes 89 et 100) et retire le mot hidden de la classe, pour qu'il ne reste que reveal-wrapper. Ensuite, à la place de ❓ apparaîtront les vrais boutons : ✨ Regen et 🔄 Reset.

⚔️ Règles du combat :

• ✨ Regen — restaure 10 HP chaque seconde, pendant 5 secondes
• 🔄 Reset — ramène instantanément les HP du personnage au maximum (100)
• 🎨 La couleur de la barre de HP dépend du pourcentage de vie :
  — plus de 50% — "#3ecf4a"
  — de 20% à 50% inclus — "yellow"
  — moins de 20% — "red"

📐 Comment ça doit fonctionner :

En cliquant sur Regen, un compte à rebours démarre : une fois par seconde, les HP du personnage augmentent de 10, et ce 5 fois de suite. La barre et le texte des HP se mettent à jour après chaque tick. Les HP ne peuvent pas dépasser 100.

En cliquant sur Reset, les HP du personnage passent immédiatement à 100, peu importe leur valeur précédente. La barre et le texte des HP se mettent à jour immédiatement.