Spieleentwicklungs-Lab: Spielschleife, Schwerkraft und Kollisionen im Browser

Dieses Lab gibt jeder lernenden Person ein kleines eigenes Spiel, Catch the stars, aus drei Dateien: index.html für die Seite, style.css fürs Aussehen und game.js für die Regeln. Sie bearbeiten die Dateien im Dateieditor von JupyterLab und spielen das Spiel über einen zweiten Link, die Preview, die aus demselben Ordner ausgeliefert wird. Kurze Python-Skripte lesen game.js, geben aus, was darin steht, und rechnen die Arithmetik des Spiels noch einmal nach, sodass man prüfen kann, wie ein Spiel funktioniert, und nicht nur, es zu ändern.

Es ist kein Angriffs-Lab, und es hat weder eine Engine noch eine Bibliothek: Ein Spiel ist einfaches JavaScript auf einem HTML-Canvas, und der Browser ist die einzige Laufzeit. Jede Kopie hat keinen Weg ins Internet und keinen zu anderen Lernenden, also lässt sich nichts hineinladen und nichts darin kann jemand anderen erreichen.

Was die Lernenden lernen

Was eine Spielschleife ist: eine Funktion, die einmal pro Frame läuft, das Spiel aktualisiert, zeichnet und den Browser bittet, sie wieder aufzurufen. Wie ein Spiel seine Zahlen in benannten Konstanten wie GRAVITY, PLAYER_SPEED und SPAWN_EVERY hält und seine Level in einer Datentabelle, sodass ein schwereres Spiel bedeutet, Daten zu ändern und nicht Code. Wie Schwerkraft in einem Spiel funktioniert, als Zahl, die in jedem Frame zu einer Geschwindigkeit addiert wird und dann die Position bewegt. Und wie eine Kollision gefunden wird, indem man prüft, ob sich zwei Boxen auf beiden Achsen überlappen. Es passt zu Einführungen in die Spieleentwicklung und in das Programmieren mit Spielen; prüfen Sie den genauen Wortlaut in der Einheit Ihrer eigenen Prüfungsstelle, hier wird keine zitiert.

Im Browser starten

Das Lab startet einen Dienst, jupyter, der das Spiel, ein Start-Notebook und die kurzen Skripte in seinen Arbeitsordner schreibt und auf dem Ordner game einen einfachen Dateiserver startet. Von der Seite des Labs öffnen sich zwei Links: JupyterLab, die Werkbank, und Preview, das Spiel selbst. JupyterLab verlangt kein Token, weil die Tür der Plattform schon weiß, wer es öffnet. Im Lab gibt es keinen Browser, die Skripte können das Spiel also nicht zeigen, nur seinen Code lesen; die Lernenden spielen es im eigenen Browser über den Preview-Link, mit den Pfeiltasten oder den Schaltflächen auf dem Bildschirm. Die Preview zeigt die gespeicherten Dateien: Nach dem Bearbeiten einer Datei speichert man sie und lädt die Preview neu. Das Terminal neben dem Lab hat kein eigenes Python, es erreicht das des Labs mit docker exec jupyter, gefolgt vom Befehl, der darin ausgeführt wird.

  1. Container-Seite öffnen. Öffnen Sie in der Leiste „Entwickeln“ und wählen Sie „Einen Container ausführen“. Die Seite kann jeder öffnen, und das Git-Lab und das SQL-Lab starten ohne Konto. Alle anderen Labs brauchen ein kostenloses Konto: Erstellen Sie eines, melden Sie sich an und klicken Sie dann auf „Starten“.
  2. Lab suchen. Die Karte „Beispiel-Labs“ listet alle Beispiele auf. Suchen Sie Spieleentwicklung: eine Spielschleife in JavaScript.
  3. Auf „Starten“ klicken. „Starten“ führt das Lab unverändert mit einem einzigen Klick aus. „Zuerst die Datei bearbeiten“ öffnet die Compose-Datei, damit Sie sie vor dem Start ändern können.
  4. Öffnen. Auf der Seite des Labs hat die Lab-Leiste zwei Links. Klicken Sie auf Preview, um zu spielen, dann auf JupyterLab, öffnen Sie den Ordner game und doppelklicken Sie auf game.js. Klicken Sie danach auf „Terminal öffnen“ und tippen Sie docker exec jupyter python3 steps/loop.py, um die benannten Konstanten und Funktionen des Spiels aufzulisten.

Was die Lernenden abgeben sollen

Ihre eigene Version des Spiels: die drei Dateien aus dem Ordner game, aus JupyterLab mit File, Download heruntergeladen. Dazu ein, zwei Sätze in eigenen Worten dazu, welche Zahl sie geändert haben, zum Beispiel GRAVITY, PLAYER_SPEED oder eine Zeile von LEVELS, und was das im Spiel bewirkt hat. Nichts wird automatisch bewertet: Der Satz zeigt, ob es verstanden wurde. Für anspruchsvollere Arbeit lassen Sie steps/fall.py vor und nach der Änderung ausführen und sagen, was sich bewegt hat, oder der Tabelle ein fünftes Level hinzufügen und erklären, wie sich die Ausgabe des Skripts ändert.

