██████╗  █████╗ ███╗   ███╗███████╗    ██╗  ██╗██╗   ██╗██████╗
██╔════╝ ██╔══██╗████╗ ████║██╔════╝    ██║  ██║██║   ██║██╔══██╗
██║  ███╗███████║██╔████╔██║█████╗      ███████║██║   ██║██████╔╝
██║   ██║██╔══██║██║╚██╔╝██║██╔══╝      ██╔══██║██║   ██║██╔══██╗
╚██████╔╝██║  ██║██║ ╚═╝ ██║███████╗    ██║  ██║╚██████╔╝██████╔╝
 ╚═════╝ ╚═╝  ╚═╝╚═╝     ╚═╝╚══════╝    ╚═╝  ╚═╝ ╚═════╝ ╚═════╝

🎮 The Ultimate React Games Collection

8 hand-crafted browser games — built with React + Vite. Play anywhere. Zero installs.

---

🗂️ Table of Contents

• 🎯 About The Project
• 🕹️ Games Collection
• 🏗️ Project Structure
• ⚙️ Prerequisites
• 🚀 Installation & Setup
• ▶️ Running The Games
• 🛠️ Tech Stack
• 📁 Each Game — At a Glance
• 🤝 Contributing
• 📜 License

---

🎯 About The Project

"Games are the most elevated form of investigation." — Albert Einstein

This repository is a curated collection of 8 classic games, each rebuilt from scratch as a standalone React + Vite application. Whether you're here to play, learn from the code, or contribute — you're in the right place.

Every game is:

• ✅ Self-contained — its own folder, its own dependencies
• ✅ Blazing fast — powered by Vite's lightning HMR
• ✅ Modern React — functional components, hooks, clean state management
• ✅ Zero backend — pure frontend, runs entirely in the browser

---

🕹️ Games Collection

#	Game	Difficulty	Players	Tech Highlights
♟️	Chess	⭐⭐⭐⭐⭐	2P Local	Complex game tree, move validation
🎲	Backgammon	⭐⭐⭐⭐	2P Local	Dice logic, piece bearing off
🔴	Connect 4	⭐⭐	2P Local	Win detection, gravity physics
⬛	Checkers	⭐⭐⭐	2P Local	Jump chains, king promotion
💣	Minesweeper	⭐⭐	1P	Flood fill, mine generation
🔢	Sudoku	⭐⭐⭐	1P	Puzzle gen, backtracking solver
🏓	Table Tennis	⭐⭐	1-2P	Canvas animation, collision
❌⭕	XO (Tic-Tac-Toe)	⭐	2P Local	Minimax AI, win detection

---

🏗️ Project Structure

📦 Games-Collection/
│
├── 🎲 Backgammon_Game/
│   └── src/  App.jsx · index.css · main.jsx
│
├── ⬛ Checkers_Game/          ← uses Tailwind CSS
│   └── src/  App.jsx · index.css · main.jsx
│
├── ♟️ Chess_Game/
│   └── src/  App.jsx · index.css · main.jsx
│
├── 🔴 Connect_4/
│   └── src/  App.jsx · index.css · main.jsx
│
├── 💣 Mineweeper_Game/        ← uses Tailwind CSS
│   └── src/  App.jsx · index.css · main.jsx
│
├── 🔢 Sudoku_Game/
│   └── src/  App.jsx · index.css · main.jsx
│
├── 🏓 Table_Tanis/            ← uses Tailwind CSS
│   └── src/  App.jsx · index.css · main.jsx
│
├── ❌ XO_Game/
│   └── src/  App.jsx · index.css · main.jsx
│
└── 📝 README.md               ← you are here

Each game folder is a fully independent Vite project — install and run them separately.

---

⚙️ Prerequisites

Before running any game, make sure you have the following installed:

1. Node.js (v18 or higher)

# Check your version
node --version   # Should be v18+
npm --version    # Should be v9+

📥 Download Node.js → https://nodejs.org
💡 We recommend using nvm to manage Node versions.

2. Git (to clone the repo)

git --version    # Any recent version is fine

📥 Download Git → https://git-scm.com

---

🚀 Installation & Setup

Step 1 — Clone the Repository

git clone https://github.com/your-username/games-collection.git
cd games-collection

Step 2 — Navigate to a Game

Each game is its own project. Pick the one you want to play:

