https://github.com/janubhav/tic-tac-toe-js

A Tic-Tac-Toe web app 🎮✨ built with HTML, CSS, and JS, featuring smooth animations 🎥, stylish ❌⭕ icons, and engaging interactive gameplay 🎯.
https://github.com/janubhav/tic-tac-toe-js

css css3 html html-css-javascript html-game html5 javascript javascript-game tic-tac-toe tic-tac-toe-game tic-tac-toe-javascript

Last synced: about 2 months ago
JSON representation

A Tic-Tac-Toe web app 🎮✨ built with HTML, CSS, and JS, featuring smooth animations 🎥, stylish ❌⭕ icons, and engaging interactive gameplay 🎯.

• Host: GitHub
• URL: https://github.com/janubhav/tic-tac-toe-js
• Owner: jAnubhav
• Created: 2025-01-14T05:23:26.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-01-14T05:25:16.000Z (over 1 year ago)
• Last Synced: 2025-02-28T21:26:45.480Z (over 1 year ago)
• Topics: css, css3, html, html-css-javascript, html-game, html5, javascript, javascript-game, tic-tac-toe, tic-tac-toe-game, tic-tac-toe-javascript
• Language: JavaScript
• Homepage:
• Size: 2.35 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# TicTacToe

This is a simple Tic Tac Toe game built with HTML, CSS, and JavaScript. The game features a single-player mode where the user plays against the computer in 5 rounds.

### Features

- **Single-Player Game:** Play against a computer opponent.

- **5-Round Match:** Play 5 rounds of Tic Tac Toe, with the results tracked across rounds.

- **Game Screens:**

  - Start screen to begin the game.

  - Game screen to play the rounds.

  - Result screen to display the final score after all 5 rounds.

### How to Play

1. Open the game in your browser by opening the `index.html` file.

2. The game will start with the **Start Screen**, where you can click the "Start Game" button to begin.

3. Once the game begins, you will be taken to the **Game Screen** where you can take turns playing Tic Tac Toe against the computer.

4. After each round, the winner of the round will be announced.

5. After 5 rounds, you will be taken to the **Result Screen**, where the final winner will be displayed, and you can choose to play again.

### TechStack Used

- **HTML**: Structure of the game.

- **CSS**: Styling of the game.

- **JavaScript**: Game logic for playing against the computer, handling turns, and tracking results.

### Game Flow

1. **Start Screen**: Click the "Start Game" button.

2. **Game Screen**:

   - Player and computer take turns placing their marks on the grid.

   - The player is always "X" and the computer is "O".

   - A round ends when a player wins or the grid is full (draw).

3. **Result Screen**: After 5 rounds, the game shows the total score and declares the overall winner. You can restart the game from here.

### Installation

1. Clone or download this repository.

```bash

git clone https://github.com/jAnubhav/Tic-Tac-Toe-JS

```

2. Open the `index.html` file in any modern web browser to play the game.

### Screenshots

- **Start Screen:** Displays a button to start the game.

![Start Screen](./img/sample/start%20screen.png)

- **Game Screen:** 3x3 grid where the player and computer take turns.

![Game Screen](./img/sample/game%20screen.png)

- **Result Screen:** Shows the final winner after 5 rounds.

![Result Screen](./img/sample/result%20screen.png)

### Contributing?

Feel free to suggest improvements.