https://github.com/mirokrastanov/tictactoe
✖️⭕Web-based JavaScript implementation of the popular game Tic Tac Toe.
https://github.com/mirokrastanov/tictactoe
css game html javascript tic-tac-toe web
Last synced: 2 months ago
JSON representation
✖️⭕Web-based JavaScript implementation of the popular game Tic Tac Toe.
- Host: GitHub
- URL: https://github.com/mirokrastanov/tictactoe
- Owner: mirokrastanov
- License: mit
- Created: 2023-04-12T09:07:52.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-29T15:58:50.000Z (about 2 years ago)
- Last Synced: 2025-03-22T08:46:23.876Z (over 1 year ago)
- Topics: css, game, html, javascript, tic-tac-toe, web
- Language: CSS
- Homepage: https://app-library-13e36.web.app/apps/tic-tac-toe
- Size: 644 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TicTacToe
Web-based JavaScript implementation of the popular game Tic Tac Toe.
## Live Demo
[
](https://app-library-13e36.web.app/apps/tic-tac-toe)
### The Demo is now part of my app library
- Check out the [App Library](https://app-library-13e36.web.app/)
## Description
- The game [Tic Tac Toe](https://en.wikipedia.org/wiki/Tic-tac-toe) involves 2 players trying to connect 3 adjacent symbols on a 3 by 3 board.
- The first player's symbol is a **Blue Circle**.
- The second player's symbol is a **Red X**.
- The player who connects 3 adjacent symbols first wins!
## How to play
1. Player 1 picks a square and clicks on it with `LMB` in order to mark the square with their symbol.
2. Player 2 is next and they do the same.
3. Once there is a symbol on a square it cannot be removed nor replaced by clicking on the same square again.
4. When a player connects 3 adjacent squares with their symbol they win and the game will not take other inputs. The New Game button is shown.
5. If the boards fils up and there is no winner - the game announces a draw. The New Game button is shown.
## Win Layouts
Let's take player 2 for this example. Here is a list of all possible winning combination for them.
| Layout | Layout | Layout | Layout | Layout | Layout | Layout | Layout |
|-------------|-------------|-------------|-------------|-------------|-------------|-------------|-------------|
| `x` `x` `x` | ` ` ` ` ` ` | ` ` ` ` ` ` | `x` ` ` ` ` | ` ` `x` ` ` | ` ` ` ` `x` | `x` ` ` ` ` | ` ` ` ` `x` |
| ` ` ` ` ` ` | `x` `x` `x` | ` ` ` ` ` ` | `x` ` ` ` ` | ` ` `x` ` ` | ` ` ` ` `x` | ` ` `x` ` ` | ` ` `x` ` ` |
| ` ` ` ` ` ` | ` ` ` ` ` ` | `x` `x` `x` | `x` ` ` ` ` | ` ` `x` ` ` | ` ` ` ` `x` | ` ` ` ` `x` | `x` ` ` ` ` |
## Game Screenshots
Initial board.
The game highlights a playable square on mouseover.
Mid-game screenshot.
This screenshot highlights a player winning the game.
And lastly a showdown of a draw.
## Live Demo
[](https://app-library-13e36.web.app/apps/tic-tac-toe)
- [Original Source Code](https://github.com/mirokrastanov/TicTacToe)
- [React Implementation Code for the App Library](https://github.com/mirokrastanov/app-library/tree/main/client/src/apps/ticTacToe)