Nokia Snake Game

Remember the Nokia 3310? The phone that could survive anything. Before smartphones, before touchscreens, there was Snake.

I rebuilt it from scratch. Same simple rules. Same addictive gameplay. Now in your browser.

---

Play the Game

---

The Original

Snake first appeared on Nokia phones in 1998. The rules were simple: control a growing line, eat dots, don't hit the walls or yourself. No tutorials. No in-app purchases. Just pure gameplay.

The Nokia 3310 version became legendary. It shipped on over 100 million devices and introduced an entire generation to mobile gaming. The gray LCD screen, the chunky pixels, the satisfying beep when you ate a dot — these defined portable gaming for years.

---

Building the Recreation

Canvas Rendering

The game uses HTML5 Canvas for pixel-perfect control. Each frame:

1. Clears the screen with the theme background (light: #fafafa, dark: #171717)
2. Draws a subtle grid for visual guidance
3. Renders the snake as a series of filled rectangles
4. Draws the food as a small colored circle

The snake head is slightly larger than body segments, making it easier to track your direction.

Game Loop Architecture

The game runs on a setTimeout-based loop rather than requestAnimationFrame. This gives precise control over speed — the snake moves at fixed intervals, just like the original.

Game Loop:
1. Process queued direction change
2. Calculate new head position
3. Check collisions (walls, self)
4. Handle food collision → grow + speed up
5. Update snake positions
6. Render frame
7. Schedule next tick

The speed starts at 150ms per move and decreases by 5ms each time you eat food, down to a minimum of 50ms. This creates the gradual difficulty curve that made the original so addictive.

Controls

Desktop:

• Arrow keys or WASD for movement
• Space to pause/resume

Mobile:

• On-screen directional buttons
• Touch-friendly circular buttons in a D-pad layout

The control system prevents 180° turns (you can't immediately reverse direction), matching the original game's behavior.

State Management

The game uses React refs for performance-critical state (snake position, direction, food) and React state for UI elements (score, game state). This hybrid approach keeps the game loop fast while letting React handle re-renders for the score display and overlays.

High scores persist in localStorage, surviving browser refreshes.

---

Design Decisions

Theme-Aware Design

The game adapts to your system's color scheme with a minimal, modern palette:

Light mode:

• Background: #fafafa (off-white)
• Snake: #171717 (near-black)
• Food: #3b82f6 (blue)

Dark mode:

• Background: #171717 (near-black)
• Snake: #fafafa (off-white)
• Food: #60a5fa (light blue)

The phone frame uses rounded corners and shadow to evoke the chunky plastic of classic mobile phones.

Grid Size

The original Nokia 3310 had a 84×48 pixel display. I chose a 20×20 grid with 12px cells, which:

• Fits well on modern screens
• Provides enough challenge without being frustrating
• Scales nicely on mobile devices

No Sound

I intentionally left out sound effects. The original had simple beeps, but audio can be intrusive on websites. The visual feedback is clear enough — you see the snake grow when it eats.

---

What I Learned

Canvas is powerful. For games with simple graphics, Canvas provides everything you need without the complexity of WebGL or game engines.

Refs beat state for game loops. React state triggers re-renders. In a game loop running 10+ times per second, that's too slow. Refs give you mutable values without the render cost.

Mobile controls need careful design. Touch targets must be large enough to hit reliably. The D-pad layout feels natural because it matches physical game controllers.

---

Future Ideas

• Add classic Snake II features (obstacles, bonus items)
• Implement multiplayer using WebSockets
• Add sound effects with a mute toggle
• Create different difficulty presets
• Add a leaderboard using a backend service

For now, enjoy this trip down memory lane. How high can you score?