Snake Game 🐍

A modern, responsive Snake Game web application built with Next.js (App Router), React, and Tailwind CSS. The game features smooth animations, responsive design with mobile touch controls, an interactive preloader, and a dark/light mode toggle.

---

👨‍💻 Developer Info

This project was created by Muhammad Rafly Romeo Nasution, a 6th-semester Information Systems student at Universitas Gunadarma.

• GitHub: Raflyromeo
• LinkedIn: muhammadraflyromeonasution
• Instagram: @rfly.romeo_

---

✨ Features

• Classic Gameplay: Standard snake game mechanics using grid coordinates and game loop scaling.
• Cross-Platform & Responsive: Fully playable on Desktop and Mobile devices.
• Mobile Controls: Touch-friendly D-Pad controls that automatically appear on mobile and tablet screens.
• Preloader Animation: A lightweight, pure CSS animated preloader screen on initial load.
• Theming: Seamless Dark Mode and Light Mode switching using next-themes and Tailwind's class strategy.
• Score Tracking: Keeps track of the live score and saves the all-time Best Score to localStorage.
• Modern UI: Clean, centered grid layout with a polished visual hierarchy and Lucide icons.

---

🛠️ Tech Stack

• Framework: Next.js 14 (App Router)
• Library: React (Hooks: useState, useEffect, useRef, useCallback)
• Styling: Tailwind CSS
• Icons: Lucide React
• Theming: next-themes

---

📂 Project Structure

snake-game/
├── public/                 // Static assets (favicon, etc.)
├── src/
│   ├── app/                // Next.js App Router root
│   │   ├── globals.css     // Global styles & Tailwind directives
│   │   ├── layout.tsx      // Root layout and ThemeProvider wrapper
│   │   └── page.tsx        // Main game page stitching all components together
│   │
│   └── components/         // Reusable React components
│       ├── GameBoard.tsx       // Core game logic, loop, and grid rendering
│       ├── InfoModal.tsx       // Modal containing developer info & social links
│       ├── MobileControls.tsx  // Touch-friendly D-Pad for mobile devices
│       ├── Preloader.tsx       // CSS-animated initial loading screen
│       ├── ScoreBoard.tsx      // Displays current score and high score
│       ├── ThemeToggle.tsx     // Button to toggle dark/light mode
│       └── theme-provider.tsx  // Next-themes provider setup
│
├── .eslintrc.json          // ESLint configuration
├── next.config.mjs         // Next.js configuration
├── tailwind.config.ts      // Tailwind CSS configuration
├── tsconfig.json           // TypeScript configuration
└── package.json            // Project dependencies and scripts

---

🚀 Getting Started

Prerequisites

Ensure you have Node.js installed on your machine.

Installation

1. Clone the repository or download the source code.
2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open http://localhost:3000 with your browser to play the game!