BananaMaster

47.1 - Kampfszene: Schaden, Praxis (JS-Lektionen — Argumente und return)

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

📘 Aufgabe: Battle HP Bar

Auf der Seite ist ein Charakter mit einer HP-Leiste darüber zu sehen. Unter dem Charakter befinden sich 4 Angriffs-Buttons.

🏗️ Was du in HTML vorbereiten musst:

• Ein Element mit dem HP-Text — zum Beispiel class="hp-text"
• Die HP-Leiste — zum Beispiel class="hp-bar-fill"
• 4 Angriffs-Buttons

⚔️ Kampfregeln:

• ❤️ Maximale HP — 100, ebenso viel zu Beginn des Kampfes
• 👊 Punch — 10 Schaden
• 🦵 Kick — 15 Schaden
• 🔥 Fireball — 25 Schaden
• 💥 Critical — 40 Schaden

📐 Wie das funktionieren soll:

Beim Klick auf einen der 4 Buttons verringern sich die aktuellen HP des Charakters um den Schaden dieses Buttons. Die HP dürfen nicht unter 0 fallen. Nach jedem Klick werden die HP-Leiste und der Text auf dem Bildschirm aktualisiert und zeigen den aktuellen Wert.

🧪 Beispiel:

Der Charakter startet den Kampf mit 100 HP. Der Benutzer klickt die Buttons nacheinander:

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

Nach diesen drei Klicks sollte auf dem Bildschirm stehen:

25 / 100 HP