🐍 Classic Snake Game

A modern, responsive implementation of the classic Snake game built with vanilla JavaScript, HTML5 Canvas, and CSS3. Features smooth animations, multiple difficulty levels, and cross-platform compatibility.

🎮 Live Demo

Experience the game live: Play Snake Game

✨ Features

🎯 Core Gameplay

• Classic Snake mechanics with modern enhancements
• Smooth movement and responsive controls
• Dynamic food generation with collision detection
• Progressive speed increase as score grows
• Visual feedback with snake eyes that follow direction

🎨 Visual Design

• Retro-inspired pixel art aesthetic
• Neon green terminal-style UI
• Animated grid background
• Glowing effects and shadows
• Responsive canvas sizing

🎛️ Control Options

• Keyboard: Arrow keys or WASD
• Touch: Swipe gestures on mobile devices
• Button: On-screen directional buttons
• Cross-platform: Works on desktop and mobile

🏆 Game Modes

Difficulty	Speed (ms)	Description
Easy	150	Perfect for beginners
Medium	100	Balanced gameplay
Hard	70	Challenge mode

🚀 Quick Start

Prerequisites

• Modern web browser (Chrome 60+, Firefox 55+, Safari 11+, Edge 79+)
• No additional dependencies required

Installation

1. Clone the repository

   git clone https://github.com/musthofa-kamaluddin/snake.git
   cd snake
   

2. Launch the game

   # Option 1: Open directly in browser
   open index.html
   
   # Option 2: Use local server (recommended)
   python -m http.server 8000
   # or
   npx serve
   

3. Play!

   • Open http://localhost:8000 in your browser
   • Select difficulty and start playing

🎮 How to Play

Controls

Input	Action
↑ W	Move Up
↓ S	Move Down
← A	Move Left
→ D	Move Right
Touch/Swipe	Mobile controls

Objective

• Control the snake to eat red food
• Avoid hitting walls or the snake's own body
• Each food increases your score by 10 points
• Snake grows longer with each food consumed
• Game speed increases as you progress

🏗️ Technical Architecture

File Structure

snake/
├── index.html          # Main HTML structure
├── styles.css          # CSS styling and animations
├── game.js            # Core game logic
└── README.md          # Documentation

Core Components

🧠 Game Engine (SnakeGame class)

class SnakeGame {
    constructor()     // Initialize game state
    gameLoop()       // Main game loop using requestAnimationFrame
    update()         // Game state updates
    draw()           // Canvas rendering
    collision()      // Collision detection system
}

🎨 Rendering System

• Canvas-based: High-performance 2D rendering
• Responsive: Dynamic sizing based on container
• Grid System: 20x20 cell grid for gameplay
• Visual Effects: Gradient backgrounds, glowing elements

🎮 Input Management

• Multi-platform: Keyboard, touch, and button inputs
• Event Handling: Debounced input processing
• Direction Buffering: Smooth direction changes

🛠️ Development

Code Style

• ES6+: Modern JavaScript features
• Modular: Clean class-based architecture
• Responsive: Mobile-first design approach
• Performance: Optimized rendering and event handling

Key Technical Features

Performance Optimizations

// Efficient game loop
gameLoop(currentTime) {
    if (secondsSinceLastRender < 1 / (1000 / this.gameSpeed)) return;
    this.update();
    this.draw();
}

// Smart collision detection
if (this.snake.some(segment => 
    segment.x === head.x && segment.y === head.y)) {
    this.gameOver();
}

Responsive Canvas

setupCanvas() {
    const containerWidth = this.canvas.parentElement.clientWidth;
    const size = Math.min(containerWidth - 40, 600);
    this.canvas.width = size;
    this.canvas.height = size;
    this.cellSize = size / this.gridSize;
}

Browser Compatibility

Browser	Version	Support
Chrome	60+	✅ Full
Firefox	55+	✅ Full
Safari	11+	✅ Full
Edge	79+	✅ Full
Mobile Safari	11+	✅ Touch
Chrome Mobile	60+	✅ Touch

📊 Performance Metrics

• Frame Rate: Consistent 60 FPS
• Memory Usage: < 50MB
• Load Time: < 1 second
• Canvas Size: Dynamic (max 600×600px)
• Grid Resolution: 20×20 cells

🎨 Customization

Styling Variables

:root {
    --primary-color: #0f0;    /* Neon green */
    --bg-color: #000;         /* Black background */
    --border-width: 2px;      /* UI borders */
    --glow-intensity: 10px;   /* Glow effects */
}

Game Configuration

// Modify these values in game.js
this.gridSize = 20;        // Grid dimensions
this.gameSpeed = 150;      // Initial speed (ms)
this.scoreIncrement = 10;  // Points per food

🤝 Contributing

We welcome contributions! Here's how to get started:

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature
   

3. Commit your changes

   git commit -m 'feat: add amazing feature'
   

4. Push to the branch

   git push origin feature/amazing-feature
   

5. Open a Pull Request

Development Guidelines

• Follow ES6+ standards
• Use meaningful variable names
• Add comments for complex logic
• Test on multiple browsers
• Maintain responsive design

🐛 Bug Reports

Found a bug? Please create an issue with:

• Browser and version
• Steps to reproduce
• Expected vs actual behavior
• Screenshots (if applicable)

📈 Roadmap

Upcoming Features

• High score persistence
• Sound effects and music
• Power-ups and special items
• Multiplayer mode
• Custom themes
• Progressive Web App (PWA) support

Version History

• v1.0.0 - Initial release with core gameplay
• v1.1.0 - Mobile touch controls added
• v1.2.0 - Difficulty selection implemented

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License

Copyright (c) 2024 Snake Game Project

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction...

👨‍💻 Author

Musthofa Kamaluddin

• GitHub: @musthofa-kamaluddin
• LinkedIn: Musthofa Kamaluddin
• Email: musthofa.kamaluddin21@gmail.com

🙏 Acknowledgments

• Classic Snake game inspiration
• HTML5 Canvas API documentation
• CSS Grid and Flexbox guides
• JavaScript ES6+ features
• Open source community

---

Enjoy the game! 🐍🎮

⬆ Back to Top