Aufgabe 20 - Canvas-Aquarium

Aufgabe 20 - Canvas-Aquarium

Worum geht es?

OOP trifft Grafik: Ein Aquarium voller Fische, jeder ein Objekt, das sich selbst zeichnet und bewegt (siehe Kapitel GUI II - Canvas und Medien).

In dieser Übung üben Sie:

• Zeichnen: Formen und Farben auf dem Canvas.
• Animieren: Bewegung über Objektzustand und requestAnimationFrame.
• Objektdenken: jede Figur kapselt Zustand und Verhalten (update(), draw()).

Benötigte Unterlagen

• VS Code, Browser; Projekt mit index.html (Canvas 800x500) und script.js.

Arbeitsaufträge

Teil A - Ein Fisch

1. Klasse Fisch mit Feldern x, y, geschwindigkeit, groesse, farbe.
2. draw(ctx): zeichnet den Fisch (Ellipse + Dreieck als Schwanz genügt völlig).
3. update(): bewegt den Fisch horizontal; am Rand dreht er um (Geschwindigkeit spiegeln, Blickrichtung beachten).
4. Animationsschleife: Canvas löschen -> alle Objekte update() -> alle draw().

Teil B - Ein Schwarm

1. Erzeugen Sie 10 Fische mit zufälliger Position, Größe, Farbe und Geschwindigkeit in einem Array.
2. Die Animationsschleife behandelt alle Fische gleich, egal wie viele. Fügen Sie per Mausklick einen neuen Fisch an der Klickposition hinzu.
3. Ergänzen Sie Luftblasen als zweite Klasse Blase (steigt auf, verschwindet oben, startet unten neu). Die Schleife verwaltet beide Objektarten.

Teil C - Steuerung und Medien

1. Ein Schieberegler (input type="range") steuert die globale Geschwindigkeit (Faktor auf alle update()-Aufrufe).
2. Zusatz: Hintergrundbild einbinden und/oder ein Blubber-Geräusch beim Klick abspielen (Audio).
3. Kontrollfrage als Kommentar: Warum ist update() von draw() getrennt? Was würde bei einer gemeinsamen Methode schwieriger?

Abgabe

Projektordner mit flüssig laufender Animation (keine Konsolenfehler).