BananaMaster

47.1 - Cena de Batalha: Dano, Prática (Aulas JS — argumentos e return)

Se esqueceu algo — clique para ir à aula.

📘 Tarefa: Battle HP Bar

Na página há um personagem com uma barra de HP acima dele. Abaixo do personagem estão 4 botões de ataque.

🏗️ O que você precisa preparar no HTML:

• Um elemento com o texto de HP — por exemplo, class="hp-text"
• A barra de HP — por exemplo, class="hp-bar-fill"
• 4 botões de ataque

⚔️ Regras da batalha:

• ❤️ HP máximo — 100, o mesmo no início da batalha
• 👊 Punch — 10 de dano
• 🦵 Kick — 15 de dano
• 🔥 Fireball — 25 de dano
• 💥 Critical — 40 de dano

📐 Como isso deve funcionar:

Ao clicar em qualquer um dos 4 botões, o HP atual do personagem diminui pelo dano daquele botão. O HP não pode ficar abaixo de 0. Depois de cada clique, a barra e o texto de HP na tela são atualizados e mostram o valor atual.

🧪 Exemplo:

O personagem começa a batalha com 100 HP. O usuário clica nos botões em sequência:

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

Depois desses três cliques, a tela deve mostrar:

25 / 100 HP