Spielentwicklung mit HTML, CSS & JavaScript

lock
Bevorstehend

Entwickle dein erstes Browser-Spiel mit Unterstützung einer LLM – von der Idee bis zur Präsentation.

Ziele dieses Moduls
  • Sie können ein funktionierendes Browser-Spiel mit nur einer HTML-, einer CSS- und einer JavaScript-Datei entwickeln.
    Kreieren
  • Sie können LLMs gezielt als Werkzeug zur Code-Generierung und Problemlösung einsetzen und die Ergebnisse kritisch prĂĽfen.
    Anwenden
  • Sie können einen Ausschnitt ihres JavaScript-Codes erklären und Parallelen zu Python-Konzepten (Variablen, Funktionen, Bedingungen) erkennen.
    Analysieren
label
Informatik

In diesem Projekt entwickeln Sie Ihr erstes spielbares Browser-Spiel. Sie nutzen dabei Ihr Wissen aus HTML und CSS und lassen sich den JavaScript-Teil von einer KI (LLM) generieren. Am Ende präsentieren Sie Ihr Spiel und erklären einen kurzen Code-Ausschnitt.

Challenge

Auftrag: Entwickle dein eigenes Browser-Spiel

Sie haben in den letzten Lektionen HTML, CSS (inklusive Flexbox und CSS Grid) und grundlegende Webseiten-Gestaltung kennengelernt. Jetzt ist es an der Zeit, all dieses Wissen in einem praktischen Projekt zusammenzuführen – und dabei einen ersten Kontakt mit JavaScript zu machen.

Ihre Aufgabe: Entwickeln Sie ein spielbares Browser-Spiel, das aus genau drei Dateien besteht:

  • index.html – die Struktur Ihres Spiels
  • style.css – das Aussehen und Layout (Flexbox/Grid erwĂĽnscht!)
  • script.js – die Spiellogik und Interaktion

Das Spiel muss ohne zusätzliche Installationen direkt im Browser funktionieren – einfach die index.html in VS Code öffnen und starten.

Mögliche Spielideen

  • Memory-Spiel (Karten umdrehen und Paare finden)
  • Tic-Tac-Toe (fĂĽr zwei Spieler)
  • Quiz-Spiel mit Multiple-Choice-Fragen
  • Snake (Klassiker!)
  • Reaktionsspiel (Klick so schnell wie möglich auf aufblinkende Elemente)
  • Hangman / Galgenmännchen
  • Ein eigenes Labyrinth-Adventure
  • Oder eine völlig eigene Idee!

Vorgehen: So arbeiten Sie mit der LLM

Dieses Projekt ist speziell: Sie dürfen und sollen eine LLM (wie ChatGPT, Claude, Gemini etc.) als Programmier-Hilfe verwenden. Die LLM generiert den Code für Sie – aber Sie müssen verstehen, was passiert, und das Spiel zum Laufen bringen.

So geht es Schritt fĂĽr Schritt

  1. Idee wählen: Entscheiden Sie sich für ein Spiel aus der Liste oder schlagen Sie ein eigenes vor.
  2. Prompt starten: Verwenden Sie den Anfangsprompt unten und passen Sie ihn an Ihre Spielidee an.
  3. Code ĂĽbernehmen: Kopieren Sie den generierten Code in die drei Dateien in VS Code.
  4. Testen: Ă–ffnen Sie die index.html im Browser und testen Sie das Spiel.
  5. Anpassen: Wenn etwas nicht funktioniert, beschreiben Sie der LLM das Problem und lassen Sie sich helfen.
  6. Verbessern: Passen Sie Farben, Layout und Funktionen an – machen Sie es zu Ihrem Spiel.
  7. Verstehen: Wählen Sie einen Teil des JavaScript-Codes aus, den Sie erklären können.
Kopieren Sie diesen Prompt und passen Sie ihn an Ihre Spielidee an.
Geben Sie ihn in ChatGPT, Claude oder eine andere LLM ein:

--- ANFANG PROMPT ---

Ich bin ein SchĂĽler/eine SchĂĽlerin und habe HTML, CSS (inklusive Flexbox und CSS Grid) gelernt.
Ich habe auch grundlegende Python-Kenntnisse (Variablen, if/else, Schleifen, Funktionen, Listen).
Jetzt möchte ich mein erstes Spiel mit HTML, CSS und JavaScript erstellen.

Bitte erstelle mir ein [HIER SPIEL EINTRAGEN, z.B. Memory-Spiel / Tic-Tac-Toe / Snake],
bestehend aus genau drei Dateien:

