https://github.com/bittricky/connect-four
A connect four game that you can play in the browser đšī¸đ´
https://github.com/bittricky/connect-four
exercise javascript pnpm react react-router tailwindcss typescript vite
Last synced: 2 months ago
JSON representation
A connect four game that you can play in the browser đšī¸đ´
- Host: GitHub
- URL: https://github.com/bittricky/connect-four
- Owner: bittricky
- Created: 2024-12-09T21:53:19.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-10T23:18:04.000Z (over 1 year ago)
- Last Synced: 2025-02-06T10:53:18.133Z (over 1 year ago)
- Topics: exercise, javascript, pnpm, react, react-router, tailwindcss, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 103 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Connect Four
A web application of the classic Connect Four. It features a responsive design, smooth animations, and an AI opponent to play against.
## Features
- Two game modes:
- Player vs Player
- Player vs CPU (with three difficulty levels)
- Smart AI opponent using minimax algorithm
- 30-second turn timer
- Clean, responsive UI with subtle animations
- Mobile-friendly design
- Score tracking
- Game rules and instructions
- Accessible and keyboard-friendly
## Technologies Used
- React 18
- TypeScript
- Tailwind CSS
- Framer Motion (for animations)
- Lucide React (for icons)
- Vite (for development and building)
## Getting Started
### Prerequisites
- Node.js 18 or higher
- npm or yarn
### Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/connect-four.git
cd connect-four
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
4. Open your browser and navigate to `http://localhost:5173`
## Game Rules
1. Players take turns dropping colored discs into the grid
2. Each player has 30 seconds to make their move
3. The first player to connect four discs in a row (horizontally, vertically, or diagonally) wins
4. If the timer runs out, the turn passes to the other player
5. The game ends when a player wins or the board is full (draw)
## AI Difficulty Levels
- **Easy**: AI looks 2 moves ahead
- **Medium**: AI looks 4 moves ahead
- **Hard**: AI looks 6 moves ahead
## Project Structure
```
src/
âââ components/ # React components
â âââ Board.tsx # Game board component
â âââ Cell.tsx # Individual cell component
â âââ Menu.tsx # Game menu with rules
â âââ Home.tsx # Welcome screen
â âââ ScoreCard.tsx # Player score display
â âââ Timer.tsx # Turn timer component
âââ hooks/
â âââ useGameLogic.ts # Game logic and state management
âââ types/
â âââ game.ts # TypeScript types and interfaces
âââ utils/
â âââ ai.ts # AI opponent implementation
âââ App.tsx # Main application component
âââ main.tsx # Application entry point
```
## Key Features Explained
### AI Implementation
The AI opponent uses the minimax algorithm with alpha-beta pruning for efficient decision-making. The algorithm evaluates potential moves by:
1. Looking ahead a certain number of moves (based on difficulty)
2. Evaluating board positions using a scoring system
3. Choosing the move that leads to the best possible outcome
### Game State Management
The game state is managed using React hooks and includes:
- Current board state
- Player turns
- Score tracking
- Timer management
- Game mode and difficulty settings
### Animations
The game features smooth animations for:
- Disc drops
- Hover effects
- Menu transitions
- Victory celebrations
### Credits
scaffolded with [Vite](https://vite.dev/guide/)