Tic Tac Toe

About This Game

This is a simple, browser-based Tic Tac Toe game built entirely with HTML, CSS, and JavaScript — no external libraries or dependencies required. Just open the file in any modern web browser and start playing!

How to Play

Tic Tac Toe is a two-player game where players take turns marking spaces on a 3×3 grid.

1. Player X always goes first. Click on any empty cell to place your X.
2. Players alternate turns. After X plays, it's O's turn, and so on.
3. Try to get three in a row. The first player to align three of their marks horizontally, vertically, or diagonally wins!
4. Watch for a draw. If all nine cells are filled and no one has three in a row, the game ends in a tie.
5. Play again! Click the "New Game" button to reset the board and start a fresh round. Your scores are preserved until you refresh the page.

Rules

• The game is played on a 3×3 grid.
• Two players take turns: one is X, the other is O.
• Players cannot play on a cell that is already occupied.
• The first player to get 3 marks in a row (horizontally, vertically, or diagonally) wins.
• If all 9 squares are filled and neither player has 3 in a row, the game is a draw.

Winning Combinations

There are 8 possible ways to win:

• 3 Rows: Top, middle, or bottom horizontal line
• 3 Columns: Left, center, or right vertical line
• 2 Diagonals: Corner to corner (top-left to bottom-right, or top-right to bottom-left)

History of Tic Tac Toe

Tic Tac Toe is one of the oldest and most recognized games in human history. Its origins can be traced back thousands of years:

• Ancient Egypt (circa 1300 BCE): Game boards resembling Tic Tac Toe have been found carved into roofing tiles dating back to ancient Egypt.
• Roman Empire (1st century BCE): The Romans played a similar game called "Terni Lapilli" (three pebbles). Players had three pieces each and moved them around to try to get three in a row.
• Medieval Period: Variations of the game spread throughout Europe and were known by different names in different regions.
• 20th Century: The game became known as "Noughts and Crosses" in Britain and "Tic Tac Toe" in America. The name "Tic Tac Toe" may derive from a game played in the 1800s where players threw pencils at a slate with numbers.
• 1952: OXO (also known as Noughts and Crosses) became one of the first video games ever created, programmed by Alexander S. Douglas at the University of Cambridge.
• Computer Science: Tic Tac Toe has been extensively studied in game theory and artificial intelligence. It's often one of the first games programmers learn to code due to its simple rules and finite possibilities.

Strategy Tips

• Take the center: If you go first, the center square is the strongest opening move — it's part of 4 possible winning lines.
• Corners are key: If the center is taken, go for a corner. Corners are part of 3 winning lines each.
• Block your opponent: Always check if your opponent has two in a row and block them!
• Create a "fork": Set up two ways to win simultaneously — your opponent can only block one!
• Perfect play = Draw: With optimal play from both sides, Tic Tac Toe always ends in a draw. This makes it a "solved game."

Technical Details

This implementation uses:

• HTML5: Semantic structure with buttons for accessible, clickable cells.
• CSS3: Flexbox and Grid for layout, gradients for styling, transitions and keyframe animations for visual feedback.
• Vanilla JavaScript: Event-driven logic with no frameworks — just pure, lightweight code that runs in any browser.

The entire game is contained in a single HTML file, making it easy to share, host, or run offline. Total file size is under 10KB!