A modern implementation of the classic Snake game built with React and TypeScript. This project features a sleek, responsive design and modern gaming mechanics.
- 🎮 Smooth, responsive gameplay
- 📈 Progressive difficulty system
- 🏆 High score tracking with localStorage
- ⚙️ Customizable game settings
- 🎵 Sound effects
- 🎯 Special bonus items
- 🔄 Multiple game states (menu, playing, paused, game over)
- 🛡️ Borderless mode option
- React 18.3
- TypeScript 5.5
- Tailwind CSS 3.4
- Vite
- Lucide React (for icons)
- Clone the repository:
git clone https://github.com/yourusername/modern-snake-game.git
cd modern-snake-game- Install dependencies:
npm install- Start the development server:
npm run dev- Use arrow keys to control the snake's direction
- Collect red food items to grow and score points
- Yellow bonus items appear periodically for extra points
- Press Space to pause/resume the game
- Press Escape to quit the current game
The game can be customized through the settings menu:
interface GameSettings {
speed: number; // Initial game speed (50-200)
gridSize: number; // Size of the game grid
borderless: boolean; // Enable/disable wall collisions
soundEnabled: boolean; // Toggle sound effects
}// Movement control
const handleKeyPress = (e: KeyboardEvent) => {
switch(e.key) {
case 'ArrowUp':
if (direction !== 'down') setDirection('up');
break;
case 'ArrowDown':
if (direction !== 'up') setDirection('down');
break;
// ... other directions
}
};
// Score system
const handleFoodCollection = () => {
setScore(score + 10);
if (score > 0 && score % 50 === 0) {
spawnBonus();
increaseDifficulty();
}
};Contributions are welcome! Here's how you can help:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Mail - [email protected]
Made with ❤️ using React and TypeScript