Vibe Coding is real!

5. Mai 2026

Allgemein, Computerspielakademie, KI, Spiele, Talk, Workshop

Im Rahmen unserer Reihe SHIFT IS REAL beschäftigen wir uns am 11.6. mit dem Thema Play Create Talk. Games in der Jugendbildung.

In diesem Zusammenhang haben wir gerade mit Claude Code versucht ein kleines Spiel zu „vibe coden„.

Vibe Coding bezeichnet das Programmieren mit KI-Unterstützung, bei dem man eher Ideen, Ziele und gewünschte Wirkung beschreibt, statt jeden Code-Schritt selbst zu schreiben.

Gleiches haben wir am 11.6.2026 vor. Meldet euch an und kommt 14:00 im Medienzentrum München vorbei.

Wie wir vorgegangen sind

Nach einem Brainstorming mit Claude haben wir uns gegen ausgefuchstere Spielkonzepte wie

Fake News Detector
Image Manipulation Spotting Game
Algorithm Simulator

entschieden und Claude Code gebeten die Space Invaders Variante „Media Literacy Invaders“ zu erstellen.

Claude Code erstellte einen Plan. Wir ergänzten die Bitte um Fullscreen.

Das Ergebnis nach rund 30 Minuten ist eine einfache HTML-Seite:

Media Literacy Invaders spielen

Prompts

Um einen Einblick in den Entwicklungsprozess hier die Prompts an Claude Code (wir haben keine Zeile Code selbst programmiert):

1. Initialer Prompt, einen Plan zu erstellen.

Build a Space Invaders-style browser game called "Media Literacy Invaders" as a single HTML file (no build tools, no dependencies).

Theme: The player defends against waves of falling media threats — fake news, clickbait, filter bubbles, deepfakes — using a "fact-check cannon".

Requirements:
- Single index.html file with inline CSS and JavaScript
- Canvas-based rendering
- Player cannon moves left/right with arrow keys, shoots with spacebar
- Enemies arranged in a classic Space Invaders grid, slowly moving and descending
- Each enemy type has a label (e.g. "Fake News", "Clickbait", "Deepfake", "Filter Bubble")
- Score display, lives system, game over screen
- Visual style: clean, slightly retro, dark background with glowing elements
- Subtle Bavarian/Munich flavor in the UI text (e.g. game title screen, score labels)
- Start screen mentioning JFF – Institut für Medienpädagogik

Keep the code clean and well-commented so it's easy to extend live during a presentation.

2. Ergänze einen Vollbildmodus und akzeptiere den Plan

Good. But add a fullscreen mode.

3. Ergänzen von Sound und Fehlerkorrektur in nicht ganz korrektem Englisch.

Good, add sound. And not all fields fit onto them. correct this.

Neben dem Vibe Coding freuen uns darauf, mit euch am 11.6.

KI und Games (mit dem ChatGameLab)
Demokratie und Games
Kooperative Spiele
Jugendschutz und Roblox

in praktischen Stationen auszuprobieren.

Computerspiel Jugendliche KI