Xtreme Tic Tac Toe | HTML5 Game With Ai PvP

A premium, fully-featured Tic Tac Toe game built entirely with vanilla HTML, CSS, and JavaScript. Zero dependencies. Zero build tools. Open and play instantly in any modern browser.

Game Modes

• 2 Players (Local Versus) — Two human players share one device. Player X always goes first. Series score persists across rounds.
• vs AI (Machine Opponent) — Single player vs a Minimax AI with Alpha-Beta pruning. Human is always Player X.

Series Lengths:

• Best of 5 — First to 3 wins
• Best of 7 — First to 4 wins
• Best of 9 — First to 5 wins
• Marathon — First to 10 wins

AI Difficulty

• Easy.
• Medium
• Unbeatable

Themes

8 premium built-in themes with instant CSS variable switching and zero flash:

1. Obsidian — Cyan & Magenta on deep black
2. Crimson — Red & Orange, blood arena
3. Arctic — Ice Blue & Teal, frozen north
4. Amber — Gold & Orange, desert heat
5. Violet — Purple & Pink, mystic night
6. Neon — Electric Teal & Hot Pink, arcade
7. Sakura — Pink & Gold, cherry blossom
8. Marble — Brown & Red, warm parchment

Custom Theme Builder (applies to game board only — does not override the lobby theme):

• Background color picker
• Cell A & Cell B color pickers
• X symbol color picker
• O symbol color picker
• 6 quick-apply presets
• Live 3×3 board preview
• Persists selection to localStorage

Controls & Interactions

• Click / Tap cell — Place X or O mark on the board
• Pause button — Freeze the game; resume, go to lobby, or quit
• Sound button — Toggle all audio on or off
• Quit Game button — Opens a confirmation popup showing the current series score
• Assign Round button — Forfeit the current round to your opponent; automatically triggers the round result popup or championship screen if the series is won
• Main Menu — Returns to lobby with a full game state reset
• Rematch — Start a new series with the same settings and players

Overlay System & UI Features

• Pause Overlay — Resume / Back to Lobby / Quit with backdrop blur
• Quit Confirmation — Shows live series score before confirming exit
• Assign Round Popup — Displays current player and opponent in their theme colors; confirming forfeits the round and awards the point to the opponent
• Round Result Popup — Winner symbol, player name, streak indicator, Next Round / Main Menu
• Championship Screen — Final scores, rounds played, best streak, draw count, round-by-round replay log, and Hall of Fame
• Custom Theme Modal — Color pickers with live 3×3 board preview; affects board cells and symbols only
• Score Panel — Live scores, player names, active-turn highlight with glow effect
• Series Progress Pips — Dot indicators per player showing wins toward the series target
• Round History Chips — Compact colored chips showing X win, O win, or Draw for each completed round
• Win Line Animation — SVG stroke animation drawn in the winner’s color; clears automatically on the next round
• Particle Confetti — 52-particle burst on championship win using the winner’s color palette
• Hall of Fame — Top 8 all-time series champions stored in localStorage
• Browser Compatibility Checker — Built-in alert if any required browser feature is missing

Tech Stack (100% Vanilla)

• HTML5 — Semantic markup, no frameworks
• CSS3 — Custom properties, keyframe animations, backdrop-filter
• Vanilla ES2015+ JavaScript — Arrow functions, destructuring, classes
• Web Audio API — Procedural sound synthesis, no audio files required
• Inline SVG — All icons and board symbols are pure code, not images
• localStorage — Hall of Fame and custom theme persistence
• Google Fonts CDN — Orbitron, Exo 2, Rajdhani
• Zero npm. Zero build tools. Zero dependencies.