https://github.com/real-devance/retro-snake-react
Classic Snake game rebuilt with React. Uses a Queue for smooth movement and HTML5 Canvas for a retro, responsive experience.
https://github.com/real-devance/retro-snake-react
htmlcanvas react reactjs tailwindcss typescript vite vitest
Last synced: 2 months ago
JSON representation
Classic Snake game rebuilt with React. Uses a Queue for smooth movement and HTML5 Canvas for a retro, responsive experience.
- Host: GitHub
- URL: https://github.com/real-devance/retro-snake-react
- Owner: real-devance
- Created: 2024-09-12T07:59:25.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-15T17:41:55.000Z (about 1 year ago)
- Last Synced: 2025-04-05T20:12:04.952Z (7 months ago)
- Topics: htmlcanvas, react, reactjs, tailwindcss, typescript, vite, vitest
- Language: TypeScript
- Homepage: https://retro-snake-01.netlify.app/
- Size: 75.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Retro Snake 🐍
Welcome to Retro Snake Game, a nostalgic revival of the classic Snake game! Built with React and inspired by LeetCode's "353. Design Snake Game" problem,.
🕹️ [Live Demo](https://retro-snake-01.netlify.app/)
## 🌟 Features
- 🗺️ Multiple map options for varied gameplay
- 📏 Adjustable board sizes to suit your style
- 🎮 On-screen arrow buttons for easy mobile play
- 🚀 Dynamic speed increases as your snake grows
- 📊 Local storage for high scores
## 🛠️ Under the Hood
### Custom Hooks
- `useLocalStorage.ts`: Keeps your high scores safe and sound
- `useQueue.ts`: Manages the snake's movement with queue magic
- `useRAF.ts`: Ensures buttery-smooth animations
- `useRadioState.ts`: Handles those pesky radio button states
### Context API
- **Score Context**: Keeps tabs on your growing score
- **Game Config Context**: Manages all your game settings in one place
## 🚀 Get It Running
```bash
# Clone
git clone https://github.com/real-devance/retro-snake-react.git
# Dive into the project
cd retro-snake-react
# Install
npm install
# run
npm run dev
```
## 🧰 Tech Stack
- ⚛️ React
- 📜 TypeScript
- 🎨 Tailwind CSS
- 🎮 HTML5 Canvas
- ⚡ Vite
- 🧪 Vitest
## Acknowledgements
[LeetCode's 353 Design Snake Game](https://leetcode.com/problems/design-snake-game/description/)