A modern, sleek reimagining of the classic Snake game — built with React, TypeScript, and AI-assisted development.
This is a modern take on the classic Snake game, featuring a clean, gradient-rich UI with smooth animations. Built entirely using React 19, TypeScript, and Vite with Tailwind CSS v4 and shadcn/ui components, this project showcases how AI-assisted development can rapidly prototype and polish a complete game experience.
The game includes all the nostalgia of the original — eat food, grow longer, avoid walls and yourself — with modern UX enhancements like dynamic difficulty, high score persistence, and keyboard-friendly controls.
This project was designed, architected, and implemented using AI Vibe Coding — an AI-assisted development approach where:
- AI handles the heavy lifting: Code generation, pattern implementation, refactoring, and bug detection
- Human provides direction: Feature requirements, design decisions, and quality oversight
- Iterative collaboration: Continuous feedback loop between developer intent and AI execution
✅ Architecture design — Component structure, state management with custom hooks, game loop patterns
✅ Code implementation — TypeScript interfaces, React components, game logic algorithms
✅ UI/UX polish — shadcn/ui integration, Tailwind styling, responsive layouts
✅ Problem solving — Handling stale closures in game loops, optimizing re-renders with memo()
✅ Documentation — Inline comments, type definitions, and this README
This approach allowed rapid development while maintaining clean, production-quality code.
- 🎯 Classic Snake mechanics — Navigate, eat, grow, survive
- 📈 Dynamic difficulty — Speed increases progressively as you score points
- 🏆 High score tracking — Your best score persists across sessions (localStorage)
- ⏸️ Pause & Resume — Take a break anytime with Space or Escape
- 🎨 Modern design — Gradient backgrounds, smooth animations, rounded corners
- 🖼️ Clean grid layout — 20×20 game board with subtle grid lines
- 📱 Responsive components — Built with shadcn/ui + Radix primitives
- 🎭 Game state overlays — Visual feedback for idle, paused, and game over states
- ⚡ Vite HMR — Instant hot module replacement during development
- 🎣 Custom React hooks —
useSnakeGameencapsulates all game logic - 🔄 Ref-based direction system — Prevents stale closure bugs in game loop
- 💾 LocalStorage persistence — High scores survive page refreshes
| Technology | Purpose |
|---|---|
| React 19 | UI library with modern concurrent features |
| TypeScript 5.9 | Type-safe development |
| Vite 7 | Lightning-fast build tool with HMR |
| Yarn 4 | Modern package manager |
| Tailwind CSS v4 | Utility-first CSS framework (new CSS-first config) |
| shadcn/ui | Accessible component system (Radix UI + CVA) |
| Lucide React | Beautiful, consistent icons |
- Node.js 18+ (20+ recommended)
- Yarn 4.x (included via Corepack)
-
Clone the repository
git clone <your-repo-url> cd snake-game
-
Install dependencies
yarn
-
Start development server
yarn dev
-
Open in browser
http://localhost:5173
yarn build # TypeScript check + Vite build
yarn preview # Preview production build locallyyarn lint # Run ESLint with React 19 rules| Key | Action |
|---|---|
Arrow Keys (↑ ↓ ← →) |
Move the snake |
| Space / Escape | Pause / Resume game |
| Click or Any Arrow Key | Start game when idle |
- Eat the food (🍎) to grow longer and score points (+10 per food)
- Avoid collisions with walls or your own body
- Speed increases as your score grows — stay sharp!
- Beat your high score — it's saved automatically
- 10 points per food eaten
- Dynamic speed — Game speeds up every time you eat (from 150ms to minimum 50ms per tick)
- High score — Displayed at the top, persists in localStorage
snake-game/
├── src/
│ ├── components/ # React components
│ │ ├── ui/ # shadcn/ui primitives (Button, Card, etc.)
│ │ ├── GameBoard.tsx # Main game grid + overlays
│ │ ├── Snake.tsx # Snake rendering component
│ │ ├── Food.tsx # Food rendering component
│ │ ├── ScoreBoard.tsx # Score display
│ │ └── Controls.tsx # Control buttons
│ ├── hooks/
│ │ └── useSnakeGame.ts # Core game logic hook
│ ├── utils/
│ │ ├── gameLogic.ts # Pure game functions (movement, collision, etc.)
│ │ └── storage.ts # localStorage wrapper
│ ├── lib/
│ │ └── utils.ts # cn() utility for class merging
│ ├── App.tsx # Root component
│ └── main.tsx # Entry point
├── public/ # Static assets
├── .github/
│ └── copilot-instructions.md # AI coding agent guidelines
└── package.json # Dependencies & scripts
Potential enhancements for v2.0:
- 🎵 Sound effects — Eating, game over, high score sounds
- 🌈 Themes — Dark mode, color schemes (green, blue, neon)
- 📱 Mobile controls — Touch-based swipe gestures
- 🏅 Achievements — Unlock badges for milestones
- 🌐 Leaderboard — Global high scores with backend integration
- 🎚️ Difficulty levels — Easy/Medium/Hard presets
- 🐍 Power-ups — Slow-motion, invincibility, double points
- 🎬 Animations — Snake slithering, food spawning effects
This project is a personal learning project built to explore modern React patterns, TypeScript best practices, and AI-assisted development workflows.
- Development: Human-guided, AI-executed (AI Vibe Coding)
- UI Components: shadcn/ui + Radix UI
- Icons: Lucide React
- Build Tool: Vite
This is primarily a showcase project, but suggestions and feedback are welcome! Feel free to:
- 🐛 Open issues for bugs
- 💡 Suggest features
- 🔀 Submit pull requests
Special thanks to the AI coding tools that made this rapid development possible, and to the open-source community for the incredible frameworks and libraries that power modern web development.
Enjoy the game! 🐍🎮
Made with ❤️ and 🤖 | View on GitHub