Zum Inhalt springen
Anfänger ⏱ Gesamt 45 Min. 🔨 Claude

Dein erstes Jump-and-Run-Spiel fürs Handy, mit Claude gebaut, ohne eine Zeile Code

Dein Ziel nach diesem Tutorial:

Du baust heute noch dein erstes Jump-and-Run und spielst es auf deinem Handy

Kurzfazit: Mit Claude baust du ein Jump-and-Run mit drei Level, Gegnern und Touch-Knöpfen, ohne selbst zu programmieren. Die Anleitung ist für Erwachsene ohne Vorkenntnisse gedacht, auch für Eltern, die mit ihren Kindern bauen. Nach 15 Minuten läuft das Spiel in der Vorschau neben dem Chat, mit Claude Free für 0 USD. Die ehrliche Grenze: Anthropic nennt keine feste Nachrichtenzahl, das Kontingent setzt sich in einem rollierenden Fünf-Stunden-Fenster zurück, und jedes Artifact zählt mit.

Ein Jump-and-Run verlangt mehr als Snake: Schwerkraft, Plattformen, Gegner, mehrere Level und auf dem Handy Knöpfe statt Pfeiltasten. Die 15 Minuten sind Stufe 1, die 45 Minuten die ganze Anleitung bis zum Spiel auf deinem Handy.


Was das kostet

BausteinPreisEhrliche Grenze
Claude Free0 USDKontingent mit rollierendem Fünf-Stunden-Fenster, keine feste Nachrichtenzahl, Artifacts zählen mit. Nutzung laut Nutzungsbedingungen erst ab 18 Jahren
Veröffentlichen per Link in Claude0 USDLaut Hilfe im Free-, Pro- und Max-Plan für Artifacts aus dem Chat der bisherigen Oberfläche. Besucher brauchen dafür kein Claude-Konto
itch.io, optional0 USDDie Nutzung kostet laut itch.io nichts. Bei HTML-Spielen sind Zahlungen nur als Spende möglich
Claude Pro, nicht nötig20 USD pro Monat, 17 USD pro Monat bei Jahreszahlung, jeweils ohne SteuernMehr Nutzung, dazu Wochenlimits. Auf der neuen Oberfläche brauchen Besucher geteilter Artifacts ein Claude-Konto

Quellen: claude.com/pricing, Anthropic-Hilfe zu Artifacts und zum Veröffentlichen und Teilen, Anthropics Nutzungsbedingungen, die itch.io-FAQ, die itch.io-Anleitungen für HTML-Spiele und die erste Seite sowie die itch.io-Qualitätsrichtlinien, alle abgerufen am 17. September 2026. Für dieses Tutorial zählt vor allem das Fünf-Stunden-Fenster: Ein Jump-and-Run ist eine lange Datei, und jede Überarbeitung kostet spürbar Kontingent. Deshalb arbeitet Stufe 2 mit wenigen, gezielten Prompts.


Stufe 1: Anfänger, dein Jump-and-Run in 15 Minuten

Was du brauchst

  • Ein kostenloses Konto auf claude.ai, laut Nutzungsbedingungen ab 18 Jahren. Baust du mit deinem Kind, bedienst du Claude, und dein Kind erfindet Figur und Level.
  • Einen Computer mit aktuellem Browser, denn die Vorschau neben dem Chat braucht Platz. Das Handy kommt erst in Stufe 3.

Schritt 1: Die Vorschau einschalten

Das Spiel erscheint als Artifact, also als eigenes Fenster rechts neben dem Chat. Dafür braucht es laut Hilfe eine Einstellung. Klick unten links auf deinen Namen oder deine Initialen. Je nach Sprache der Oberfläche gehst du dann auf Settings > Capabilities oder Einstellungen > Funktionen und schaltest Code execution and file creation beziehungsweise Code-Ausführung und Dateierstellung ein.

Schritt 2: Den Starter-Prompt senden

Starte einen neuen Chat. Zeigt dein Nachrichtenfeld die Optionen Chat und Cowork, wähl Chat: Nur solche Artifacts kannst du in Stufe 3 so veröffentlichen, dass Mitspieler kein Claude-Konto brauchen. Dann kopierst du den Prompt hinein. Die Stellen in eckigen Klammern darfst du ändern.

