Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/amr-elshabrawy-dev/snake-game
Snake Game A classic Snake Game built with HTML, CSS, and JavaScript. Enjoy nostalgic gameplay in the browser while learning web development fundamentals.
https://github.com/amr-elshabrawy-dev/snake-game
css3 emailjs html html5-canvas javascript localstorage snake-game
Last synced: about 19 hours ago
JSON representation
Snake Game A classic Snake Game built with HTML, CSS, and JavaScript. Enjoy nostalgic gameplay in the browser while learning web development fundamentals.
- Host: GitHub
- URL: https://github.com/amr-elshabrawy-dev/snake-game
- Owner: Amr-Elshabrawy-Dev
- License: mit
- Created: 2025-02-09T16:11:46.000Z (2 days ago)
- Default Branch: main
- Last Pushed: 2025-02-09T18:26:29.000Z (1 day ago)
- Last Synced: 2025-02-09T19:23:54.189Z (1 day ago)
- Topics: css3, emailjs, html, html5-canvas, javascript, localstorage, snake-game
- Language: JavaScript
- Homepage: https://amr-elshabrawy-dev.github.io/snake-game/
- Size: 15.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🐍 Snake Game
[**🌐 View Live Demo**](https://amr-elshabrawy-dev.github.io/snake-game/) | [**📦 GitHub Repo**](https://github.com/Amr-Elshabrawy-Dev/snake-game)
  
A modern implementation of the classic Snake game using vanilla JavaScript with a focus on code quality and maintainability.
## ✨ Features
- **Player Registration** 📝: Players can register with their name and email to track their scores.
- **Score Tracking** 🏆: The game tracks and displays the top scores.
- **Customizable Settings** ⚙️: Players can customize the snake color, toggle between light and dark themes, and enable or disable random food colors.
- **Email Notifications** 📧: Players receive email notifications with their scores.
## 🛠️ Core Technologies
- **HTML** 🌐: Structure and layout of the game interface
- **CSS** 🎨: Styling and responsive design
- **JavaScript** 💻: Game logic and interactivity
- **EmailJS** 📧: Email notification service
- **Local Storage** 💾: Score and settings persistence
## 🚧 Challenges Faced
During the development of this Snake Game, several technical challenges were encountered and successfully addressed:
- **Collision Detection** 💥: Implementing accurate collision detection between the snake and walls/itself required careful coordinate tracking and boundary checking.
- **Smooth Movement** 🔄: Ensuring smooth snake movement while maintaining precise controls and preventing rapid reverse direction changes.
- **State Management** 📊: Managing game state effectively, including pause/resume functionality and score tracking across sessions.
- **Mobile Responsiveness** 📱: Adapting the game controls and display for various screen sizes and touch interfaces.
- **Performance Optimization** ⚡: Optimizing rendering and update loops to maintain smooth gameplay, especially as the snake grows longer.
- **Email Integration** 📨: Implementing secure and reliable email notifications without exposing sensitive credentials.
## 🚀 Setup Instructions
1. **Clone the Repository**:
```bash
git clone https://github.com/your-username/snake-game.git
cd snake-game
```
2. **Open the Project**:
Open the `index.html` file in your web browser to start the game.
3. **Configure EmailJS**:
- Sign up for an account on [EmailJS](https://www.emailjs.com/).
- Create a new email service and template.
- Update `app.js` with your EmailJS credentials:
```javascript
// Initialize EmailJS with your public key
emailjs.init("YOUR_EMAILJS_PUBLIC_KEY");
const EMaILJS_SERVICE_ID = "YOUR_SERVICE_ID";
const EMaILJS_TEMPLATE_ID = "YOUR_TEMPLATE_ID";
```
## 🎮 Game Controls
### Desktop Controls 🖥️
- **Start/Pause**: `Space` key
- **Movement**:
- Arrow keys (`↑`, `↓`, `←`, `→`)
- Or `W`, `A`, `S`, `D` keys
- **Restart**: `R` key or click "Restart" button
### Mobile Controls 📱
- **Start/Pause**: Tap screen center
- **Movement**: Swipe in desired direction
- **Restart**: Double tap screen
### Game Actions 🎯
- Collect food 🍎 to grow longer
- Avoid hitting walls and yourself
- Track your high score
- Access settings through ⚙️ menu
## ⚙️ Configuration
- **Theme Mode** 🌓: Toggle between light and dark themes in the settings.
- **Snake Color** 🎨: Choose a custom color for the snake in the settings.
- **Random Food Colors** 🍎: Enable or disable random food colors in the settings.
## 📚 Acquired Knowledge
Through developing this Snake Game, I gained valuable experience in:
- **Game Development Logic** 🎮: Understanding game loops, state management, and player interactions
- **DOM Manipulation** 🔄: Dynamic updates of game elements and UI components
- **Event Handling** ⌨️: Managing keyboard inputs and touch events for controls
- **Local Storage** 💾: Implementing data persistence for game settings and scores
- **API Integration** 🔌: Working with external services (EmailJS) for notifications
- **Responsive Design** 📱: Creating adaptive layouts for different screen sizes
- **Performance Optimization** ⚡: Techniques for smooth gameplay and efficient rendering
- **User Experience** 👥: Designing intuitive controls and feedback mechanisms
## 🤝 Contributing
Contributions are welcome! Please fork the repository and submit a pull request with your changes. Ensure your code follows the project's coding standards and includes appropriate tests.
## 📄 License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
---
## 🌐 Let's Connect
[](https://github.com/Amr-Elshabrawy-Dev) [](https://wa.me/201202546653?text=Hi%20Amr!%20I%20saw%20your%20portfolio%20and%20would%20love%20to%20discuss%20a%20potential%20collaboration) [](https://github.com/Amr-Elshabrawy-Dev) [](https://www.linkedin.com/in/amr-elshabrawy-dev) [](mailto:[email protected]) [](https://www.x.com/@AmrElshabr43803)
---
🌟 Created with 💚 by Amr Elshabrawy
© 2025 - All rights reserved
---