🔴 Connect 4

A modern implementation of the classic Connect 4 strategy game. This project features a robust Minimax AI for single-player mode and Real-time Multiplayer using Firebase.

🚀 Features

• 🧠 "Unbeatable" AI: Implemented using the Minimax Algorithm with Alpha-Beta Pruning (Depth: 4) for optimized performance.

• 🌐 Real-Time Multiplayer: Play against a friend on a different device using Firebase Realtime Database.

• 🎨 Dynamic Themes: Switch between 4 distinct high-contrast neon themes.

• ✨ CSS Animations: Pure CSS transforms for realistic piece dropping and board depth simulation.

• ⚡ Performance: Optimized DOM manipulation using cached references and Event Delegation.

🛠️ Tech Stack

• Frontend: HTML5, CSS3 (Grid, Flexbox, Variables), Vanilla JavaScript (ES6+ Modules).

• Backend / Services: Firebase Realtime Database.

• Architecture: Modular Design (Separation of Concerns).

• • UI/Logic vs Networking vs Intelligence.

📂 Project Structure

├── index.html        # Semantic HTML structure
├── style.css         # CSS Variables, Animations, 3D Board
├── script.js         # Main Game Logic & DOM Manipulation
├── firebase-game.js  # Firebase SDK connection & Sync methods
└── minimaxAI.js      # Pure Math/Logic layer for the AI

🔧 How to Run

Since this project uses ES6 Modules (import/export), it requires a local server to avoid CORS errors. You cannot simply open index.html.

Option 1: VS Code (Recommended)

1. Install the Live Server extension.
2. Right-click index.html and select "Open with Live Server".

Option 2: Python

If you have Python installed, run this command in the project folder:

# Python 3
python -m http.server 8000

Then access: http://localhost:8000

🧠 The AI Logic (Minimax)

The AI doesn't play randomly. It evaluates the board state using a heuristic scoring system:

1. Win: +1,000,000 points.

2. Block Opponent: High priority to prevent player victory.

3. Center Control: Prefers the center column (statistically better).

4. Connect 3/2: Builds potential winning lines.

Snippet from minimaxAI.js:

// Example of Alpha-Beta Pruning implementation
if (newScore > value) {
    value = newScore;
    column = col;
}
alpha = Math.max(alpha, value);
if (alpha >= beta) break; // Pruning optimization

🔮 Future Improvements

[ ] Add sound effects for dropping pieces.

[ ] Add a "Spectator Mode" for online rooms.

[ ] Implement a difficulty selector (Adjusting Minimax depth).

Developed by Felipe Cardoso