Starter-Prompt: Jump-and-Run mit drei Level und Touch-Knöpfen
Baue mir ein Jump-and-Run-Spiel als eine einzige HTML-Datei und zeig es als Artifact, damit ich es direkt neben dem Chat spielen kann. Technik: - HTML, CSS und JavaScript in einer Datei, gezeichnet auf einem canvas-Element - Keine externen Bibliotheken, keine Schriften oder Bilder von fremden Servern, kein localStorage - Eine feste Spielwelt von 960 mal 540 Pixeln, die sich unverzerrt an jede Fenstergröße anpasst Spiel: - Titel: [Fuchs rennt] - Spielfigur: [ein kleiner orangefarbener Fuchs], aus einfachen Formen gezeichnet - Laufen nach links und rechts, Springen mit Schwerkraft, Plattformen, auf denen die Figur landet - 3 Level, jedes länger und schwerer als das vorige, die Kamera scrollt seitlich mit - In jedem Level: [Münzen] zum Sammeln, Gegner, die hin und her laufen, Abgründe und eine Zielflagge am Ende - Springt die Figur von oben auf einen Gegner, verschwindet er. Berührt sie ihn seitlich oder fällt sie in einen Abgrund, verliert sie ein Leben und startet am Levelanfang - 3 Leben und oben eine Leiste mit Level, [Münzen] und Leben - Startbildschirm, Game-Over-Bildschirm und Sieg-Bildschirm, jeweils mit einem Knopf zum Starten - Stil: [helle Farben, blauer Himmel, grüne Wiese] Steuerung: - Tastatur: Pfeiltasten links und rechts, Leertaste oder Pfeil nach oben zum Springen. Diese Tasten dürfen die Seite nicht scrollen - Touch: drei große, halbtransparente Knöpfe am unteren Rand für links, rechts und springen, die sich gleichzeitig drücken lassen Gib mir nur die fertige Datei, keine Erklärungen.
Funktioniert mit Claude

Der Prompt ist absichtlich genau: Was du nicht festlegst, entscheidet Claude selbst. Ohne fremde Server und Browserspeicher braucht die Datei nur einen Browser, deshalb kannst du sie später herunterladen und auf itch.io hochladen.

Schritt 3: Spielen

Claude schreibt jetzt eine lange Datei. Danach öffnet sich das Spiel im Fenster rechts. Klick einmal ins Spielfeld, damit die Vorschau deine Tastendrücke bekommt, dann auf den Start-Knopf.

So sieht ein gutes Ergebnis aus: ein Startbildschirm mit deinem Titel, danach deine Figur auf einer Wiese, oben eine Leiste mit Level, Münzen und Leben. Die drei Touch-Knöpfe unten siehst du auch am Rechner, sie sind für später auf dem Handy. Pfeiltasten bewegen die Figur, die Leertaste lässt sie springen.

Das ist dein erstes Ergebnis: ein spielbares Jump-and-Run aus einem einzigen Prompt.

Unten rechts im Artifact-Fenster kannst du laut Hilfe den Code ansehen, kopieren und die Datei herunterladen. Lade sie als Backup herunter, zum Beispiel als jump-and-run-v1.html.

Wenn rechts kein Fenster erscheint: Prüf die Einstellung aus Schritt 1 und schreib dann: “Zeig mir das Spiel als Artifact, damit ich es direkt spielen kann.” Zeigt die Vorschau eine Fehlermeldung, klick auf die Schaltfläche daneben: Try fixing with Claude, in der deutschen Hilfe Mit Claude beheben. Das kopiert den Fehler in eine neue Nachricht, die du nur noch sendest.


Stufe 2: Fortgeschritten, Level schaffbar machen und Sprünge verbessern

Spiel jedes Level einmal durch und notier genau, was passiert: “In Level 2 kommt die Figur nicht auf die zweite Plattform” hilft Claude, “Level 2 geht nicht” hilft kaum.