1. index.html – die HTML-Struktur
2. style.css – das CSS mit Flexbox oder CSS Grid für das Layout
3. script.js – die JavaScript-Spiellogik

Wichtige Anforderungen:
- Das Spiel muss ohne npm, ohne node, ohne externe Libraries funktionieren
- Einfach die index.html in VS Code öffnen und im Browser starten
- Verwende moderne CSS-Layouts (Flexbox oder Grid)
- Das Spiel soll vollständig spielbar sein (Start, Spiel, Ende/Gewinn/Verlust)
- Der JavaScript-Code soll einfach und verständlich sein
- Bitte kommentiere den JavaScript-Code auf Deutsch, damit ich ihn verstehe
- Verwende einfache JavaScript-Konzepte, die ich als Python-Kenner nachvollziehen kann

Bitte gib mir den kompletten Code fĂĽr alle drei Dateien.
Erkläre danach kurz, wie die JavaScript-Grundstruktur funktioniert und welche
Python-Konzepte darin wiederzufinden sind.

--- ENDE PROMPT ---

Checklist

0/7

Note

Anforderungen & Rahmenbedingungen

Technische Vorgaben

  • Genau 3 Dateien: index.html, style.css, script.js
  • Keine externen Libraries oder Frameworks (kein jQuery, React, etc.)
  • Muss direkt im Browser funktionieren (VS Code Live Server oder Doppelklick auf HTML)
  • CSS nutzt Flexbox oder CSS Grid fĂĽr das Layout
  • JavaScript-Code ist auf Deutsch kommentiert

Das Spiel muss...

  • eine Startseite oder einen Start-Button haben
  • klar zeigen, wer gewonnen hat oder ob das Spiel vorbei ist
  • eine Möglichkeit bieten, nochmals zu spielen
  • optisch ansprechend sein (Farben, Abstände, Layout)

Warning

Häufige Fehler & Tipps

  • "Nichts passiert beim Klicken": ĂśberprĂĽfen Sie, ob die script.js korrekt in der HTML eingebunden ist (<script src="script.js"></script>) – am besten als letztes Element vor dem schliessenden </body>-Tag.
  • "CSS wird nicht geladen": PrĂĽfen Sie den Pfad im <link>-Tag. Die CSS-Datei muss im selben Ordner liegen wie die HTML-Datei.
  • "Das Spiel sieht komisch aus": Lassen Sie die LLM das CSS verbessern. Beschreiben Sie genau, was nicht stimmt (z.B. "die Karten sind nicht mittig" oder "der Abstand ist zu gross").
  • "Ich verstehe den JavaScript-Code nicht": Das ist normal! Fragen Sie die LLM: "Erkläre mir Zeile 10-20 in einfachen Worten. Was macht dieser Teil?"
  • "Die LLM gibt mir zu komplizierten Code": Sagen Sie der LLM: "Bitte vereinfache den Code. Verwende nur Grundlagen wie Variablen, if/else und Funktionen. Keine fortgeschrittenen Konzepte."

Präsentation

Am Ende des Projekts präsentieren Sie Ihr Spiel der Klasse. Die Präsentation ist kurz (ca. 2-3 Minuten) und besteht aus zwei Teilen:

Teil 1: Spiel zeigen (1-2 Min.)

  • Starten Sie Ihr Spiel im Browser
  • Zeigen Sie kurz, wie es funktioniert
  • Was macht Ihr Spiel besonders?

Teil 2: Code erklären (1 Min.)

  • Wählen Sie einen kurzen Ausschnitt aus Ihrer script.js
  • Erklären Sie, was dieser Code macht
  • Zeigen Sie eine Parallele zu Python (z.B. "Das ist wie eine if-Abfrage in Python, nur mit anderen Klammern")

Tipps für die Code-Erklärung

Wählen Sie einen einfachen Teil, z.B.:

  • Eine Funktion, die beim Klicken auf einen Button aufgerufen wird
  • Eine if/else-Verzweigung, die prĂĽft, ob jemand gewonnen hat
  • Eine Variable, die den Punktestand speichert

Reflection

Reflexion

Nach der Präsentation nehmen Sie sich kurz Zeit, über das Projekt nachzudenken:

  • Was war das Schwierigste an diesem Projekt? Wie haben Sie es gelöst?
  • Wie hat Ihnen die Zusammenarbeit mit der LLM geholfen? Wo waren die Grenzen?
  • Was haben Sie ĂĽber JavaScript gelernt, das Sie von Python schon kannten? Was war neu?
  • Wenn Sie noch mehr Zeit hätten – was wĂĽrden Sie an Ihrem Spiel verbessern?