BananaMaster

47.3 - Cena de Batalha: Regen e Reset, Prática (Aulas JS — argumentos e return)

Se esqueceu algo — clique para ir à aula.

📘 Tarefa: Battle HP Bar — Regen & Reset

🏗️ O que você precisa preparar no HTML:

Agora a página tem 2 botões parecidos com um ícone ❓ — eles estão escondidos. Para revelá-los: abra o arquivo HTML, encontre os blocos com a classe reveal-wrapper hidden (por volta das linhas 89 e 100) e remova a palavra hidden da classe, para que fique apenas reveal-wrapper. Depois disso, no lugar de ❓ vão aparecer os botões de verdade: ✨ Regen e 🔄 Reset.

⚔️ Regras da batalha:

• ✨ Regen — restaura 10 HP a cada segundo, durante 5 segundos
• 🔄 Reset — devolve instantaneamente o HP do personagem ao máximo (100)
• 🎨 A cor da barra de HP depende da porcentagem de vida:
  — acima de 50% — "#3ecf4a"
  — de 20% a 50% inclusive — "yellow"
  — abaixo de 20% — "red"

📐 Como isso deve funcionar:

Ao clicar em Regen, começa uma contagem: uma vez por segundo o HP do personagem aumenta em 10, e assim 5 vezes seguidas. A barra e o texto de HP são atualizados depois de cada tick. O HP não pode ultrapassar 100.

Ao clicar em Reset, o HP do personagem vira 100 imediatamente, não importa quanto era antes. A barra e o texto de HP são atualizados na hora.