Eine Grundlektion zu diesem Lab

Game Loop Basics ist eine kleine Lektion, die in diesem Lab abläuft. Darin listen die Lernenden die drei Dateien des Spiels auf, lesen seine benannten Konstanten, seine Funktionen und die Schleife, die in jedem Frame läuft, berechnen die Level aus der Tabelle, verfolgen einen fallenden Stern zehn Frames lang, führen den Box-Überlappungstest an festen Paaren aus und fragen den Server der Preview nach der Seite. Sie ist bewusst klein: Sie zeigt Lehrkräften, was eine Lektion in einem Lab ist, und das Lab erledigt den Rest. Kopieren Sie sie in ein eigenes Modul, um sie zu ändern.

Der Code auf GitHub

Die Compose-Datei hat kein Dockerfile: Sie startet ein einziges öffentliches Standard-Image, das scipy-notebook der Jupyter Docker Stacks, auf ein datiertes Tag festgelegt, mit eigenem Konto ohne Rechte und 512 MB Speicher. Das Image steht unter BSD-3-Clause und wird von uns nicht verteilt. Die Datei schreibt das Spiel und die Skripte beim Start aus festem Text, jede Kopie ist also gleich und nichts wird heruntergeladen. Die Grenzen sind ehrlich: Das Spiel ist klein, es gibt keine Engine und keine Möglichkeit, eine Bibliothek aus dem Internet zu holen, und im Lab ist kein Browser, die Skripte lesen also den Code, statt das Spiel auszuführen, und wo ein Stern startet, ist bei jeder Runde zufällig. Nichts bleibt erhalten, wenn das Lab stoppt; die Lernenden laden ihre Dateien vorher herunter.

Als Aufgabe stellen

Sagen Sie in der Aufgabe, was abzugeben ist.

  1. Lab erstellen. Fügen Sie in Ihrem Modul eine Aufgabe hinzu und wählen Sie die Karte „Container-Lab“, dann „In einem GitHub-Repository“. Geben Sie https://github.com/mitsurutech/lab-game-web mit dem Branch main an. Die Compose-Datei ist standardmäßig compose.yaml. Forken Sie das Repository zuerst, wenn Sie es ändern möchten, zum Beispiel um mit einem anderen Spiel zu beginnen.
  2. Veröffentlichen und ausprobieren. „Veröffentlichen“ legt den Commit fest, den Sie gesehen haben. Eine spätere Änderung im Repository verändert also kein Lab, das Sie bereits gestellt haben. Starten Sie zuerst Ihre eigene Kopie.
  3. Zuweisen. Weisen Sie es wie jede Aufgabe zu, auf Wunsch mit Fälligkeitsdatum, und schreiben Sie in die Aufgabe, was zu tun ist und was abgegeben werden soll.
  4. Abgaben bewerten. Öffnen Sie die Kopie einer lernenden Person und die abgegebene Arbeit, bewerten Sie sie und geben Sie sie mit einer Begründung zur Überarbeitung zurück, wenn mehr nötig ist.

Dieses Lab ausprobieren, und was es kostet

Mit einem kostenlosen persönlichen Konto können Sie die Grundlagenlektionen in diesem Lab durcharbeiten, mit genug kostenlosem Guthaben pro Monat für die meisten Lektionen und ohne Karte. Für eine Klasse sind die ersten 365 Tage für eine Schule kostenlos, für bis zu 50 Lernende; danach zahlt sie je lernender Person und Jahr, alle Labs inklusive und Lehrkräfte kostenlos.

Häufige Fragen

Warum gibt es zwei Links?
JupyterLab, der erste, ist der Ort, an dem die Lernenden die Dateien bearbeiten und das Terminal benutzen. Preview, der zweite, ist das Spiel selbst, aus dem Ordner game ausgeliefert, so wie ein Spieler es sähe. Das Spiel in einem eigenen Tab zu halten heißt, dass es nicht in einen Editor eingepackt ist.
Können die Skripte mir das Spiel zeigen?
Nein. Im Lab gibt es keinen Browser: Ein Skript kann game.js lesen und seine Arithmetik wiederholen, aber es nicht zeichnen. Spielen Sie im eigenen Browser über den Preview-Link. Die Skripte geben jedes Mal dieselben Zahlen aus, sodass eine Klasse Antworten vergleichen kann.
Ich habe eine Datei geändert und die Preview hat sich nicht verändert. Warum?
Die Preview zeigt die gespeicherten Dateien. Speichern Sie die Datei im Editor und laden Sie die Preview neu. Sieht sie noch gleich aus, versuchen Sie ein hartes Neuladen, denn ein Browser kann eine alte Kopie einer Datei behalten.
Warum muss ich kein Token oder Passwort eintippen?
Die Webseite eines Labs ist nur über die Tür der Plattform erreichbar, die schon weiß, wer Sie sind, und nur Sie und die Lehrkräfte Ihres Moduls einlässt. Deshalb wird JupyterLab ohne Token gestartet. Starten Sie es nicht so auf einem Rechner, den andere erreichen können.