A fully-featured, modern browser-based Snake game built with vanilla HTML, CSS, and JavaScript. Features persistent leaderboards, multiple difficulty levels, sound effects, haptic feedback, and comprehensive game statistics.
- Classic Snake Mechanics: Eat food to grow and score points
- Three Difficulty Levels: Easy (6 FPS), Medium (8 FPS), Hard (12 FPS)
- Progressive Speed: Game increases speed every 3 food items eaten
- Dynamic Input Buffering: Queue up to 3+ moves based on current speed
- Pause/Resume: Pause with SPACE key or pause button with visual overlay
- Edge Wrapping: Toggle between wrapping edges or collision walls
- Responsive Controls: Keyboard (arrow keys, WASD), touchscreen (swipe), on-screen buttons
- Sound Effects: Eat sounds, game-over feedback (toggle on/off)
- Haptic Feedback: Vibration on mobile devices for enhanced feedback
- Audio Volume Control: Adjust through settings
- Particle Effects: Visual feedback when eating food
- Glow Effects: Glowing food and snake segments
- Pause Overlay: Clear visual "PAUSED" indicator on canvas
- Smooth Animations: Interpolated movement and UI transitions
- Grid Display: Toggle grid visibility in settings
- Difficulty Indicators: Colored emoji badges (🟢 Easy, 🟡 Medium, 🔴 Hard)
- Persistent Leaderboard: Top 10 scores saved across sessions
- Filter by Difficulty: View scores for specific difficulty levels
- Player Statistics:
- Games played
- Average score
- Total food eaten
- Longest snake reached
- High Score Tracking: Automatic detection and celebration of new high scores
- Session Leaderboard: View scores from current gaming session in game-over modal
- Display Settings: Toggle grid and sound effects
- Gameplay Settings: Toggle edge wrapping behavior
- Clear Data: Reset all scores and statistics with confirmation
- Persistent Settings: Your preferences are saved between sessions
- Responsive Design: Adapts perfectly to all screen sizes (360px - 4K+)
- Touch Controls: Swipe-to-move gesture support
- Safe Area Support: Respects notches and safe areas on modern devices
- Optimized Button Sizing: Controls scale based on screen size
- Portrait & Landscape: Works in both orientations
- Keyboard Navigation: Full keyboard support for all UI elements
- ARIA Labels: Screen reader friendly with proper semantic markup
- Focus Indicators: Clear visual focus states for keyboard users
- Tab Navigation: Navigate modals and buttons with Tab key
- Open
index.htmlin any modern web browser - Select your difficulty level (Easy, Medium, Hard)
- Click START GAME to begin
| Input | Action |
|---|---|
| Arrow Keys or WASD | Move snake |
| Space or Esc | Pause/Resume |
| Swipe (mobile) | Change direction |
| On-screen Buttons | Mobile directional controls |
- Eat the red food to grow and earn points
- Avoid crashing into yourself
- Survive as long as possible
- Compete for the top spot on the leaderboard
- Speed: 6 FPS
- Perfect for learning
- No time pressure
- Speed: 8 FPS
- Balanced challenge
- Recommended for most players
- Speed: 12 FPS
- Intense and fast-paced
- For experienced players
Speed Scaling: Each difficulty increases speed by 1 unit every 3 food items eaten, capping at +20 units above base speed.
- Show Grid: Toggle subtle background grid for reference
- Sound Effects: Enable/disable game audio (eating, game over)
- Wrap Edges: Toggle between wrapping around edges or collision walls
View lifetime game statistics including:
- Total games played
- Average score across all games
- Total food items eaten
- Longest snake reached
- Top 10 Tracked: Automatically saves your best scores
- Difficulty Tags: Each score shows the difficulty it was achieved on
- Persistent Storage: Leaderboard data persists across browser sessions
- Session Highlighting: Your current game session's score is highlighted
- Filter Feature: View leaderboard filtered by difficulty level
- Cached Grid Rendering: Grid canvas is cached to reduce draw calls
- Efficient Particle System: Optimized DOM-based particle effects
- Requestanimationframe: Smooth 60 FPS rendering with frame skipping
- Minimal Redraw: Only updates necessary canvas elements per frame
- Browser Persistent Storage: Uses
window.storageAPI for cross-session data - Fallback Support: Gracefully falls back to session memory if storage unavailable
- Data Backup: All game data (scores, stats, settings) automatically saved
- Vanilla JavaScript: No dependencies, works everywhere
- Responsive Canvas: Automatically scales to screen size
- Mobile-First Design: Optimized for mobile, enhanced on desktop
- Semantic HTML: Proper structure for accessibility
Works on all modern browsers:
- Chrome/Chromium 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- Mobile browsers (iOS Safari, Chrome Mobile)
- Queue Moves Early: Use the input buffer to plan 2-3 moves ahead on higher difficulties
- Corner Strategy: Use corners to your advantage for quick turns
- Food Placement: Food spawns randomly—be prepared for unexpected positions
- Speed Management: Watch the speed bar to anticipate when the game will get faster
- Save Your Name: Beating your high score? Save your name to the leaderboard!
- Phone layout optimized but may need adjustments on very small screens
- Some older iOS versions may have limited haptic support
Potential features for future versions:
- Local multiplayer mode
- Power-ups system (speed boost, shield, etc.)
- Custom color themes
- Sound effect volume slider
- Online leaderboard sync
- Replay system
- Achievements/Badges
Created by TheM1ddleM1n - Feel free to fork, modify, and enjoy!
Play the live version here: HTMLSnakeGame
Enjoy the game! 🐍