Einstieg in das Thema
Was brauchst du als Basiswissen?
Das bisherige Wissen zu JavaScript ist wichtig.
Worum geht es?
Was noch fehlt, ist ein Trick, um auch Animation zu erstellen. Auch Spiele sind damit möglich. Bisher haben wir immer auf Ereignisse reagiert. Es gab aber nirgendwo etwas, das Code permanent ablaufen lässt, wie du das aus Spielen kennst. Darum geht es jetzt.
Was ist das Ziel?
Am Ende kennst du den Trick, wie man Animationen ablaufen lassen kann.
Erarbeitung
Theorie
Aufgaben zur Erarbeitung
Du bekommst ein kleines Spiel, bei dem du einen Ball anklicken musst.
Aufgabe 1
Wie heißt die zentrale Funktion, die immer wieder aufgerufen wird?
Aufgabe 2
In welchen Variablen steht, wie schnell sich der Ball bewegt?
Aufgabe 3
Der Ball ist ein div-Element. Mit welchem Trick macht man ihn zum Kreis?
Aufgabe 4
Wann ändert der Ball seine Richtung (Abprallen)?
Aufgabe 5
Wie erfolgt das Abprallen im Programm?
Aufgabe 6
Wie viele EventListener gibt es im Programm?
Aufgabe 7
Was machen diese EventListener?
Aufgabe 8
Was bedeutet || in den Zeilen 76 und 79?
Vertiefung
Aufgabe 9
Es wird etwas schwieriger, wenn der Ball schneller wird, wenn die Maus in der Nähe ist. Dazu brauchst du den Abstand. Welche Variablen sind dafür schon vorgefertigt?
Aufgabe 10
Was muss erfüllt sein, damit der Ball schneller wird? Benutze dabei die Abstandsvariablen.
Aufgabe 11
Setze dies um und gib den Quelltext hier an. Tipp: Du brauchst vielleicht eine Und-Verknüpfung. Die schreibt man mit &&.
Zusammenfassung
Was muss man wissen/können?
Du musst wissen, wie man Animationen erstellt und kannst dies auch umsetzen.
Was können anschließende Themen sein?
Jetzt ist es an der Zeit, sich prüfen zu lassen. Weil das Thema doch sehr umfangreich war, gibt es noch ein paar Hinweise.
