🐍 Snake Game — Next.js + TypeScript + TailwindCSS

A modern, responsive Snake Game built with Next.js App Router, TypeScript, and TailwindCSS.
Desktop controls use the keyboard, while mobile uses swipe gestures.

🔗 Live Demo: https://yilan-game.vercel.app

---

🚀 Features

• ⚡ Next.js App Router architecture (app/layout.tsx & app/page.tsx)
• 🧩 Fully typed TypeScript codebase
• 🎨 Modern UI built with TailwindCSS v4, gradient‑based background
• 🟩 Real-time snake movement on a 15×20 grid
• 🔀 Direction queue prevents instant reversal for smoother gameplay
• 🍎 Random food spawning with +5 score and instant growth
• 🎮 Game modes:
  • Easy: 200ms tick speed
  • Hard: 75ms tick speed
• 🏆 Mode‑specific best score saved via localStorage
• ⌨️ Keyboard controls:
  • Arrow keys
  • WASD
  • Spacebar → Quick restart after Game Over
• 📱 Mobile swipe / touch controls for direction changes
• 🧱 Component‑based architecture:
  • GameScreen
  • GameBoard
  • ControlPanel
  • InfoBar
  • ScoreCard
  • useSnakeGame custom hook

---

🛠️ Tech Stack

Layer	Technology
Framework	Next.js 16
Language	TypeScript
Styling	TailwindCSS
State	React Context + custom hooks
Router	App Router
Hosting	Vercel or custom server
Other	React 19.2.1, React Icons 5.5.0, clsx 2.1.1

---

📦 Installation

Clone the repository:

git clone https://github.com/slipbey/snake-game.git
cd <repo>

Install dependencies:

npm install
# or
yarn install

Run development server:

npm run dev

Then open:

http://localhost:3000

---

🎮 How to Play

1. Select a mode from ControlPanel and press Play.
2. Desktop: Use Arrow keys or WASD.
3. Mobile: Swipe in any direction to steer the snake.
4. Eat food to gain +5 points and grow longer.
5. Hitting walls or your own body results in Game Over.
6. Best scores are saved per mode using localStorage.

---

📁 Project Structure

src/
 ├── app/
 │   ├── globals.css
 │   ├── layout.tsx
 │   └── page.tsx
 └── features/
     └── game/
         ├── components/
         │   ├── ControlPanel.tsx
         │   ├── GameBoard.tsx
         │   ├── GameScreen.tsx
         │   ├── InfoBar.tsx
         │   └── ScoreCard.tsx
         ├── constants/
         │   └── index.ts
         ├── hooks/
         │   └── useSnakeGame.ts
         ├── types/
         │   └── index.ts
         └── utils/
             └── index.ts
public/
 ├── screenshot.png
 └── snake.png

---

📸 Preview

---

📄 License

GPL-3.0 license © 2025 — Created by Slipbey
Feel free to use, modify, and distribute with attribution.

---

👨‍💻 Author

SlipBey
Discord • LinkedIn • Website