Die drei Fehler, die dir garantiert begegnen

  • Ein Level ist nicht zu schaffen. Symptom: Eine Plattform liegt höher, als die Figur springen kann, oder ein Abgrund ist zu breit. Ursache: Die Level-Daten stehen fest, ohne dass jemand Sprunghöhe und Sprungweite nachgerechnet hat. Lösung: der Korrektur-Prompt direkt unter dieser Liste.
  • Die Pfeiltasten tun nichts. Symptom: Die Figur bleibt stehen, oder die Chat-Seite scrollt beim Drücken der Leertaste. Ursache: Die Vorschau hat keinen Fokus, deine Tastendrücke landen im Chat. Lösung: einmal ins Spielfeld klicken. Hilft das nicht, schreib Claude: “Pfeiltasten und Leertaste scrollen die Seite, verhindere das im Spiel.”
  • Kleben an Kanten, Fallen durch den Boden. Symptom: Die Figur hängt seitlich an einer Plattform fest oder sackt bei einem langen Fall durch. Ursache: Die Kollisionsprüfung behandelt beide Richtungen auf einmal. Lösung: “Prüfe die Kollision getrennt, erst waagerecht, dann senkrecht, und begrenze die Fallgeschwindigkeit.”
Korrektur-Prompt: alle Level schaffbar machen
Im Spiel ist Folgendes kaputt: [In Level 2 liegt die zweite Plattform zu hoch, die Figur kommt nicht hinauf.] Behebe das so: - Berechne aus Sprunggeschwindigkeit und Schwerkraft die maximale Sprunghöhe und Sprungweite der Figur in Pixeln und schreib beide Werte als Kommentar in den Code. - Prüfe alle 3 Level: Jede Plattform und jede Münze muss mit höchstens 80 Prozent dieser Werte erreichbar sein, jeder Abgrund mit höchstens 80 Prozent der Sprungweite überspringbar. Passe die Level-Daten an, wo das nicht gilt. - Ändere nichts an Grafik, Steuerung und Bildschirmen. Gib mir die komplette aktualisierte Datei als Artifact zurück, keine Erklärungen.
Funktioniert mit Claude

Die 80 Prozent sind Absicht. Ein Sprung, der nur mit perfektem Timing klappt, fühlt sich für Mitspieler wie ein Fehler an.

Sprünge, die sich gut anfühlen

Danach kommt das Spielgefühl, mit zwei Tricks aus dem Genre: Die Sprunghöhe hängt davon ab, wie lange du drückst, und die Figur darf kurz nach dem Verlassen einer Kante noch abspringen. Spieleentwickler nennen Letzteres Coyote Time.

Verbesserungs-Prompt: Sprunggefühl
Das Spiel läuft. Verbessere jetzt nur das Sprunggefühl, in zwei Punkten: 1. Hältst du die Sprungtaste länger, springt die Figur höher. Lässt du früh los, bleibt der Sprung flach. 2. Die Figur darf noch 0,1 Sekunden nach dem Verlassen einer Kante springen. Behalte alles andere bei und prüfe danach, ob alle Level weiter schaffbar sind. Gib mir die komplette aktualisierte Datei als Artifact zurück, keine Erklärungen.
Funktioniert mit Claude

Die Regel für diese Stufe: eine Baustelle pro Prompt. Fahrende Plattformen oder neue Gegner bekommt dein Spiel danach, jeweils in einem eigenen Prompt. Macht ein Update etwas kaputt, bearbeitest du laut Hilfe deine letzte Nachricht und formulierst den Wunsch neu.


Stufe 3: Experte, aufs Handy bringen und teilen

Die Touch-Steuerung fertig machen

Handy-Prompt: Touch, Querformat und Vollbild
Mach das Spiel fit fürs Handy: - Die drei Touch-Knöpfe sollen sich gleichzeitig drücken lassen, also laufen und springen zusammen. Nutze dafür Pointer Events und touch-action: none. - Zeige die Touch-Knöpfe nur auf Geräten mit Touchscreen, am Rechner nicht. - Hält man das Handy hochkant, zeige über dem Spiel den Hinweis [Dreh dein Handy quer]. Im Querformat verschwindet er. - Kein Zoomen per Doppeltipp, kein Scrollen und kein Markieren von Text beim Spielen. - Ein Knopf [Vollbild] oben rechts startet den Vollbildmodus, sofern der Browser das erlaubt. Ändere sonst nichts. Gib mir die komplette aktualisierte Datei als Artifact zurück, keine Erklärungen.
Funktioniert mit Claude

