Dieses Mini-Game programmierst du in unter 50 Minuten (Tutorial Deutsch)

Du kannst ein vollständiges Browser-Spiel mit HTML, CSS und JavaScript in unter 50 Minuten programmieren – ohne externe Bibliotheken, nur in einer einzigen Datei. Mit diesem Emoji-Dodger-Tutorial lernst du die Basics von Spielelogik, Event-Handling und DOM-Manipulation praktisch am Projekt. Am Ende hast du ein funktionsfähiges Spiel, das du sofort im Browser spielen kannst.

Ein Spiel, 100 Zeilen Code, unter 50 Minuten

Mit HTML, CSS und JavaScript kannst du ein vollständiges Browser-Spiel programmieren - in einer einzigen Datei, ohne externe Bibliotheken. Das Projekt heißt Emoji Dodger: Du steuerst eine Rakete mit den Pfeiltasten und weichst fallenden Emojis aus. Für jeden Gegner, dem du ausweichst, gibt es einen Punkt. Wirst du getroffen, ist das Spiel vorbei.

Was du brauchst, um loszulegen

Bevor es losgeht, brauchst du einen Code-Editor. VS Code (Visual Studio Code) ist kostenlos und die erste Wahl für die meisten Entwickler. Einfach googeln, runterladen, installieren.

Danach erstellst du einen neuen Ordner und darin eine einzige Datei: index.html. Das ist die Startdatei für jede Webseite oder Web-App. Den gesamten Code schreibst du in diese eine Datei. Tippe in VS Code einfach ! und drück Tab, schon bekommst du das HTML-Grundgerüst automatisch generiert.

HTML: Die Struktur in wenigen Zeilen

Das HTML-Gerüst für das Spiel ist überschaubar. Du brauchst drei Elemente im Body:

• Ein div mit der ID game als Spielfeld-Container
• Ein div mit der ID score für die Punkteanzeige (startet bei 0)
• Ein div mit der ID player, das das Raketen-Emoji enthält

IDs dienen dazu, einzelne Elemente später per CSS und JavaScript anzusprechen. Das war’s mit dem HTML. Keine Tabellen, kein Framework, kein Overhead.

CSS: Spielfeld aufbauen und positionieren

Das Spielfeld bekommt eine feste Größe von 400 x 600 Pixeln, einen dunklen Hintergrund, eine weiße Border und position: relative. Das ist wichtig: Alle Elemente innerhalb des Spielfelds werden relativ zu diesem Container positioniert, nicht zur gesamten Seite.

Die Rakete sitzt am unteren Rand, zentriert mit left: 180px. Der Wert ergibt sich aus der Spielfeldbreite von 400 Pixeln minus der halben Emoji-Größe von 40 Pixeln. Der Score erscheint oben links, grün eingefärbt, mit etwas mehr Schriftgröße. overflow: hidden sorgt dafür, dass kein Element über den Rand hinausragt.

JavaScript: Bewegung, Gegner und Game Over

Hier passiert die eigentliche Arbeit. Das JavaScript lässt sich in drei Teile aufteilen.

Spielerbewegung: Ein Event Listener auf keydown prüft, welche Taste gedrückt wurde. Bei ArrowLeft verringert sich die X-Position der Rakete um 20 Pixel, bei ArrowRight erhöht sie sich. Damit die Rakete nicht aus dem Spielfeld fährt, gibt es zwei Grenzen: links bei 0, rechts bei 360 (Spielfeldbreite minus Emoji-Breite).

Gegner spawnen: Die Funktion createEnemy() erzeugt per document.createElement() ein neues div, weist ihm eine zufällige X-Position zu und wählt per Math.floor(Math.random() * emojis.length) einen zufälligen Emoji aus einer Liste aus, zum Beispiel Tornado, Blitz, Teufel, Bombe oder Feuer. Ein setInterval lässt den Gegner alle 20 Millisekunden um 4 Pixel nach unten fallen. Ein zweites setInterval ruft createEnemy() alle 700 Millisekunden auf, sodass regelmäßig neue Gegner spawnen.

Kollision und Score: Sobald ein Gegner die untere Grenze des Spielfelds erreicht, wird er entfernt, das Intervall gecleart und der Score um 1 erhöht. Die Kollisionserkennung vergleicht mit getBoundingClientRect() die Position von Spieler und Gegner. Überlappen sich die Rechtecke, erscheint ein Alert mit dem Endstand und die Seite lädt neu.

Das Ergebnis: ein spielbares Browser-Spiel in gut 100 Zeilen Code.

So machst du daraus dein eigenes Projekt

Das Tutorial gibt dir ein Fundament. Was du daraus machst, liegt bei dir. Du könntest die Emojis anpassen, die Steuerung ändern oder eine Highscore-Anzeige einbauen. Wer das Spiel schwerer machen will, verringert das Intervall beim Fallen. Wer es entspannter mag, erhöht es.

Solche kleinen Projekte sind ideal, um Programmieren wirklich zu lernen. Tutorials nachbauen ist gut. Tutorials nachbauen und dann eigene Ideen einbauen ist besser. Wenn du merkst, dass dir das Spaß macht und du strukturierter vorankommen willst, könnte ein Fullstack Web Developer Kurs der nächste Schritt sein. HTML, CSS und JavaScript werden dort von Grund auf erklärt, bis zu echten Projekten und dem ersten Job in der IT.

Häufige Fragen

Brauche ich Vorkenntnisse für dieses Tutorial?

Nein, aber wer wirklich bei null anfängt, wird an einzelnen Stellen mehr Geduld brauchen. Wer schon mal ein paar Zeilen HTML oder JavaScript gesehen hat, wird gut folgen können. Parallel zu einem solchen Tutorial macht es Sinn, auch die Grundlagen einmal strukturiert durchzuarbeiten.

Kann ich das Spiel auch auf dem Handy spielen?

Mit Pfeiltasten als Steuerung funktioniert das Spiel nur auf dem Desktop. Für eine mobile Version müsste man Touch-Events einbauen, also touchstart und touchmove statt keydown.

Was passiert, wenn ich die Spielfeldgröße ändere?

Die Breite (400 px) und Höhe (600 px) sind fest im JavaScript eincodiert. Wenn du die Größe im CSS änderst, musst du auch die Grenzwerte im JavaScript anpassen: die maximale X-Position des Spielers (360), die Startposition der Rakete (180) und die untere Grenze für den Score-Zähler (600).