Ein Spiel ist eine Schleife
Denk an ein Daumenkino. Jede Seite ist ein Bild, und beim schnellen Durchblättern scheint sich etwas zu bewegen. Ein Spiel funktioniert genauso: Sechzigmal pro Sekunde berechnet es, wo alles gerade ist, zeichnet ein Bild und beginnt von vorn. Catch the stars ist ein kleines Spiel dieser Art. Von oben fallen Sterne, du schiebst unten eine Box hin und her, um sie zu fangen, und für jeden Stern, der durchrutscht, verlierst du ein Leben.
Am Ende dieser Lektion
Notiz
Ich kann sagen, was eine Spielschleife in jedem Frame tut, und die Schwerkraft und die Kollisionen eines Spiels mit einem kurzen Skript prüfen.
Schlüsselwörter
- Frame: ein Bild des Spiels, viele Male pro Sekunde gezeichnet.
- Spielschleife: der Code, der einmal pro Frame läuft: aktualisieren, dann zeichnen.
- Konstante: eine benannte Zahl am Anfang des Codes, zum Beispiel
GRAVITY, die du an einer einzigen Stelle änderst. - Schwerkraft: eine Zahl, die in jedem Frame zur Geschwindigkeit eines fallenden Dings addiert wird.
- Kollision: zwei Dinge berühren sich, erkannt durch den Vergleich ihrer Boxen.
- Spielzustand: was sich das Spiel merkt, zum Beispiel Punkte und Leben.
Zum Einstieg: was du schon weißt
Notiz
Antworte in Gedanken. 1. Fällt ein losgelassener Ball bis unten gleich schnell? 2. Woran erkennst du, dass sich zwei auf Papier gezeichnete Boxen überlappen? 3. Was soll dir ein Spiel zeigen, nachdem du verloren hast? Antworten: nein, er wird schneller; prüfen, ob die eine beginnt, bevor die andere endet, in der Breite und in der Höhe; eine Meldung und eine Möglichkeit, noch einmal zu spielen.
Bevor du anfängst
Notiz
Klicke oben in der Leiste dieser Lektion auf Lab starten und warte, bis dort steht, dass es läuft. Es gibt einen Container, jupyter, und das Terminal erreicht sein Python mit docker exec jupyter, das einen Befehl darin ausführt. Er hat zwei Links. JupyterLab, der erste, ist der Editor, Port 8888. Preview (die Vorschau), der zweite, ist das Spiel selbst, Port 8000: Öffne es in einem Tab deines Browsers und spiele jetzt eine Runde. Jede Schaltfläche Ausführen unten tippt ihren Befehl ins Terminal deines Labs, einen nach dem anderen in derselben Sitzung. Wenn du zuschauen oder eigene Befehle tippen willst, klicke in der Leiste auf Terminal öffnen (neuer Tab).
Ein Spiel besteht aus wenigen einfachen Dateien
ls game listet die drei Dateien des Spiels auf: index.html für die Seite, style.css fürs Aussehen und game.js für die Regeln. Der zweite Befehl gibt ihre Größen aus: 667, 442 und 4399 Bytes, zusammen 5508. Fast das ganze Spiel steckt in game.js. Es gibt keine Engine und keine Bibliothek, nur das, was der Browser schon hat.
docker exec jupyter ls gameHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
docker exec jupyter python3 steps/sizes.pyHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Die Spielschleife
Das Skript liest game.js und gibt die benannten Konstanten am Anfang aus: GRAVITY ist 0.15, PLAYER_SPEED ist 6 und SPAWN_EVERY ist 50, also alle 50 Frames ein neuer Stern. Danach listet es die Funktionen auf. Zwei sind am wichtigsten. update bewegt alles und prüft, was passiert ist, und draw malt das Bild. Die Funktion loop ruft beide auf und bittet dann den Browser, sie für den nächsten Frame wieder aufzurufen, mit requestAnimationFrame. Dieser endlose Aufruf ist die Spielschleife.
docker exec jupyter python3 steps/loop.pyHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Prüfe dich
Tipp
Was tut die Schleife in jedem Frame, und welche Konstante legt fest, wie oft ein neuer Stern erscheint? Antwort: Sie aktualisiert das Spiel und zeichnet es dann; SPAWN_EVERY.
Konstanten und eine Tabelle mit Leveln
Ein gutes Spiel hält seine Zahlen dort, wo man sie findet. LEVELS ist eine Datentabelle: vier Zeilen, Drizzle, Shower, Storm und Meteors, die bei den Punktzahlen 0, 5, 12 und 20 beginnen. Jede Zeile skaliert die Grundzahlen, und das Skript rechnet das Ergebnis aus: Die Schwerkraft wächst von 0.150 auf 0.360, und der Abstand zwischen den Sternen schrumpft von 50 Frames auf 25. Das Spiel wird also schwerer, indem man Daten ändert und nicht den Code. Probiere es aus: Ändere GRAVITY in game.js, speichere, führe das Skript noch einmal aus und spiele in der Preview.
docker exec jupyter python3 steps/levels.pyHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Schwerkraft ist eine Zahl, die in jedem Frame addiert wird
Die Schwerkraft bewegt einen Stern nicht von allein. In jedem Frame addiert sie ein wenig zur Geschwindigkeit des Sterns, und dann bewegt die Geschwindigkeit den Stern. Das Skript verfolgt einen Stern zehn Frames lang mit der Konstante aus game.js: Die Geschwindigkeit wächst pro Frame um 0.15, bis auf 1.50, und der Stern ist insgesamt 8.25 Pixel gefallen. Jeder Frame macht einen größeren Schritt als der davor, darum scheint ein Stern beim Fallen schneller zu werden.
docker exec jupyter python3 steps/fall.pyHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Eine Kollision ist eine Frage an zwei Boxen
Um einen Stern zu fangen, fragt das Spiel, ob sich zwei Boxen überlappen. Das tun sie, wenn jede beginnt, bevor die andere endet, in der Breite wie in der Höhe. Das Skript macht denselben Test in Python an sechs festen Paaren: Überlappende Boxen und eine Box in einer anderen ergeben True, weit entfernte Boxen ergeben False, und Boxen, die nur eine Kante teilen, ebenfalls. Das Spiel macht den Test für jeden Stern in jedem Frame.
docker exec jupyter python3 steps/collide.pyHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Das Spiel ausliefern und spielen
Die Preview ist ein einfacher Dateiserver. Das Skript fragt ihn nach der Seite, dem Skript des Spiels und dem Stylesheet, wie es ein Browser tut, und jede Antwort lautet 200. Nichts im Lab kann für dich spielen, denn es ist kein Browser darin. Öffne die Preview in deinem eigenen Tab: Mit den Pfeiltasten links und rechts oder den Schaltflächen schiebst du die Box. Nach drei verpassten Sternen steht dort Game over, und mit der Leertaste oder Restart beginnt eine neue Runde.
docker exec jupyter python3 steps/serve.pyHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Ein häufiger Fehler
Warnung
Viele denken, eine größere Zahl mache ein Spiel immer besser. Das stimmt nicht. Ist GRAVITY zu groß, fallen die Sterne schneller, als irgendjemand reagieren kann, und ist PLAYER_SPEED zu klein, kommt die Box nicht darunter. Ändere immer nur eine Zahl, spiele und schreibe auf, was du gesehen hast, bevor du die nächste änderst.
Dieselben Prüfungen in einem Notebook
Öffne JupyterLab in der Leiste und doppelklicke auf start.ipynb. Seine Zellen lesen die Konstanten, machen den Überlappungstest an zwei Boxen und fragen die Preview nach der Seite. Klicke auf eine Zelle und drücke Umschalt und Eingabe, um sie auszuführen. In der letzten Zelle ist Platz für deine eigene Änderung: Ändere GRAVITY, speichere und berechne, wo ein Stern nach zehn Frames ist.
Abschlusscheck
Tipp
Antworte, ohne zurückzublättern. 1. Welche zwei Aufgaben erledigt die Spielschleife in jedem Frame? 2. Was ändert die Schwerkraft in jedem Frame, die Position oder die Geschwindigkeit? 3. Wann überlappen sich zwei Boxen? 4. Warum ist eine Tabelle mit Leveln besser, als jedes Level in den Code zu schreiben? Antworten: aktualisieren und zeichnen; die Geschwindigkeit, und die Geschwindigkeit bewegt dann den Stern; wenn jede beginnt, bevor die andere endet, in der Breite und in der Höhe; man ändert die Daten und nicht den Code.
Für Lehrkräfte
Tipp
Diese Lektion ist ein kleines Beispiel für eine Lektion, die in einem Lab abläuft: Die Schritte und die Schaltflächen „Ausführen“ sind die Lektion, und das Lab ist die eigene Kopie jeder lernenden Person. Das Lab ist ein Dienst, JupyterLab mit einer Live-Kopie eines kleinen Spiels, und nichts hier bewertet sich selbst: Die Lernenden geben ihre eigene Version der drei Dateien in game ab, aus JupyterLab heruntergeladen, und einen Satz dazu, welche Zahl sie geändert haben und was es bewirkt hat. Kernpunkte: 1. Ein Spiel ist eine Schleife aus Aktualisieren und Zeichnen. 2. Die Schwerkraft ändert die Geschwindigkeit, und die Geschwindigkeit ändert die Position. 3. Eine Kollision ist ein Test an Boxen, und Zahlen gehören in benannte Konstanten und Tabellen. Häufiger Fehler: mehrere Zahlen auf einmal zu ändern. Material: das Lab und ein Browser, denn das Lab hat keinen und das Spiel wird im Browser der lernenden Person gespielt. Tipp: Lassen Sie die Lernenden vor dem Neuladen vorhersagen, was eine Änderung bewirkt. Das Spiel und die Skripte entstehen aus festem Text, jede Kopie liefert also dieselben Zahlen, nur der Startpunkt eines Sterns ist zufällig. Kopieren Sie die Lektion in Ihr eigenes Modul und ändern Sie sie, oder bauen Sie im Lektionseditor über das Menü Lab eine neue von Grund auf.