🎮 Tic-Tac-Toe

A simple and interactive Tic-Tac-Toe web game built using HTML, CSS, and JavaScript.

The project provides a clean browser-based gaming experience while demonstrating fundamental concepts of frontend web development, JavaScript game logic, DOM manipulation, and user interaction.

🔗 Repository: https://github.com/Atibayounus/TIC-TAC-TOE.git

Tic-Tac-Toe is a classic two-player game played on a 3 × 3 grid.

Players take turns placing their symbols:

• ❌ Player X
• ⭕ Player O

The objective is to get three matching symbols in a row, column, or diagonal before the opponent.

This project was built to practice HTML structure, CSS styling, and JavaScript logic while creating a functional interactive web application.

• 🎮 Two-player gameplay
• ❌ X and O turns
• 🧩 Interactive 3 × 3 game board
• 🏆 Automatic winner detection
• 🤝 Draw detection
• 🔄 Restart / New Game functionality
• ⚡ Instant game updates
• 🖱️ Click-based interaction
• 📱 Clean and responsive interface
• 🌐 Runs directly in the browser

Used to create the structure of the game:

• Game board
• Player information
• Buttons
• Game status

Used to design the interface:

• Game board layout
• Styling
• Spacing
• Typography
• Buttons
• Responsive design
• Hover effects

Used to implement the game functionality:

• Player turns
• Click events
• Game state
• Winner detection
• Draw detection
• Reset functionality
• DOM manipulation

HTML provides the basic structure of the application.

<div class="game-board">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
</div>

CSS controls the visual appearance and layout of the game.

The board can be created using CSS Grid:

.game-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

JavaScript handles the actual game logic.

For example, click events can be used to detect when a player selects a cell:

cell.addEventListener("click", handleClick);

The program then updates the board and checks whether a player has won.

There are 8 possible winning combinations in Tic-Tac-Toe:

X | X | X
---------
  |   |
---------
  |   |

X |   |
X |   |
X |   |

X |   |
  | X |
  |   | X

JavaScript checks these combinations after each move to determine the winner.

1. Open the game in your browser.
2. Player X starts the game.
3. Click an empty cell.
4. Player O takes the next turn.
5. Continue taking turns.
6. Get three matching symbols in a row, column, or diagonal to win.
7. If all cells are filled without a winner, the game ends in a draw.
8. Use the restart button to play again.

TIC-TAC-TOE/
│
├── index.html
├── style.css
├── script.js
│
└── README.md

No installation or external dependencies are required.

git clone https://github.com/Atibayounus/TIC-TAC-TOE.git

cd TIC-TAC-TOE

Simply open:

index.html

in any modern web browser.

You can also use VS Code Live Server for development.

Start Game
    ↓
Player X Turn
    ↓
Select Cell
    ↓
Update Board
    ↓
Check Winner
    ↓
Check Draw
    ↓
Player O Turn
    ↓
Select Cell
    ↓
Update Board
    ↓
Check Winner
    ↓
Check Draw
    ↓
Game Over / Continue

The interface is designed to work across different screen sizes, including:

• 💻 Desktop
• 💻 Laptop
• 📱 Mobile
• 📲 Tablet

CSS media queries can be used to adjust the layout for smaller screens.

Building this project helped me practice:

• HTML5 structure
• CSS3 styling
• CSS Grid
• JavaScript fundamentals
• DOM manipulation
• Event listeners
• Arrays
• Functions
• Conditional statements
• Game state management
• Winner detection
• User interaction
• Debugging

Possible improvements include:

• 🤖 Add a computer/AI opponent
• 🎚️ Add difficulty levels
• 🏆 Add score tracking
• 👤 Add player names
• 🔊 Add sound effects
• ✨ Add animations
• 🌙 Add theme switching
• 📊 Add match statistics
• 💾 Store scores using Local Storage

Atiba Dar

🎓 Computer Science Student 🏫 University of Gujrat, Pakistan 💻 Frontend Developer & Programming Learner

🔗 @Atibayounus

If you like this project, consider giving the repository a ⭐ on GitHub.

Built with HTML, CSS & JavaScript — one move at a time. 🎮💻