Retro Mobile Snake Clone: Pixel-Perfect LCD Grid

• GIF

  gamepaly

• 

Inspiration

The Nokia 3310 from the early 2000s was my first taste of mobile gaming. I spent dozens of hours playing Snake on my father’s phone. I wanted to recreate that feeling in a single prompt for the Oneshot Challenge. Building the basic Snake game was the easy part, the real challenge was designing the layout and pixel font to match the retro style, all within a single prompt and without needing follow-ups. I’d like to add that, although I work as a project manager, I have very limited hands-on experience with programming and Bolt honestly feels like magic.

I'll gladly share the prompt via DM on X (https://x.com/kolar_eth)

What it does

• Recreates Snake on an 84 × 48 grid of 8 px divs
  
• Arrow keys/WASD + space-to-start
  
• Authentic LCD “jitter” (0.5 px gaps)
  
• Retro beeps (Web Audio API)
  
• Score rendered in a 5 × 5 pixel font outside the grid

How I built it

• React + TypeScript inside Bolt.new
  
• Tailwind CSS grid utilities only—no <canvas>
  
• Game loop via setInterval, food blink via requestAnimationFrame
  
• Modular components: GameGrid.tsx, ScoreDisplay.tsx, Overlay.tsx

Challenges

1. Keeping pixel gaps intact after CSS transforms
   
2. Syncing score font with un-scaled grid pixels
   

Accomplishments

• Zero images/SVG—100 % div-driven graphics
  

What’s could be next

• Leaderboard with Supabase
  
• Dark-mode “reverse LCD” skin
  
• Touch controls for mobile

Built With

• bolt