Wie begeistert man Kinder für Programmieren? Wie schafft man es, Kreativität, Spielspaß und moderne Technologien wie KI zusammenzubringen, ohne dass die Kids sofort das Weite suchen? Ich wollte es wissen – und hatte eine Mission: Ein Jump & Run-Spiel direkt im Browser, alle Bilder KI-generiert und das alles in den Ferien!
Was am Ende dabei herauskam? Eine Menge Spaß, viele verrückte Ideen und eine kleine Hoffnung, dass meine Kinder in Zukunft mehr in die Richtung machen werden.
Inhalt
Die meisten Kinder kennen inzwischen „ChatGPT“ oder zumindest diese „Bilder-KI“, die Mama oder Papa auf dem Handy manchmal ausprobiert. Prompting heißt nichts anderes, als einer KI per Text zu sagen, was sie tun soll – zum Beispiel: „Erstelle ein Bild von einem Manga-Mädchen mit rosa Rock.“
Und zack, ein paar Sekunden später spuckt die KI ein schickes Bild aus. Diesen Textbefehl nennt man Prompt.
In meinem Ferienprojekt haben wir genau das gemacht: Schritt für Schritt haben wir ein Spiel gebaut, bei dem alle Grafiken mit Prompts erstellt werden. Gespielt wird direkt im Browser – auf CodePen. Ideal für schnelle Erfolgserlebnisse und noch schnelleres Ausprobieren.
Ganz ehrlich: Als Informatiker hat man es bei Kindern schwer. Polizist, Feuerwehrmann, Tierärztin – klar! Aber was macht Papa eigentlich den ganzen Tag am Computer?
Ich wollte meinen Kids zeigen, dass Programmieren nicht nur aus Buchstabensalat und Mathe besteht. Mein Experiment mit Lego Boost war – sagen wir mal – durchwachsen („Kann man damit auch Minecraft bauen?“). Aber eines funktioniert immer: Spielen!
Also warum nicht einfach mal das machen, was ich im Job auch mache: Prompt Programming – aber auf die Kinder-Art. Das Ergebnis: Ein Haufen Spaß, viele „Wow!“-Momente und ein Spiel, das wirklich von uns gemeinsam gestaltet wurde.
Fun Fact: Es blieb nicht nur bei einem Spiel. Am Ende des Tages hatten wir einen Haufen unterschiedlicher Spiele ausprobiert!
Wer es technisch nicht so genau wissen möchte, kann diesen Abschnitt auch überspringen und direkt mit dem Spielanleitung starten!
Vielleicht fragen sich einige Eltern (und auch die cleveren Kids): Was sind eigentlich HTML, CSS und JavaScript, von denen immer die Rede ist? Hier eine kurze, leicht verständliche Erklärung – ganz ohne Informatik-Studium! Den Teil kann man den Kindern auch gerne am Ende zeigen, wenn sie es genauer wissen wollen. Ansonsten läuft man Gefahr, sie gleich am Anfang zu verlieren.
HTML – Das Grundgerüst
HTML steht für „HyperText Markup Language“. Damit baut man sozusagen das Skelett einer Webseite. Hier legt man fest:
Man kann sich HTML wie die Bausteine oder das Lego-Grundbrett eines Hauses vorstellen.
CSS – Das Aussehen
CSS steht für „Cascading Style Sheets“. Klingt kompliziert, ist aber im Prinzip nur das Styling – also das, was die Webseite hübsch macht:
Mit CSS wird aus grauen Kästen ein buntes Spiel – quasi die Malfarbe für unser Haus.
JavaScript – Die Bewegung & Intelligenz
JavaScript ist die Programmiersprache, die alles zum Leben erweckt. Hier passiert die „Magie“:
JavaScript ist das Gehirn und die Muskeln unseres Spiels. Ohne JavaScript bleibt alles statisch.
Merke:
Und das Tolle: In CodePen kann man all das direkt ausprobieren und sofort sehen, was passiert. Ideal zum Rumspielen, auch für Erwachsene!
Wir starten mit dem Grundgerüst:
Das alles funktioniert direkt in CodePen – aufgeteilt in HTML, CSS und JavaScript.
Prompt für ChatGPT:
"Erzeuge ein einfaches Jump & Run Spiel mit HTML, CSS und JavaScript, das in CodePen lauffähig ist. Die Spielfigur soll sich mit den Pfeiltasten bewegen und springen können. Plattformen sollen eingebaut sein."
Tipps für Chaos-Liebhaber:
Die Kids durften erstmal vorschlagen, wie die Spielfigur aussehen soll. Dabei kam alles von „Fliegende Ratte“ bis „Fußballspieler“. Am Ende wurde es ein Manga-Mädchen, aber beim nächsten Mal probieren wir Musiala!
Der Code (HTML, CSS, JS) muss nach CodePen kopiert werden. Danach kann man schon rumlaufen, aber gewinnen oder verlieren kann man noch nicht. Hier ein paar lustige Mini-Aufgaben für Zwischendurch:
Jetzt wird’s richtig kreativ: Die Spielfigur wird selbst gestaltet. Ich habe mit den Kindern verschiedene Prompts ausprobiert:
Prompt für KI-Bildgenerator:
"Erzeuge ein png Bild von einem 2D Manga-Mädchen mit rosa Rock und Zöpfen, stilisiert als Spielcharakter auf transparentem Hintergrund"
„Erzeuge noch zwei Varianten von dem Spielcharakter für Laufen und Springen“
Die Bilder (z. B. Charakter) werden über einen Prompt erstellt. Anschließend lädt man die Dateien auf Postimages.org hoch und erhält dynamische URLs, z.b. ("https://postimages.org/abc123.png")
Meine Ergebnisse mit ChatGPT:
Stehen: https://i.postimg.cc/yJLWnJjX/Chat-GPT-Image-1-Juli-2025-10-33-15.png
Laufen: https://i.postimg.cc/QB8HpgQd/Chat-GPT-Image-1-Juli-2025-10-35-25.png
Springen: https://i.postimg.cc/9r9RVQXC/Chat-GPT-Image-1-Juli-2025-10-37-30.png
Prompt für ChatGPT (URLs bitte selber anpassen):
„Ersetze in unserem Spiel die Figur durch das Bild https://i.postimg.cc/yJLWnJjX/Chat-GPT-Image-1-Juli-2025-10-33-15.png. Wenn die Figur läuft, dann soll diese URL genommen werden https://i.postimg.cc/QB8HpgQd/Chat-GPT-Image-1-Juli-2025-10-35-25.png. Wenn die Figur springt soll diese URL genommen werden https://i.postimg.cc/9r9RVQXC/Chat-GPT-Image-1-Juli-2025-10-37-30.png.“
Anschließend den Code wieder nach CodePen kopieren.
Tipp:
Einmal gab es bei uns ein Bild, auf dem das Mädchen plötzlich drei Beine hatte. Die Kinder fanden’s großartig („Superpower!“). Warum also nicht: „Was wäre, wenn…?“ zulassen und gemeinsam die verrücktesten Varianten testen?
Unser Spiel sah jetzt so aus:
Motivation pur: Jetzt verteilen wir Münzen auf den Plattformen.
Prompt für KI-Bildgenerator:
"Erzeuge ein png einer goldenen Spielmünze im Cartoonstil auf transparentem Hintergrund, glänzend und leicht dreidimensional"
Prompt für ChatGPT:
"Erweitere ein bestehendes Jump & Run Spiel in JavaScript, sodass der:die Spieler:in Münzen einsammeln kann. Die Münzen sollen verschwinden, wenn sie eingesammelt werden. Es soll eine Punkteanzeige geben. Als Bild soll die URL https://i.postimg.cc/dV9D2p7W/Chat-GPT-Image-1-Juli-2025-10-42-25.png benutzt werden."
Der erzeugte Code kann wieder nach CodePen kopiert werden. Falls nicht der komplette Code angezeigt wird, kannst Du entweder versuchen die Teile selber zu kopieren, oder mittels Prompt Dir den kompletten Code anzeigen lassen: „Zeige den kompletten Code an.“
Jetzt gibt’s ein Ziel: Wer alle Münzen einsammelt, hat gewonnen! Und ein Neustart-Knopf darf nicht fehlen.
Prompt für ChatGPT:
„Wenn alle Münzen eingesammelt sind, soll man gewonnen haben. Füge einen Button hinzu, um das Spiel neu zu starten. Zeige den kompletten Code.“
Damit es nicht zu einfach ist, haben wir Vögel als Gegner eingefügt – fliegen kreuz und quer und machen ordentlich Chaos.
Prompt für KI-Bildgenerator:
"Erzeuge ein png eines kleinen blauen Manga-Vogels, mit Flügeln ausgebreitet, seitliche Perspektive, transparenter Hintergrund"
Prompt für ChatGPT:
"Füge einem Jump & Run Spiel in JavaScript fliegende Gegner hinzu (z. B. Vögel), die sich zufällig bewegen. Wenn der:die Spieler:in sie berührt, endet das Spiel. Benutze für die Vögel die URL https://i.postimg.cc/Y0qjyxJ6/Chat-GPT-Image-1-Juli-2025-10-56-16.png."
Das Spiel sah bei uns so aus:
Was wir daraus gelernt haben:
Die Kinder haben schnell eigene Ideen für Gegner: „Kann der Vogel Pizza schießen?“ „Was, wenn plötzlich ein UFO auftaucht?“ Das nächste Mal vielleicht ein Bosskampf mit dem Klassenlehrer…
Jetzt gibt’s Power-Ups!
Schatzbild per Prompt generiert: https://i.postimg.cc/J4hWYhhC/Chat-GPT-Image-1-Juli-2025-11-05-35.png
Prompt für KI-Bildgenerator:
"Erzeuge ein png eines glänzenden Schatzes in einer Schatztruhe, cartoonartig, goldene Details, transparentem Hintergrund"
Prompt für ChatGPT:
"Erweitere ein Jump & Run Spiel in JavaScript: Wenn der:die Spieler:in ein Schatzobjekt einsammelt, soll sich seine Sprungkraft für 10 Sekunden erhöhen. Danach soll sie wieder normal sein."
Witzige Idee:
Wir haben eingestellt, dass die Figur für 10 Sekunden auch unsichtbar wird („Super-Schatz!“). Riesiger Spaß, bis wir alle nicht mehr wussten, wo sie eigentlich ist.
Noch mehr lustige Ideen für das Ferienprojekt
Dieses Ferienprojekt war für uns der perfekte Mix aus kreativem Prompten, Bilderspaß und echtem „Wow, ich hab was gebaut!“-Gefühl.
Die Kinder haben ganz nebenbei verstanden, wie Webseiten aufgebaut sind und wie man KI Tools nutzen kann. Und das Beste: Am Ende konnten sie das Spiel stolz der Oma präsentieren („Schau, ich hab das Mädchen selbst gemalt – mit dem Computer!“). Mittlerweile haben sie auch einige weitere Varianten gebaut und auch unterschiedliche Spiele: Fußball, Schiffe versenken gegen den Computer, …
Mein Tipp:
Einfach machen! Keine Angst vor Chaos. Zusammen Ideen spinnen, Prompts ausprobieren, Bilder hochladen – und direkt sehen, wie das alles im Spiel landet. Das motiviert, und zwar nicht nur die Kinder! Aus dem Screenshot vom Bild, kann man sich dann mit Veo auch gleich ein Video generieren lassen.
Viel Spaß beim Nachbauen!
Komplettes Beispielspiel:
https://codepen.io/Stahr/pen/QwbPomr
Die Freude am Experimentieren, die Kinder in diesem Projekt erleben, ist genau die Haltung, mit der wir auch bei iteratec an technologische Innovation herangehen: neugierig, kreativ und mit Mut, Neues auszuprobieren. Was das in echten Projekten bedeutet, lesen Sie in unseren Champion Stories.
Mehr zu den Möglichkeiten von KI für Ihr Unternehmen finden Sie auf unserer Webseite. Sprechen Sie uns auch gerne an.
