Mit Claude dein erstes Browser-Spiel bauen.

Du lässt ein kleines Snake-Spiel programmieren, öffnest es im Browser und verbesserst es mit konkreten Rückmeldungen.

Drei Lernstufen · in deinem Tempo · Stand: 10. Oktober 2026

Das kannst du danach

Du erhältst ein spielbares Snake in einer HTML-Datei, behebst einen Fehler und ergänzt eine bewusst gewählte Erweiterung.

Das übernimmt die KI

Claude übersetzt deine Spielbeschreibung in Code. Der Browser führt diesen Code aus; für das Spielen selbst ist kein KI-Chat nötig.

Dein Werkzeug: Claude

Ein Claude-Konto, ein Browser und ein Texteditor für reine Textdateien. Alternativ kannst du zunächst die Artifact-Vorschau nutzen.

Werkzeug öffnen (neuer Tab) Offizielle Hilfe (neuer Tab)

Funktionen, Kontingente und Preise können sich ändern. Prüfe den Zugang direkt beim Anbieter.

Code erzeugen, dann Spiel testen, dann Funktion ergänzen — Dein praktischer Lernweg. Eigene, KI-unterstützt erstellte Grafik.

Die Aufträge führst du im genannten Werkzeug aus. Die Klickübungen hier zeigen vorbereitete Beispiele und senden keine Daten an einen KI-Dienst.

KI-Funken

Dein erstes Ergebnis mit dem Werkzeug

Erzeuge und starte dein Spiel

Eine einzige Datei hält den Einstieg übersichtlich. Du bestimmst die Regeln, Claude kümmert sich um die erste Umsetzung.

Sende den Auftrag im Chat.
Lade die vollständige HTML-Datei herunter oder speichere den Code als snake.html in UTF-8. Achte darauf, dass die Datei nicht auf .txt endet.
Öffne sie im Browser. Teste Bewegung, Apfel, Wandkollision und Neustart.

Dein erster Auftrag

Baue Snake als einzelne HTML-Datei mit CSS und JavaScript. Pfeiltasten steuern, Äpfel geben einen Punkt und verlängern die Schlange. Wand- oder Selbstkollision beendet die Runde. Zeige Punktestand, Start und Neustart. Kein externer Code und keine Bilder. Stoppe Seitenscrollen durch Pfeiltasten nur während des Spiels.

Darauf arbeitest du hin: Ein spielbares Browsergame mit sichtbarem Punktestand und nachvollziehbaren Regeln.

Was öffnest du zum Spielen?

Weiter zur KI-Werkstatt

KI-Werkstatt

Gezielt verbessern und weiterarbeiten

Beschreibe einen Fehler reproduzierbar

Du musst den Code noch nicht verstehen, um hilfreiches Feedback zu geben. Beobachtung und Erwartung reichen für den nächsten Versuch.

Wiederhole den Fehler und notiere die genaue Abfolge.
Füge bei Bedarf die Fehlermeldung aus der Browserkonsole bei.
Lass nur diesen Fehler korrigieren, speichere eine neue Fassung und teste erneut.

Dein Folgeauftrag

Fehler im Spiel: Nach „Neustart“ bewegt sich die Schlange deutlich schneller als vorher. Erwartet: Jeder Neustart beginnt mit derselben Geschwindigkeit. Prüfe, ob mehrere Timer laufen. Korrigiere nur diesen Fehler und liefere die vollständige aktualisierte Datei.

Darauf arbeitest du hin: Eine neue Fassung, deren Neustart du direkt gegen die alte Version testen kannst.

Was verändert die gezielte Korrektur?

Nach jedem Neustart wird das Spiel schneller, weil mehrere Timer aktiv sind.

Vorbereiteter Vergleich, keine Live-Ausgabe des Werkzeugs.

Weiter zur KI-Regie

KI-Regie

Den Ablauf erweitern und selbst nutzen

Erweitere und teile eine stabile Fassung

Wähle eine Erweiterung, die das Spielen wirklich verbessert. Eine Pausefunktion ist gut prüfbar.

Sichere die funktionierende Datei.
Lass Pause und Fortsetzen ergänzen und prüfe, dass Punkte und Position dabei erhalten bleiben.
Teste die Datei in einem zweiten Browser. Teile zunächst die Datei oder bereite bewusst eine Veröffentlichung vor.

Dein nächster Einsatz

Ergänze eine Pause-Schaltfläche. Während der Pause bewegen sich Schlange und Punkte nicht. Fortsetzen startet genau einen Spieltimer. Ein Neustart beendet die Pause und setzt die Runde zurück. Behalte alle anderen Regeln.

Darauf arbeitest du hin: Ein gesichertes Spiel mit funktionierender Pause und klaren Startbedingungen.

Was gehört in eine gute Fehlermeldung?

Was ist hängen geblieben?

Was prüfst du nach einer Pausefunktion?

Dein eigener Versuch

Wende den Ablauf jetzt auf eine kleine eigene Aufgabe an. Prüfe das tatsächliche Ergebnis im Werkzeug anhand der Kriterien dieser Anleitung. Die vier Klickübungen bestätigen deinen Lernstand auf dieser Seite, nicht die erfolgreiche Ausführung im externen Dienst.

Weitere Übungen zum Thema programmieren