TicTacToe

Web-based JavaScript implementation of the popular game Tic Tac Toe.

Live Demo

The Demo is now part of my app library

• Check out the App Library

Description

• The game 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

• Original Source Code
• React Implementation Code for the App Library