This project is a fun implementation of the classic Snake game using React and TypeScript, built with Vite for a fast development experience. It utilizes Tailwind CSS for styling and Vitest for testing. No canvas is used; instead, we leverage HTML and CSS for rendering.
You can view the live version of the project at https://irebah.github.io/snake.
- Classic Snake gameplay
- Score tracking
- Simple controls
- Works in mobile
- Easy to extend and customize
- Vite: A fast build tool that provides an optimal development environment.
- TypeScript: A superset of JavaScript that offers static typing for better code quality.
- Vitest: A fast and lightweight testing framework for Vite.
- TailwindCSS: A utility-first CSS framework that allows for rapid UI development.
- pnpm: A fast, disk space-efficient package manager.
To set up the project locally, follow these steps:
-
Clone the repository:
git clone https://github.com/irebah/snake.git cd snake -
Install dependencies:
pnpm install
-
Run the development server:
pnpm dev
-
Open your browser: Navigate to http://localhost:5173 to view the application.
To start the game, use the arrow keys (right, up, or down) to guide the snake toward the apple or swipe in those directions in the case of mobile device.
Every time the snake eats an apple, it will relocate to a new random position on the grid. Be cautious! If the snake runs into itself or the walls, it will result in a game over. Good luck!
This project is licensed under the MIT License. See the LICENSE file for details.