Du brauchst nur Visual Studio Code und eine Stunde Zeit, um dein erstes Spiel zu programmieren. Lerne, wie du mit HTML für die Struktur, CSS für das Design und JavaScript für die Logik ein funktionierendes Browser-Spiel baust – komplett von Anfang an erklärt.
Was du für dieses Tutorial brauchst
Visual Studio Code – das war’s. Die Entwicklungsumgebung lädst du kostenlos von der offiziellen Seite herunter, installierst sie und legst einen neuen Ordner für dein Projekt an. Darin erstellst du eine Datei namens index.html. So heißt konventionell die Startdatei jeder Webanwendung.
Das Spiel heißt “Fang den Frosch”. Auf einem 3x3-Spielfeld erscheinen zufällig Frösche. Du hast 30 Sekunden Zeit, so viele wie möglich anzuklicken. Jeder Treffer zählt als Punkt. Wer einen Frosch verpasst oder auf ein leeres Feld klickt, bekommt nichts.
HTML: Die Grundstruktur deines Spiels
HTML ist die Sprache, mit der du die Struktur einer Webseite festlegst. Jedes Element hat ein öffnendes und ein schließendes Tag. Ein <h1> macht eine Überschrift, ein <p> einen Textabschnitt, ein <div> einen Container.
Für das Spiel brauchst du:
- Eine Überschrift mit dem Spieltitel
- Zwei
<p>-Elemente für Punkte und Timer - Neun
<div>-Elemente mit der Klasseholeals Spielfelder - Einen
<button>mitonclickzum Starten - Ein leeres
<div>für die Endnachricht
VS Code hilft dir dabei: Wenn du einen Elementnamen tippst und Tab drückst, generiert das vorinstallierte Emmet-Plugin automatisch das öffnende und schließende Tag. Die gesamte HTML-Grundstruktur bekommst du per ! + Tab.
CSS: Spielfeld stylen ohne großen Aufwand
CSS gibt deinem Spiel ein vernünftiges Aussehen. Du schreibst Regeln aus einem Selektor und Eigenschaften. Mit .hole wählst du alle Elemente der Klasse hole, mit #gameboard das Element mit der ID gameboard.
Für das Spielfeld nutzt du CSS Grid: display: grid und grid-template-columns: 100px 100px 100px ordnet die neun Felder in drei Spalten an. Ein gap von 10px sorgt für Abstand dazwischen, justify-content: center zentriert alles auf der Seite.
Wichtige Eigenschaften, die du dabei kennenlernst:
widthundheightfür Abmessungenmargin(Außenabstand) undpadding(Innenabstand)font-sizefür Schriftgrößencursor: pointer, damit der Mauszeiger einen Klick signalisiert
JavaScript: Spiellogik, Timer und Punktestand
JavaScript ist der komplexeste Teil. Du bindest es mit einem <script>-Tag direkt vor dem schließenden </body> ein.
Die wichtigsten Konzepte:
Variablen mit let und const: let score = 0 speichert den Punktestand, let currentFrog = -1 merkt sich, wo gerade ein Frosch sitzt. -1 bedeutet: kein aktiver Frosch.
Funktionen: function startGame() wird beim Klick auf den Button ausgeführt. Darin setzt du die Werte zurück und startest zwei Intervalle.
setInterval: Diese Funktion ruft eine andere Funktion in regelmäßigen Abständen auf. setInterval(showFrog, 1000) lässt jede Sekunde an einer zufälligen Position einen Frosch erscheinen. Ein zweites Intervall zählt den Timer herunter.
Zufälligkeit: Math.floor(Math.random() * 9) erzeugt eine zufällige Ganzzahl zwischen 0 und 8, also die Nummer des Spielfeldes.
Bedingungen mit if: Wenn der angeklickte Index gleich currentFrog ist, wurde ein Frosch getroffen. Score steigt, Frosch verschwindet.
Am Ende rufst du clearInterval auf, um beide Intervalle zu stoppen, sobald die Zeit abgelaufen ist.
Das Spiel erweitern und weiterentwickeln
Wenn das Grundspiel läuft, kannst du es nach Belieben anpassen. Emoji tauschen, Spielzeit ändern, den Intervall auf 500ms verkürzen – schon ist der Schwierigkeitsgrad gestiegen. Das Grundprinzip bleibt dasselbe, egal was du draus machst.
HTML, CSS und JavaScript sind die drei Sprachen, auf denen moderne Webentwicklung aufbaut. Wer das ernsthaft und strukturiert lernen will, findet bei DevKarriere einen passenden Einstieg: Die Frontend Fundamentals Ausbildung vermittelt genau diese Grundlagen praxisnah und mit direktem Bezug zum Arbeitsmarkt.
Häufige Fragen
Kann ich ohne Programmiererfahrung ein Spiel in HTML, CSS und JavaScript bauen?
Ja. Dieses Tutorial richtet sich explizit an Anfänger ohne Vorkenntnisse. Du lernst HTML-Elemente, CSS-Regeln und JavaScript-Funktionen direkt am Beispiel. Das Spiel ist überschaubar genug, dass du nach etwa einer Stunde ein funktionsfähiges Ergebnis hast.
Welche Tools brauche ich, um loszulegen?
Nur Visual Studio Code und einen Browser. VS Code ist kostenlos und auf Windows wie Mac verfügbar. Kein zusätzliches Plugin nötig – Emmet für schnelles HTML-Schreiben ist bereits vorinstalliert.
Wie lerne ich nach diesem Tutorial weiter?
Erweitere das Spiel: Füge einen Highscore-Speicher mit localStorage hinzu, ändere das Design oder bau Sounds ein. Wer beruflich in die IT wechseln möchte und einen Bildungsgutschein vom Jobcenter hat, kann sich die geförderte Web-Developer-Ausbildung von DevKarriere ansehen. AZAV-zertifiziert, vollständig finanzierbar.