Das Querformat zählt: Eine Spielwelt von 960 mal 540 Pixeln füllt hochkant nur einen schmalen Streifen, quer fast den ganzen Bildschirm.

Weg 1: Veröffentlichen in Claude

  1. Öffne am Rechner das Artifact und stell sicher, dass die richtige Version angezeigt wird.
  2. Klick auf Publish, in der deutschen Hilfe Veröffentlichen.
  3. Kopier den öffentlichen Link und schick ihn dir selbst, zum Beispiel per Messenger.
  4. Öffne den Link auf dem Handy und dreh es quer. Füllt das Spiel dort zu wenig vom Bildschirm, nimm Weg 2 mit Vollbild.

Laut Anthropic-Hilfe können alle mit dem Link ein veröffentlichtes Chat-Artifact ohne Anmeldung ansehen und bedienen. In der Claude-App für iOS und Android lässt sich die Freigabe laut Hilfe nicht ändern. Zwei Haken: Nimmst du die Veröffentlichung zurück (Unpublish, in der deutschen Hilfe Veröffentlichung rückgängig machen), lässt sich dieses Artifact nicht erneut veröffentlichen. Und die neue Claude-Oberfläche verteilt Anthropic laut Hilfe schrittweise, beginnend mit Pro und Max. Siehst du nur Share oder Teilen statt Publish oder Veröffentlichen, brauchen Besucher ein Claude-Konto, dann nimm Weg 2.

Auf den Home-Bildschirm legen: Auf dem iPhone tippst du in Safari auf Mehr und dann auf Teilen. Ist dein Tablayout Unten oder Oben, tippst du direkt auf Teilen. Dann scrollst du zu Zu Home-Bildschirm hinzufügen und tippst auf Hinzufügen (Apple-Anleitung). Auf Android tippst du in Chrome auf das Dreipunkt-Menü, dann auf Installieren und Verknüpfung erstellen, Verknüpfung erstellen und Hinzufügen (Chrome-Hilfe).

Weg 2: itch.io, im Vollbild auf dem Handy

Die Spieleplattform itch.io nimmt laut Dokumentation auch eine einzelne, in sich geschlossene HTML-Datei ohne ZIP.

  1. Lade im Artifact-Fenster unten rechts die aktuelle Version herunter.
  2. Leg ein kostenloses Konto auf itch.io an und klick laut itch.io-Anleitung für die erste Seite auf Create new game.
  3. Wähl als Projektart laut itch.io-Anleitung HTML Game und lade deine Datei hoch. Laut Anleitung erscheinen danach die Embed options. Fehlen sie, markier die Datei als im Browser spielbar. Wie diese Option heißt, nennt die itch.io-Dokumentation nach unserem Stand vom 17. September 2026 nicht.
  4. Aktivier unter Embed options die Option Mobile Friendly, sonst warnt itch.io Handynutzer, dass das Spiel womöglich nicht läuft. Auf dem Handy startet itch.io HTML-Spiele laut Dokumentation im Vollbild.
  5. Gib im Abschnitt AI Disclosure an, dass dein Spiel mit generativer KI entstanden ist, und schreib das auch in die Beschreibung. Das verlangen die itch.io-Qualitätsrichtlinien. Projekte, die fast ohne menschliches Zutun von KI erstellt wurden, kann itch.io aus Stöbern und Suche nehmen. Beschreib deshalb auch, was du selbst an Figur und Leveln entworfen hast.
  6. Klick auf Save & view page. Neue Seiten sind zunächst privat. Öffentlich wird dein Spiel erst, wenn du die Sichtbarkeit auf Public stellst.

Datenschutz und Rechte, ohne Rechtsberatung

