Snake Game

A modern take on the classic Snake game built with HTML5 Canvas and JavaScript. This game features smooth WASD controls, progressive difficulty, and a competitive leaderboard system that saves your top scores locally.

Game Features

🎮 Classic Gameplay

• WASD Controls: Smooth keyboard controls for responsive movement
• Growing Snake: Eat food to grow longer and increase your score
• Collision Detection: Precise collision detection with walls and snake body
• Progressive Difficulty: Game becomes more challenging as you score higher

🏆 Scoring System

• Point-Based Scoring: Earn points for each food item consumed
• Persistent Leaderboard: Top 3 scores saved locally in your browser
• Achievement Recognition: Modal popup for new high scores with name entry
• High Score Tracking: Always know your personal best

🎨 Visual Design

• Retro Aesthetic: Classic green snake with colorful food items
• Smooth Animations: 60fps gameplay using requestAnimationFrame
• Clean Interface: Minimalist design focusing on gameplay
• Responsive Layout: Works perfectly on desktop and mobile devices

Technical Implementation

Core Technologies

• HTML5 Canvas: High-performance 2D rendering for smooth gameplay
• JavaScript: Game logic and physics calculations
• React: Component-based architecture with hooks
• Tailwind CSS: Responsive styling and modern design
• localStorage: Persistent leaderboard and high score data

Game Architecture

• Grid-Based Movement: Snake moves on a discrete grid system
• Frame-Rate Control: Consistent timing using requestAnimationFrame
• State Management: Clean separation of game states (START, PLAYING, GAME_OVER)
• Event Handling: Responsive keyboard input processing

Performance Optimizations

• Efficient Rendering: Only redraw when necessary to maintain smooth performance
• Memory Management: Proper cleanup of event listeners and animation frames
• Optimized Collision Detection: Fast algorithms for wall and self-collision checking

Code Highlights

The game implements several interesting technical features:

1. Smooth Movement System: Uses a grid-based approach with timed updates for consistent gameplay
2. Food Placement Algorithm: Ensures food never spawns inside the snake's body
3. Direction Change Prevention: Prevents the snake from reversing into itself
4. Leaderboard Integration: Seamless score saving with duplicate prevention

What I Learned

Building this Snake game taught me:

• Game Loop Design: How to structure a proper game loop with consistent timing
• Canvas API Mastery: Advanced techniques for 2D rendering and animation
• State Management: Handling complex game states and smooth transitions
• Performance Optimization: Maintaining 60fps with efficient rendering techniques
• User Experience: Creating intuitive controls and engaging feedback systems

This project demonstrates how modern web technologies can recreate classic games with improved performance and user experience, showing the evolution from simple arcade games to sophisticated web applications.