Das ist der wichtigste Punkt überhaupt. Viele Anfänger machen den Fehler, dass sie VS Code öffnen und einfach drauf los tippen. Das endet meistens in Frust ("Spaghetti-Code"), weil man sich verzettelt.

Bring ihm diesen 4-Schritte-Workflow bei. Das ist vereinfacht genau das, was auch professionelle Studios machen.

Schritt 1: Das "Papier-Prototyping" (Ohne Computer!)
Bevor er eine Zeile Code schreibt, soll er sich Zettel und Stift nehmen.

Die Skizze: Er malt den Bildschirm auf. Wo ist der Spieler? Wo sind die Gegner? Wo steht der Punktestand?

Die Logik: Er schreibt in einfachen Sätzen auf (oder ins Wiki!), was passieren soll.

Beispiel: "Wenn ich Leertaste drücke, springt der Dino. Wenn er den Kaktus berührt, ist Game Over."

Schritt 2: Das "Graue Kästchen" Phase (MVP)
Das ist der Profi-Trick: Er soll keine Grafiken suchen! Er soll das Spiel erst mit bunten Rechtecken programmieren (so wie in meinem Beispiel-Code vorhin).

Der Spieler ist ein blaues Quadrat.

Der Gegner ist ein rotes Quadrat.

Ziel: Die Mechanik muss Spaß machen. Wenn das Hüpfen mit einem Quadrat keinen Spaß macht, macht es auch mit einer tollen Mario-Grafik keinen Spaß.

Er kopiert dafür einfach den Ordner _VORLAGE_SPIEL, nennt ihn um und fängt an.

Schritt 3: Die "Asset"-Phase (Grafik & Sound)
Erst wenn das Spiel mit Quadraten funktioniert (man kann gewinnen/verlieren), darf er es hübsch machen.

Woher bekommt er Grafiken? Es gibt eine heilige Seite für Spieleentwickler: Kenney.nl. Dort gibt es tausende Grafiken (Raumschiffe, Männchen, Autos, Sounds), die komplett kostenlos (CC0) sind. Er darf sie ohne Fragen zu stellen benutzen.

Wie bindet er sie ein? Er lädt das Bild herunter, speichert es im Spielordner als spieler.png und ändert im Code:

JavaScript
loadSprite("spieler", "spieler.png"); // Bild laden
// ...
sprite("spieler") // Statt rect() benutzen
Schritt 4: Release & Feedback (Der Server)
Jetzt kommt dein Server ins Spiel.

Er lädt den Ordner hoch.

Er schickt den Link in seine WhatsApp-Gruppe.

Wichtig: Er muss lernen, Kritik auszuhalten. "Das ist zu schwer!", "Der Sprung ist komisch."

Er geht zurück zu Schritt 2 und verbessert den Code.

Eine konkrete Übung für das erste Wochenende
Damit er diesen Ablauf einmal verinnerlicht, gib ihm diese konkrete Aufgabe ("Challenge"):

Thema: "Der hungrige Frosch"

Idee (Papier): Ein Frosch sitzt unten. Fliegen fliegen oben vorbei. Mit Klick schießt die Zunge nach oben.

MVP (Code):

Frosch = Grünes Rechteck.

Fliege = Schwarzes kleines Rechteck.

Zunge = Eine Linie oder ein langes Rechteck.

Ziel: Wenn Zunge trifft Fliege -> Fliege weg, Punkte hoch.

Polishing:

Er sucht sich ein Frosch-Bild und ein Fliegen-Bild.

Er sucht ein "Schlürf"-Geräusch.

Upload: Ab auf spiel.deinesippe.de.

Wenn er diesen Zyklus einmal durchlaufen hat, hat er mehr verstanden als durch 10 YouTube-Tutorials, die man nur passiv anschaut. Er lernt dabei: Fertig werden ist wichtiger als perfekt sein.