Modern React Snake Game with Final Year Project

Project Overview

A modern, interactive Snake game built using React and Vite, styled with Tailwind CSS. Players control a snake on a grid, eating food to grow longer while avoiding collisions with itself. The game features smooth animations, a responsive layout, and keeps track of high scores using localStorage.

Screenshots

Key Features

Classic Snake gameplay with grid-based movement.
Smooth animations with adjustable speed.
High score tracking using browser localStorage.
Pause, resume, start, and reset controls.
Snake wraps around the edges of the grid.
Responsive design compatible with different screen sizes.
Visual enhancements: snake gradient, food flash effect, and shadow effects.
Keyboard controls (Arrow keys or WASD) for intuitive gameplay.

Functionality

Start Game: Begin a new game with initial snake position.
Pause/Resume: Temporarily stop or continue the game.
Reset: Restart the game and score.
Movement Controls: Move snake using Arrow keys or WASD.
Food Consumption: Snake grows when eating food, score increases.
Collision Detection: Game ends if snake collides with itself.
Edge Wrapping: Snake reappears on opposite side when crossing grid edges.
Score Display: Current score and high score tracked on-screen.
Visual Effects: Gradient snake body, flashing food, shadows for blocks.

Technology Used

React 18: Frontend UI library.
Vite: Fast build tool and dev server.
Tailwind CSS 3.x: Styling and responsive design.
JavaScript (ES6+): Game logic and DOM interactions.
localStorage: High score persistence.

Why This Project Is Useful

Helps beginners practice React state management (useState, useEffect, useRef).
Demonstrates grid-based rendering in React.
Showcases dynamic game logic, collision detection, and responsive UI.
Provides a fun, interactive project for portfolio or learning purposes.
Teaches localStorage usage for persisting data (high scores).