# Examples:
cd Chess_Game
cd Backgammon_Game
cd XO_Game
# ...and so on

Step 3 — Install Dependencies

npm install

This installs all required packages listed in package.json into a local node_modules/ folder.

---

▶️ Running The Games

🔥 Development Mode (with Hot Reload)

npm run dev

Then open your browser and visit:

http://localhost:5173

Vite's dev server starts almost instantly and auto-reloads on every file save. ⚡

---

📦 Build for Production

npm run build

This compiles and optimizes the game into the dist/ folder — ready to deploy anywhere (Netlify, Vercel, GitHub Pages, etc.).

👀 Preview the Production Build Locally

npm run preview

Opens the production build at:

http://localhost:4173

---

🔍 Lint Your Code

npm run lint

Uses ESLint to catch errors and enforce code style across the project.

---

⚡ Quick-Start Cheatsheet

# Clone once
git clone https://github.com/your-username/games-collection.git

# Then for ANY game, repeat these 3 steps:
cd <Game_Folder>
npm install
npm run dev

---

🛠️ Tech Stack

Technology	Purpose	Version
⚛️ React	UI components & state management	18+
⚡ Vite	Dev server + production bundler	5+
🎨 Tailwind CSS	Utility-first styling (some games)	3+
🟨 JavaScript (ES2022)	Game logic	ESNext
🔍 ESLint	Code quality & linting	9+
📦 npm	Package management	9+

---

📁 Each Game — At a Glance

♟️ Chess Game

A fully playable 2-player chess game in the browser.

• ✅ Full piece movement rules (castling, en passant, promotion)
• ✅ Check & checkmate detection
• ✅ Turn-based gameplay with visual highlights

cd Chess_Game && npm install && npm run dev

🎲 Backgammon Game

Classic board game with dice rolling and full rule enforcement.

• ✅ Dice roll simulation
• ✅ Legal move highlighting
• ✅ Bearing off logic

cd Backgammon_Game && npm install && npm run dev

🔴 Connect 4

Drop discs, connect four, win — simple and satisfying.

• ✅ Gravity-based piece dropping
• ✅ Win detection (horizontal, vertical, diagonal)
• ✅ Animated disc drops

cd Connect_4 && npm install && npm run dev

⬛ Checkers Game

Classic draught-style checkers with king promotion.

• ✅ Multi-jump chains
• ✅ King piece promotion
• ✅ Forced capture rules

cd Checkers_Game && npm install && npm run dev

💣 Minesweeper

The timeless puzzle — clear the board without hitting a mine.

• ✅ Randomized mine placement
• ✅ Flood-fill auto-reveal
• ✅ Flag placement + win/lose detection

cd Mineweeper_Game && npm install && npm run dev

🔢 Sudoku Game

The classic number puzzle — now in your browser.

• ✅ Puzzle generation with difficulty levels
• ✅ Input validation (highlights errors)
• ✅ Hint system & solver

cd Sudoku_Game && npm install && npm run dev

🏓 Table Tennis

Fast-paced ping pong with smooth canvas-based animation.

• ✅ Paddle control (keyboard)
• ✅ Ball physics & collision
• ✅ Score tracking

cd Table_Tanis && npm install && npm run dev

❌⭕ XO Game (Tic-Tac-Toe)

The game that started it all — now with an optional AI opponent.

• ✅ 2-player local mode
• ✅ Win / draw detection
• ✅ Clean animated UI

cd XO_Game && npm install && npm run dev

---

🤝 Contributing

Contributions are what make the open-source community amazing. Any contributions you make are greatly appreciated! 🙌

How to Contribute

# 1. Fork the project
# 2. Create your feature branch
git checkout -b feature/AmazingFeature

# 3. Commit your changes
git commit -m 'Add some AmazingFeature'

# 4. Push to the branch
git push origin feature/AmazingFeature

# 5. Open a Pull Request 🎉

Ideas for Contributions

• 🤖 Add an AI opponent to any game
• 🌐 Add online multiplayer (via WebSockets)
• 🎵 Add sound effects
• 📱 Improve mobile responsiveness
• 🌙 Add dark/light theme toggle
• 🏆 Add a leaderboard / high score system

---

📜 License

Distributed under the MIT License. See LICENSE for more information.

MIT License — free to use, modify, and distribute.
Just keep the attribution. 🙂

---

Made with ❤️ and React

⭐ Star this repo if you found it useful! ⭐