Classic arcade games never die — they just evolve.

I recently built a modern, polished Snake game using nothing but HTML5, CSS3, and vanilla JavaScript.

The goal was simple: keep the nostalgia, but add the kind of visual polish, responsiveness, and game feel you’d expect from a premium browser game.

🎮 Play the Game

👉 Live Demo: https://oathanrex.github.io/snake-game/

---

✨ What Makes This Snake Game Different

This isn’t just another Snake clone. I focused heavily on responsiveness, clarity, and feedback.

🔥 Core Features

• 3 Game Modes
  • Classic
  • No Walls
  • Obstacles
• 4 Difficulty Levels
  • Easy, Normal, Hard, Insane
• Premium Visuals
  • Neon glow effects
  • Particle explosions
  • Smooth canvas animations
• Mobile Support
  • Swipe gestures
  • On-screen touch controls
• Progressive Difficulty
  • Speed increases as you level up
• Local High Scores
  • Stored using LocalStorage

---

🕹️ Controls

Input buffering is used so direction changes feel responsive even at higher speeds.

---

🛠️ Tech Stack (No Frameworks)

I intentionally avoided frameworks to keep the project lightweight and transparent.

• HTML5 Canvas — rendering & animation
• Vanilla JavaScript (ES6+) — game logic
• CSS3 — UI, layout, glow effects
• Web Audio API — procedural sound effects
• No external dependencies

---

⚙️ Technical Highlights

🎨 High-DPI Canvas Rendering

The game detects window.devicePixelRatio and scales the canvas accordingly, ensuring crisp visuals on Retina and 4K displays instead of blurry pixels.

🎧 Procedural Audio

All sound effects are generated with the Web Audio API, which:

• Keeps the game lightweight
• Avoids loading audio files
• Allows dynamic pitch and timing

🧠 Clean Game Architecture

Even though the project is intentionally kept in a single file, the code is structured around clear responsibilities:

• Input handling
• Game state updates
• Rendering loop
• Particle system
• Audio feedback

This makes the game easy to extend or tweak.

---

📱 Mobile-First Considerations

Mobile wasn’t an afterthought. The game includes:

• Swipe detection
• On-screen D-pad
• Responsive layout
• Particle limits for performance safety

The result is a smooth experience on both desktop and phones.

---

🚧 Challenges & Learnings

Some interesting challenges while building this project:

• Preventing canvas blur on high-DPI displays
• Handling browser audio autoplay restrictions
• Balancing visual effects with performance
• Avoiding input race conditions at high speed
• Keeping gameplay consistent across devices

Each problem required small but important design decisions.

---

🎮 Try It Yourself

👉 Play here: https://oathanrex.github.io/snake-game/

Feedback, suggestions, and forks are welcome.

---

👨‍💻 Author

Oathan Rex

• GitHub: https://github.com/oathanrex
• CodePen: https://codepen.io/OathanRex
• YouTube: https://youtube.com/@oathanrex

---

If you enjoyed the game or found the breakdown useful, feel free to leave a comment or share your thoughts 👋