BananaMaster

47.3 - Kampfszene: Regen und Reset, Praxis (JS-Lektionen — Argumente und return)

Falls du etwas vergessen hast — klicke, um zur Lektion zurückzukehren.

📘 Aufgabe: Battle HP Bar — Regen & Reset

🏗️ Was du in HTML vorbereiten musst:

Auf der Seite gibt es aktuell 2 Buttons, die wie ein ❓-Symbol aussehen — sie sind versteckt. Um sie sichtbar zu machen: öffne die HTML-Datei, finde die Blöcke mit der Klasse reveal-wrapper hidden (etwa Zeile 89 und 100) und entferne das Wort hidden aus der Klasse, sodass nur noch reveal-wrapper übrig bleibt. Danach erscheinen anstelle von ❓ die echten Buttons: ✨ Regen und 🔄 Reset.

⚔️ Kampfregeln:

• ✨ Regen — stellt jede Sekunde 10 HP wieder her, für 5 Sekunden
• 🔄 Reset — setzt die HP des Charakters sofort auf das Maximum (100) zurück
• 🎨 Die Farbe der HP-Leiste hängt vom Gesundheitsprozentsatz ab:
  — über 50% — "#3ecf4a"
  — von 20% bis einschließlich 50% — "yellow"
  — unter 20% — "red"

📐 Wie das funktionieren soll:

Beim Klick auf Regen startet ein Countdown: einmal pro Sekunde erhöhen sich die HP des Charakters um 10, und das 5-mal hintereinander. Die HP-Leiste und der Text werden nach jedem Tick aktualisiert. Die HP dürfen nicht über 100 steigen.

Beim Klick auf Reset werden die HP des Charakters sofort auf 100 gesetzt, unabhängig davon, wie viel es vorher war. Die HP-Leiste und der Text werden sofort aktualisiert.