Cursor Praxisprojekt-11-Spiel (1), das "Hello World" der KI-Spiele

Projektbeschreibung

Cursor-Spieleprogrammierung (1), das "Hello World" der KI-Spiele - Snake

Zeitaufwand: ca. 0,5 Stunden

Cursor-Nutzung: etwa 1 Mal

Mit diesem Projekt beginne ich eine Reihe von Spielen mit Cursor zu entwickeln. Den Anfang macht das klassische "Snake"-Spiel. Die KI-Programmierung hat das einstige "Hello World" mittlerweile auf "Erstelle mir ein Snake-Spiel!" gehoben.

Mein Plan ist es, kontinuierlich verschiedene Spieltypen zu entwickeln und dabei die Möglichkeiten von Cursor in der Spieleprogrammierung zu erkunden.

Ergebnispräsentation

  • Snake-Spiel

Vorbereitung

  • Cursor

    • Version: 1.2.4
    • Cursor-Regeln: Cursor Rules
    • Agent: claude-4-sonnet

  • Gesamtprozess

    • Cursor-Regeln festlegen -> Anforderungen mit LLM abstimmen -> Codierung mit Cursor -> Debugging und Ausgabe

Problemprotokoll

  1. Das Spiel funktionierte auf Anhieb ohne Probleme.
  2. Bei der Integration in den MD-Artikel traten einige Schwierigkeiten auf
    • Zugriffsberechtigungen für statische Ressourcen mussten angepasst werden
    • MD-Dateiparser musste iframe-Unterstützung erhalten

Nutzungserfahrungen

  • Die Leistungsfähigkeit übertraf meine Erwartungen - mit einer einzigen Anweisung wurde ein voll funktionsfähiges Spiel erstellt, auch wenn die Oberfläche noch verbesserungswürdig ist (wahrscheinlich wegen unzureichender Prompt-Formulierung)

Detaillierte Projektschritte

  1. Anforderungseingabe
Erstelle ein Snake-Spiel, das möglichst unterhaltsam, spaßig und mit ansprechender, harmonischer Oberfläche gestaltet ist.
Snake-Anforderungen 2. **Codierung**: Codeerstellung und Ergebnisausgabe Snake-Programmierung Snake-Programmierung
  1. Verifizierungstest: Direkte Ausführung von index.html zum Testspiel
Verifizierungstest
  1. Website-Integration: Einbindung in den Ergebnisabschnitt dieses Artikels
    • Kopieren der css- und js-Verzeichnisse sowie der index.html-Datei in das Verzeichnis public/game/snake/ dieser Website
    • Anpassung des MD-Dateiparsers für iframe-Unterstützung
    • Eingabe folgender Anweisung in der MD-Datei:
<iframe 
  src="/games/snake/index.html"
  width="800"
  height="800"
  frameBorder="0"
  className="block mx-auto"
  title="Snake-Spiel"
>
  Ihr Browser unterstützt keine iframes, bitte
  <a href="/games/snake/index.html" target="_blank" rel="noopener noreferrer">
    klicken Sie hier
  </a>
  , um das Spiel in einem neuen Fenster zu öffnen.
</iframe>
  1. Abschluss: Bereit für die Highscore-Herausforderung?