A modern and responsive Snake Game built using HTML, CSS, and JavaScript. This project is a redesigned version of the classic Snake Game with an improved user interface, responsive layout, smooth gameplay, sound effects, score tracking, and local high score storage.
The project focuses on strengthening JavaScript fundamentals by implementing game logic, collision detection, DOM manipulation, keyboard event handling, and Local Storage while maintaining a clean and user-friendly interface.
- 🎮 Classic Snake Game gameplay
- 📱 Fully responsive design for desktop, tablet, and mobile devices
- 🐍 Modern snake design with a customised snake head
- 🍎 Attractive food design with smooth appearance
- 📊 Current Score and High Score tracking
- 💾 High Score stored using Local Storage
- 🔊 Sound effects for food collection and game over
- ⌨️ Smooth keyboard controls
- 🎨 Modern UI with gradient effects and glassmorphism-inspired score cards
- 🌿 Beautiful game background with enhanced visual styling
- ⚡ Lightweight and fast performance
- HTML5
- CSS3
- JavaScript (ES6)
Snake-Game/
│
├── Audio/
│ ├── food.mp3
│ ├── gameover.mp3
│ ├── move.mp3
│ └── music.mp3
│
├── Images/
│ ├── snake-game-demo.png
│ ├── snake-game-mobile-demo.png
│ └── ...
│
├── index.html
├── style.css
├── script.js
└── README.md
Follow these steps to run the project locally:
- Clone the repository
git clone https://github.com/Mohammed-Naeem-Patel/Snake-Game.git- Navigate to the project folder
cd Snake-Game- Open
index.htmlin your preferred web browser.
This project helped me improve my understanding of:
- JavaScript Game Logic
- DOM Manipulation
- CSS Grid Layout
- Event Handling
- Collision Detection
- Local Storage
- Responsive Web Design
- Code Organisation
- UI Enhancement using CSS
Some features that can be added in future versions include:
- ⏸️ Pause and Resume functionality
- 🎚️ Difficulty Levels
- 📱 Touch controls for mobile devices
- 🎨 Multiple themes
- 🏆 Leaderboard system
- 🎵 Background music controls
Patel Mohammed Naeem
Aspiring Full-Stack Web Developer passionate about building responsive, interactive, and user-friendly web applications while continuously improving development skills through hands-on projects.
- GitHub: https://github.com/Mohammed-Naeem-Patel
- LinkedIn: https://www.linkedin.com/in/patel-mohammed-naeem/
If you found this project useful or liked the design, please consider giving this repository a ⭐ Star. Your support motivates me to build more projects and continue improving my skills.
Thank you for visiting this repository! 😊