Nokia Snake Game

Erinnerst du dich an das Nokia 3310? Das Handy, das alles überleben konnte. Vor Smartphones, vor Touchscreens, gab es Snake.

Ich habe es von Grund auf neu gebaut. Dieselben einfachen Regeln. Dasselbe süchtig machende Gameplay. Jetzt in deinem Browser.

Das Spiel spielen

Score0

Best0

Eat food to grow. Speed increases with each point.

Arrow keys or WASD to move. Space to pause.

Das Original

Snake erschien erstmals 1998 auf Nokia-Handys. Die Regeln waren einfach: Steuere eine wachsende Linie, iss Punkte, triff nicht die Wände oder dich selbst. Keine Tutorials. Keine In-App-Käufe. Nur pures Gameplay.

Die Nokia 3310-Version wurde legendär. Sie wurde auf über 100 Millionen Geräten ausgeliefert und führte eine ganze Generation in mobile Spiele ein. Der graue LCD-Bildschirm, die klobigen Pixel, das befriedigende Piepen beim Essen eines Punktes — das definierte tragbares Gaming jahrelang.

Die Nachbildung bauen

Canvas Rendering

Das Spiel verwendet HTML5 Canvas für pixelgenaue Kontrolle. Jedes Frame:

Löscht den Bildschirm mit dem Theme-Hintergrund (hell: #fafafa, dunkel: #171717)
Zeichnet ein subtiles Raster zur visuellen Orientierung
Rendert die Schlange als Serie gefüllter Rechtecke
Zeichnet das Futter als kleinen farbigen Kreis

Der Schlangenkopf ist etwas größer als die Körpersegmente, was es einfacher macht, deine Richtung zu verfolgen.

Game Loop Architektur

Das Spiel läuft auf einem setTimeout-basierten Loop statt requestAnimationFrame. Das gibt präzise Kontrolle über die Geschwindigkeit — die Schlange bewegt sich in festen Intervallen, genau wie das Original.

Game Loop:
1. Queued Richtungsänderung verarbeiten
2. Neue Kopfposition berechnen
3. Kollisionen prüfen (Wände, selbst)
4. Futter-Kollision behandeln → wachsen + beschleunigen
5. Schlangenpositionen aktualisieren
6. Frame rendern
7. Nächsten Tick planen

Die Geschwindigkeit beginnt bei 150ms pro Bewegung und sinkt um 5ms bei jedem Futter, bis zu einem Minimum von 50ms. Das erzeugt die graduelle Schwierigkeitskurve, die das Original so süchtig machend machte.

Steuerung

Desktop:

Pfeiltasten oder WASD für Bewegung
Leertaste zum Pausieren/Fortsetzen

Mobil:

Bildschirm-Richtungstasten
Touch-freundliche kreisförmige Tasten in D-Pad-Layout

Das Steuersystem verhindert 180°-Drehungen (du kannst die Richtung nicht sofort umkehren), passend zum Verhalten des Originalspiels.

State Management

Das Spiel verwendet React Refs für performance-kritischen State (Schlangenposition, Richtung, Futter) und React State für UI-Elemente (Score, Spielzustand). Dieser hybride Ansatz hält den Game Loop schnell, während React Re-Renders für die Score-Anzeige und Overlays handhabt.

Highscores persistieren in localStorage und überleben Browser-Refreshes.

Design-Entscheidungen

Theme-bewusstes Design

Das Spiel passt sich dem Farbschema deines Systems an mit einer minimalen, modernen Palette:

Light Mode:

Hintergrund: #fafafa (Off-White)
Schlange: #171717 (Fast-Schwarz)
Futter: #3b82f6 (Blau)

Dark Mode:

Hintergrund: #171717 (Fast-Schwarz)
Schlange: #fafafa (Off-White)
Futter: #60a5fa (Hellblau)

Der Handyrahmen verwendet abgerundete Ecken und Schatten, um an das klobige Plastik klassischer Mobiltelefone zu erinnern.

Rastergröße

Das originale Nokia 3310 hatte ein 84×48 Pixel-Display. Ich wählte ein 20×20-Raster mit 12px-Zellen, das:

Gut auf modernen Bildschirmen passt
Genug Herausforderung bietet ohne frustrierend zu sein
Schön auf mobilen Geräten skaliert

Kein Sound

Ich habe absichtlich Soundeffekte weggelassen. Das Original hatte einfache Pieptöne, aber Audio kann auf Websites aufdringlich sein. Das visuelle Feedback ist klar genug — du siehst die Schlange wachsen, wenn sie isst.

Was ich gelernt habe

Canvas ist mächtig. Für Spiele mit einfacher Grafik bietet Canvas alles, was du brauchst, ohne die Komplexität von WebGL oder Game Engines.

Refs schlagen State für Game Loops. React State triggert Re-Renders. In einem Game Loop, der 10+ Mal pro Sekunde läuft, ist das zu langsam. Refs geben dir veränderliche Werte ohne Render-Kosten.

Mobile Steuerung braucht sorgfältiges Design. Touch-Targets müssen groß genug sein, um zuverlässig getroffen zu werden. Das D-Pad-Layout fühlt sich natürlich an, weil es physischen Game-Controllern entspricht.

Zukünftige Ideen

Klassische Snake II-Features hinzufügen (Hindernisse, Bonus-Items)
Multiplayer mit WebSockets implementieren
Soundeffekte mit Stummschaltungs-Toggle hinzufügen
Verschiedene Schwierigkeitsstufen erstellen
Eine Bestenliste mit Backend-Service hinzufügen

Für jetzt, genieße diese Reise in die Vergangenheit. Wie hoch kannst du scoren?