Dein Spiel selbst sollte nichts speichern, denn der Starter-Prompt schließt localStorage und fremde Server aus. Wer es aufruft, landet aber bei Anthropic oder itch.io, dort gelten deren Datenschutzregeln (Anthropic, itch.io). Laut Nutzungsbedingungen überträgt Anthropic dir seine Rechte an den Ergebnissen, soweit solche bestehen. Rechte Dritter bleiben davon unberührt: keine bekannten Spielfiguren, keine fremden Markennamen.


Häufige Fragen zu Handyspielen mit Claude

Kann Claude Spiele programmieren?

Ja. Für ein 2D-Spiel wie dieses schreibt Claude HTML, CSS und JavaScript in eine Datei, die im Browser läuft. Aufwendige 3D-Spiele mit vielen Dateien passen nicht in diesen Weg.

Kann ich mit KI ein Handyspiel erstellen, ohne programmieren zu können?

Ja, als Browserspiel mit Touch-Knöpfen. Du beschreibst, testest und meldest Fehler in normaler Sprache, den Code schreibt Claude.

Reicht der kostenlose Claude-Plan für ein eigenes Spiel?

Ja. Claude Free kostet 0 USD und enthält laut Preisseite Artifacts. Das Kontingent setzt sich in einem rollierenden Fünf-Stunden-Fenster zurück. Bremst es dich, wartest du oder buchst Pro für 20 USD im Monat zuzüglich Steuern.

Kann ich das Spiel in den App Store oder bei Google Play veröffentlichen?

Nein, nicht mit dieser Anleitung. Dein Spiel ist eine HTML-Datei, kein App-Paket. Dafür bräuchtest du eine App-Hülle und Entwicklerkonten bei Apple oder Google.

Ab welchem Alter darf man Claude nutzen?

Ab 18 Jahren, so steht es in Anthropics Nutzungsbedingungen. Mit Kindern baust du deshalb gemeinsam: Du bedienst Claude, dein Kind entwirft Figur und Level und testet jede neue Version.

Claude oder Gemini: womit erstelle ich ein Spiel mit KI?

Für diese Anleitung Claude, weil Anthropic Vorschau und öffentlichen Link im Free-Plan dokumentiert. Gemini bietet mit Canvas eine ähnliche Vorschau, laut Google-Hilfe nach Anmeldung und mit anderen Schritten.


Dein nächster Schritt

Der erste Prompt liefert ein spielbares Spiel, gut wird es in einer Schleife: spielen, genau beschreiben, was passiert, eine Sache ändern. Bei Spielen kommt eine Regel dazu: Lass Claude Maße nachrechnen, statt Plattformen nach Gefühl zu verschieben. Das hilft bei jedem Projekt, in dem Zahlen zusammenpassen müssen.

Dein erstes Jump-and-Run ist 15 Minuten entfernt. Öffne claude.ai, kopiere den Starter-Prompt aus Stufe 1 und spiel los.


Wie gut kennst du den Weg zum eigenen Jump-and-Run?

10 Fragen, von der Vorschau-Einstellung über schaffbare Level bis zum Spiel auf dem Handy. Wer mindestens 8 richtig beantwortet, bekommt ein Zertifikat zum Teilen.

Jump-and-Run-Quiz
1 / 10

Welche Einstellung muss laut Anthropic-Hilfe eingeschaltet sein, damit dein Spiel als Artifact neben dem Chat erscheint?

Für Unternehmen

Du willst das für dein Team?

Alleine brauchst du dafür 45 Minuten. Mit deinem Team wird daraus ein Training: dieselben Werkzeuge, aber eure Aufgaben, eure Daten, eure Fragen. Im kostenlosen Erstgespräch, 30 Minuten, sagen wir dir ehrlich, ob Beratung, ein Training oder ein Projekt der nächste sinnvolle Schritt ist. Oder ob gerade keiner nötig ist.

KI-Training anfragen

Kostenlos, jeden Freitag

KI-Wochenbriefing: jeden Freitag KI-News, Praxistipps und Tools

Kostenlos abonnieren, jederzeit abmeldbar, kein Spam.

Tutorial teilen: