Snake - Competitive GameSnake
Competitive Game

A competitive browser-based implementation of the classic Snake game with global leaderboards, multi-device support, and progressive difficulty scaling.

Main menu

Main menu

Game board

Game board

Game Over

Game Over

Assets

Assets

Project Overview

A competitive browser-based implementation of the classic Snake game designed for casual gamers seeking a polished, competitive experience. Players control a growing snake, avoid self-collision, and compete for positions on device-specific global leaderboards across three difficulty tiers. The system tracks high scores separately for desktop and mobile devices to ensure fair competition, while employing client-side caching and graceful degradation to maintain performance under database latency or failure.

Tech Stack

Frontend

Vanilla JavaScript
ES6 modules
CSS3
Grid, Flexbox, animations, media queries
HTML5
Semantic markup, meta tags for SEO/PWA

Backend & Database

Node.js
Native HTTP server
mysql2
MySQL database driver with Promise support
dotenv
Environment variable management

Key Features

Classic Snake Mechanics: Grow by eating food, die on self-collision with continuous edge wrapping
Direction Queueing System: Buffer up to 2 inputs for smooth multi-directional movement
Progressive Difficulty: Speed increases by 2% per food item with configurable minimum speed cap
Responsive Grid Scaling: 10-15 cells depending on viewport size
Real-time Collision Detection: Before movement execution for accurate gameplay
Keyboard & Touch Controls: Arrow keys, WASD, and swipe gestures with threshold detection
Pause/Resume: ESC key toggles pause state
Sound Toggle: Persistent preference stored in localStorage
Three Difficulty Modes: Easy (150ms), Normal (100ms), Hard (60ms) base interval speed
Global Leaderboards: Top 5 high scores per difficulty level
Device-Type Separation: Separate leaderboards for mobile vs desktop for fair competition
Automatic Device Detection: Via touch capability and viewport dimensions
Real-time Qualification Checking: Against current leaderboard state
Player Name Entry: Optional 15 character limit, persisted for future games
Custom Styling: Special players (ansala, ikrame) display in pink (#ff69b4)
Skeleton Loading States: During leaderboard fetch
Toast Notifications: Score save confirmation
Animated Visual Feedback: Shake on collision, pulse on score increment
Game Over Modal: Contextual messages with qualification indicator and score deficit display
Responsive Design: Mobile-first viewport units (vmin)
PWA Metadata: Theme color, manifest, touch icons
SEO Optimization: Open Graph, Twitter Cards, structured meta tags

System Flow

1

User selects difficulty level (Easy/Normal/Hard)

2

Game initializes with responsive grid based on viewport size

3

Snake moves continuously in current direction with speed based on difficulty

4

User inputs direction via keyboard or touch (up to 2 inputs buffered)

5

Collision detection checks before each move

6

Food consumption increases snake length and speed by 2%

7

On collision: shake animation, sound effect, Game Over modal displays

8

If score qualifies: player prompted to enter name for leaderboard

9

Score submitted to API with device type detection

10

Leaderboard updates with top 5 scores per difficulty/device combination

11

Client caches leaderboard data for 30 seconds to reduce API calls

Benefits

Fair Competition

Device-specific leaderboards ensure mobile and desktop players compete fairly.

Progressive Challenge

Speed scaling keeps gameplay engaging as players improve their skills.

Performance Resilience

Client-side caching and graceful degradation maintain smooth gameplay under network issues.

Cross-Platform

Touch and keyboard support with responsive design works seamlessly across all devices.

User Engagement

Global leaderboards and qualification indicators drive competitive play and replayability.

Polished UX

Smooth animations, sound effects, and visual feedback create a professional gaming experience.