Welcome to Tic Tac Toe, a beautifully crafted and interactive game built using HTML, CSS, and JavaScript. Whether you're competing against a clever AI or facing off with a friend, this game brings strategy and style together in one polished experience.
🔗 Live Demo: Play Tic Tac Toe Now!
📦 GitHub Repo: MuhammadSaadAbbasi/Tic-Tac-Toe
- ✅ Single Player Mode (with smart AI that blocks your moves)
- ✅ Multiplayer Mode (with name input for both players)
- ✅ Strikethrough Animation for winning combinations
- ✅ Responsive Design for various devices
- ✅ Stylish Bronze-Gold UI with glowing effects
- ✅ Input validation & clean game state management
- ✅ "Play Again" and "Main Menu" options
- Click on Single Mode
- Enter your name
- Try to beat the AI!
- Click on Multiplayer Mode
- Enter names for Player 1 (X) and Player 2 (O)
- Take turns, and enjoy the match!
- HTML5 – Markup structure
- CSS3 – Styling, gradients, effects
- JavaScript (ES6) – Game logic, AI, DOM manipulation
- Font Awesome – Icons
- Vercel – Hosting and deployment
-
AI Move Strategy:
- First tries to win
- Then tries to block the opponent
- If not possible, picks center or random
-
Win Detection:
- Uses 8 possible winning conditions
- Adds a class like
.strike-row-2for visual feedback
-
Draw Detection:
- Game ends in a draw if no empty tiles and no win detected
tic-tac-toe/
├── index.html # Main game structure
├── style.css # All styles (inlined or extracted)
├── script.js # Game logic (AI, turn system, win check)
└── assets/ # (Optional) Screenshots or custom images
- Beat the AI and observe the animation
- Force a draw
- Test invalid input handling
- Play multiple rounds via "Play Again"
Muhammad Saad
🧑💻 GitHub: @MuhammadSaadAbbasi
📫 Feel free to star the repo or fork it if you'd like to build on top!
MIT License. Free to use, modify, and share.
"Built while learning, enjoyed while playing!" 🎯
Leave a ⭐ if you like the game!