❌⭕ Tic-Tac-Toe

A Tic-Tac-Toe game with an AI opponent powered by the Minimax algorithm. Built with vanilla JavaScript using the module pattern for clean separation of concerns.

Features

• Two game modes — Player vs Player or Player vs AI
• Minimax AI — the computer evaluates every possible game state to find the optimal move
• Adjustable AI precision — the AI plays its best move with a configurable probability, otherwise picks randomly (default: 100%)
• Choose your sign — play as X or O
• CSS animations — puff-in effect on moves, blur/unblur transitions on game end, animated winner announcement

Architecture

The code is organized into five modules using the IIFE (Immediately Invoked Function Expression) pattern:

Module	Role
Gameboard	Stores and manages the 3×3 board state
Player	Factory function to create player objects with sign management
minimaxAiLogic	Minimax algorithm implementation with precision control
gameController	Game flow: turns, win/draw detection, AI steps, restart
displayController	DOM manipulation, event listeners, UI state

Tech Stack

• JavaScript (ES6, module pattern)
• CSS (Grid, Flexbox, keyframe animations)
• HTML

Getting Started

git clone https://github.com/clu23/Tic-tac-toe.git
cd Tic-tac-toe

Open index.html in your browser. No build step needed.

What I Learned

• Implementing the Minimax algorithm for game AI
• Using the module pattern (IIFE + closures) to encapsulate state and expose clean APIs
• Managing game state and UI state separately
• Async timing with setTimeout / Promises for natural AI response delays

Context

Built as part of The Odin Project JavaScript curriculum.

Author

Clément Lulurga — GitHub