WEB CONNECT4

A modern web-based Connect 4 game built entirely with Vanilla JavaScript, HTML, and CSS, featuring multiple AI opponents powered by a client-side Minimax algorithm running inside a Web Worker.

This project focuses on game AI fundamentals, performance optimization, and clean architecture — designed for educational purposes and public deployment without server-side computation.

---

Overview

Web Connect4 allows players to:

• Play locally (2 players on the same device)
• Play against a random AI
• Challenge multiple heuristic AI levels (depth 1 → 9)
• Enable Alpha-Beta Pruning for performance comparison
• Observe real-time AI statistics (execution time & simulated moves)

All AI computations run entirely in the browser, ensuring:

• No backend cost
• No server overload
• Infinite horizontal scalability

---

Architecture Philosophy

The player’s machine does the thinking.
The server only serves static files.

Instead of running Minimax on a backend API (which would severely limit scalability), the AI logic is executed:

• In pure JavaScript
• Inside a Web Worker
• Fully isolated from the UI thread

This guarantees a smooth UI even at higher search depths.

---

Project Structure

web-connect4/
├── client/
│   ├── index.html              # Main interface
│   ├── style.css               # Board & UI styling
│   ├── game.js                 # Core game logic (board, rules, win detection)
│   ├── renderer.js             # DOM rendering & UI updates
│   ├── game_controller.js      # Game flow, player input, AI orchestration
│   ├── agent/
│   │   ├── agent.js            # HeuristicAgent (Minimax + evaluation)
│   │   └── agent.worker.js     # Web Worker wrapper for AI execution
│   └── script.js               # Entry point
│
├── images/
│   ├── board.png
│   ├── minimax.png
│   └── minimax_alpha_beta_pruning.png
│
├── Dockerfile
├── nginx.conf
└── README.md

---

The AI System

Heuristic Evaluation

Each board position is evaluated using handcrafted heuristics that reward:

• Center column control
• 2-in-a-row and 3-in-a-row with open spaces
• Immediate winning positions
• Blocking opponent threats

The evaluation function assigns a numeric score used by Minimax to rank future positions.

---

Minimax Algorithm

Minimax is a recursive decision-making algorithm used in two-player zero-sum games such as:

• Connect 4
• Chess
• Tic-Tac-Toe

The algorithm assumes:

• The AI tries to maximize the evaluation score
• The opponent tries to minimize it

The AI explores all possible moves up to a given search depth, selecting the move that guarantees the best outcome assuming optimal play.

---

Alpha-Beta Pruning

Alpha-Beta Pruning is an optimization of Minimax that cuts off branches of the search tree that cannot influence the final decision.

Combined with center-first move ordering, this dramatically reduces computation time while preserving perfect accuracy.

---

Performance Impact

Without Alpha-Beta Pruning:

Depth: 7
Simulated Moves: ~940,000
Execution Time: ~49 s

With Alpha-Beta Pruning + optimized ordering:

Depth: 7
Simulated Moves: ~28,000
Execution Time: ~1.4 s

Result:

• ~97% fewer simulated positions
• ~97% faster execution

---

Web Worker Integration

All AI computations run inside a Web Worker:

• Prevents UI freezing
• Allows deep searches safely
• Keeps the main thread responsive

worker.postMessage({
    board,
    validMoves,
    depth,
    alphaBeta
});

The worker responds asynchronously with:

{
    move,
    resTime,
    resCount
}

---

Installation & Deployment

Local Development

You can run the project locally using any static file server.

Example with VS Code:

• Install Live Server
• Open client/index.html

---

Docker Deployment (Recommended)

This project is designed to be deployed as a static Docker container.

Build the image

docker build -t aitaneuh/connect4:1.0.0 .

Push to Docker Hub

docker push aitaneuh/connect4:1.0.0

Run on any server

docker run -d -p 80:80 --name connect4 aitaneuh/connect4:1.0.0

The game will be accessible at:

http://your-server-ip/

---

Why Client-Side AI?

Running Minimax on the client instead of a backend:

• Zero server load
• Infinite scalability
• No rate limiting
• No API latency
• Works offline

The only limitation becomes the player’s hardware — which is exactly what you want for a demo or public project.

---

Final Notes

This project demonstrates how classic AI algorithms can be:

• Efficient
• Scalable
• Fully browser-based

By combining Vanilla JS, Web Workers, and Docker, this Connect 4 implementation is both technically solid and production-ready.