| # | Section | # | Section |
|---|---|---|---|
| 1 | Overview | 6 | AI Engine |
| 2 | Features | 7 | Architecture |
| 3 | Installation | 8 | Project Structure |
| 4 | Controls | 9 | FAQ |
| 5 | Difficulty Levels | 10 | Credits |
Chess AI Pro is a beautiful, interactive chess game with an AI opponent — built entirely with vanilla HTML, CSS, and JavaScript. No frameworks, no libraries, no build tools. Just open index.html and play.
The game features a minimax algorithm with alpha-beta pruning for the AI, a modern glassmorphism UI with gradient accents, smooth animations, sound effects, and full chess rule implementation including castling, en passant, and pawn promotion.
| Feature | Description |
|---|---|
| ♟️ Full Chess Rules | Castling (kingside + queenside), en passant, pawn promotion |
| 🤖 AI Opponent | Minimax with alpha-beta pruning, 5 difficulty levels |
| 🎯 Move Highlighting | Visual feedback for selected pieces and legal moves |
| 📜 Move History | Click-through game history to review past moves |
| ↩️ Undo | Undo moves (single in 2-player, dual moves vs AI) |
| 👑 Checkmate Detection | Automatic checkmate, stalemate, and draw detection |
| 🔄 Board Flip | Rotate 180° to play from either perspective |
| 📊 Material Counter | Track captured pieces and material advantage |
| 📈 Evaluation Bar | Real-time position evaluation display |
| Feature | Description |
|---|---|
| 🎨 Glassmorphism | Liquid-glass aesthetic with gradient accents |
| 📱 Responsive | Works on desktop, tablet, and mobile |
| 🔊 Sound Effects | Audio feedback for moves, captures, and checks |
| ♿ Accessibility | ARIA labels, keyboard navigation, screen reader support |
| 💾 Auto-Save | Game persists in browser localStorage |
Quick Start (No Dependencies)
# Clone the repo
git clone https://github.com/ISMAILdz13/ChessAIPro.git
cd ChessAIPro
# Option 1: Just open index.html in your browser
open index.html # macOS
xdg-open index.html # Linux
start index.html # Windows
# Option 2: Use a local server (recommended)
python3 -m http.server 8000
# Then visit http://localhost:8000GitHub Pages Deployment
# Push to your repo, then enable GitHub Pages:
# Settings → Pages → Source → Deploy from branch → main
# Your game will be live at:
# https://ISMAILdz13.github.io/chess-ai-pro/Embed in Website
<iframe src="https://ISMAILdz13.github.io/chess-ai-pro/"
width="100%" height="800" frameborder="0">
</iframe>| Control | Action | Keyboard |
|---|---|---|
| Click piece | Select piece | — |
| Click highlighted square | Make move | — |
| New Game | Reset to starting position | N |
| 🤖 AI Toggle | Enable/disable AI opponent | A |
| ↩️ Undo | Undo last move(s) | U |
| 🔄 Flip | Rotate board 180° | F |
| Difficulty dropdown | Change AI search depth | D |
| Key | Action |
|---|---|
N |
New game |
A |
Toggle AI |
U |
Undo |
F |
Flip board |
D |
Focus difficulty selector |
Esc |
Deselect piece |
| Level | Search Depth | Thinking Time | Best For |
|---|---|---|---|
| Beginner | 2 | Instant | Learning the basics |
| Intermediate (default) | 3 | < 1s | Casual play |
| Advanced | 4 | ~1-2s | Competitive |
| Master | 4+ | ~2-4s | Strong challenge |
| Grandmaster | 5 | ~5-15s | Maximum difficulty |
The AI uses the minimax algorithm with alpha-beta pruning — the classic approach for two-player zero-sum games like chess.
Algorithm Breakdown
- Move Generation — All legal moves are generated for the current position using the chess engine library (embedded in
index.html) - Tree Search — The algorithm searches ahead to the configured depth (2-5 moves)
- Position Evaluation — Each leaf position is scored using:
- Material balance (piece values: pawn=1, knight=3, bishop=3, rook=5, queen=9)
- Piece-square tables (positional bonuses for piece placement)
- Mobility (number of legal moves available)
- King safety (castling status, pawn shield)
- Alpha-Beta Pruning — Branches that can't affect the final decision are pruned, dramatically reducing the search space
- Move Selection — The move with the best minimax value is chosen
Position Evaluation Formula
Score = Σ(material_value[piece] + piece_square_table[piece][square])
+ mobility_bonus
+ king_safety_bonus
- opponent_threats
Piece Values:
| Piece | Value |
|---|---|
| Pawn | 1 |
| Knight | 3 |
| Bishop | 3 |
| Rook | 5 |
| Queen | 9 |
| King | ∞ (not capturable) |
- Player clicks → UI Layer captures input → Chess Engine validates move
- Chess Engine updates board state → UI re-renders pieces
- AI Engine generates legal moves → searches game tree → evaluates positions
- Best move is selected → Chess Engine applies it → UI animates the move
- Game state saved to localStorage
ChessAIPro/
├── assets/ # SVG graphics, banners, and icons
├── index.html # Single-file app — HTML, CSS, JS engine
├── .gitignore # Ignore configuration for Git
├── LICENSE # MIT License
└── README.md # Project documentation
Everything is in one file. The chess engine, AI logic, UI, styling, and sound effects are all embedded in
index.html. No build step, no dependencies, no npm install.
Do I need to install anything?
No! Just open index.html in any modern browser. No dependencies, no build tools, no server required.
How strong is the AI?
At Grandmaster level (depth 5), the AI is quite challenging for casual players. It won't beat a titled player, but it provides a solid game for most people. Depth 5 with alpha-beta pruning typically evaluates tens of thousands of positions per move.
Can I play against another human?
Yes! Toggle off the AI button (🤖 AI: OFF) and two players can take turns on the same device.
Does it work on mobile?
Yes, the UI is fully responsive. Tap to select pieces and tap highlighted squares to move. The layout adapts to phone and tablet screens.
Is my game saved?
Yes, the game state is automatically saved to your browser's localStorage. Close the tab and come back later — your game will still be there.
Can I embed this on my website?
Yes! Use an iframe pointing to the GitHub Pages URL:
<iframe src="https://ISMAILdz13.github.io/chess-ai-pro/"
width="100%" height="800" frameborder="0"></iframe>What chess rules are supported?
All standard chess rules: castling (kingside + queenside), en passant, pawn promotion (with piece selection dialog), check, checkmate, stalemate, threefold repetition, insufficient material, and the 50-move rule.
How does the evaluation bar work?
The evaluation bar shows the relative position strength. A full bar pointing toward White means White is winning. The score (e.g., +2.5) represents the material advantage in pawns.
- Developer: ISMAILdz13 (@ISMAILdz13)
- Repository: github.com/ISMAILdz13/ChessAIPro
- Chess Engine: Custom implementation embedded in
index.html - AI Algorithm: Minimax with alpha-beta pruning
MIT License — see LICENSE file.
⭐ Star this repo if you like it! ⭐