Skip to content
Play "Ultimate Tic-Tac-Toe" in the browser πŸš€
Branch: master
Clone or download

README.md

tic tac toe logo

Ultimate Tic-Tac-Toe

A browser game implementation of ultimate tic-tac-toe using React, Redux and CSS Grid.

contributions welcome Build Status Greenkeeper badge codecov

Demo

Below you see a quick demo of the game mechanics. You can test it out yourself here

demo of the game

Game Rules

There are 9 normal tic-tac-toe boards. You win a small tic-tac-toe board if you have 3 of your marks in a row. (diagonal, vertical or horizontal) And you win the game if you have 3 won tic-tac-toe boards positioned in a row. (diagonal, vertical or horizontal)

But here's the twist: Every move on a small board sends the opponent to the equivalent on the big board.

Practical Example

Let's say we have this big board with 9 small boards. (the initial game state)

[ ][ ][ ]   [ ][ ][ ]   [ ][ ][ ]
[ ][ ][ ]   [ ][ ][ ]   [ ][ ][ ]
[ ][ ][ ]   [ ][ ][ ]   [ ][ ][ ]

[ ][ ][ ]   [ ][ ][ ]   [ ][ ][ ]
[ ][ ][ ]   [ ][ ][ ]   [ ][ ][ ]
[ ][ ][ ]   [ ][ ][ ]   [ ][ ][ ]

[ ][ ][ ]   [ ][ ][ ]   [ ][ ][ ]
[ ][ ][ ]   [ ][ ][ ]   [ ][ ][ ]
[ ][ ][ ]   [ ][ ][ ]   [ ][ ][ ]

And the first player makes this move in one of the small boards:

[ ][X][ ]
[ ][ ][ ]
[ ][ ][ ]

The second player can in the next turn only play in the tiles that are marked with a !. These are tiles from the small board that are equivalent to the position of the last move.

[ ][ ][ ]   [!][!][!]   [ ][ ][ ]
[ ][ ][ ]   [!][!][!]   [ ][ ][ ]
[ ][ ][ ]   [!][!][!]   [ ][ ][ ]

[ ][ ][ ]   [ ][ ][ ]   [ ][ ][ ]
[ ][ ][ ]   [ ][ ][ ]   [ ][ ][ ]
[ ][ ][ ]   [ ][ ][ ]   [ ][ ][ ]

[ ][ ][ ]   [ ][ ][ ]   [ ][X][ ]
[ ][ ][ ]   [ ][ ][ ]   [ ][ ][ ]
[ ][ ][ ]   [ ][ ][ ]   [ ][ ][ ]

But let's say that we are already later in the game and the equivalent board is already won (three marks in a row). The next player can then play in all boards that are not won yet. (marked with !)

(note: of course later in the game there would be the same amount of X's and O's on the board => this is just for illustration purposes)

[!][!][!]   [O][ ][ ]   [!][!][!]
[!][!][!]   [ ][O][ ]   [!][!][!]
[!][!][!]   [ ][ ][O]   [!][!][!]

[!][!][!]   [!][!][!]   [!][!][!]
[!][!][!]   [!][!][!]   [!][!][!]
[!][!][!]   [!][!][!]   [!][!][!]

[!][!][!]   [!][!][!]   [!][X][!]
[!][!][!]   [!][!][!]   [!][!][!]
[!][!][!]   [!][!][!]   [!][!][!]

Supported browsers

All browser versions that support CSS Grid layout are supported. For an exact overview of which browser versions that are click here. If you detect an issue with a behaviour in a particular browser version: let us know!

Run locally

It's easy to run a local instance of this game - just clone the repository, run yarn install (installation instructions for yarn) and use:

  • yarn test for tests
  • yarn start to run
  • yarn storybook to test the components with Storybook
  • yarn prettier to format the code with Prettier

Contribute

Any type of feedback, pull request or issue is welcome. Follow the "Run locally" section of this documentation to learn how to debug the project.

License

MIT

You can’t perform that action at this time.