GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects â†’ ultimate-ttt â†’ ultimate-ttt

ultimate-ttt / ultimate-ttt

Licence: MIT License
Play "Ultimate Tic-Tac-Toe" in the browser 🚀

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Labels

reactreduxtic-tac-toecss-gridweb-gameultimate-tic-tac-toe

Projects that are alternatives of or similar to ultimate-ttt

ultimate-ttt-rl
Reinforcement Learning based Ultimate Tic Tac Toe player
Stars: ✭ 20 (+0%)
Mutual labels:  tic-tac-toe, ultimate-tic-tac-toe
ultimate-tictactoe
An implementation of ultimate tictactoe in Elm
Stars: ✭ 15 (-25%)
Mutual labels:  tic-tac-toe, ultimate-tic-tac-toe
responsive-css-grid
A super-lightweight, responsive, 8-column grid based on box-sizing
Stars: ✭ 46 (+130%)
Mutual labels:  css-grid
Katana
Katana is CSS Layout System made with Flexbox
Stars: ✭ 57 (+185%)
Mutual labels:  css-grid
grid-layout
grid-layout is a layout engine which implements grid, can use in canvas/node-canvas
Stars: ✭ 43 (+115%)
Mutual labels:  css-grid
grid-examples
Learn about the power of CSS grid
Stars: ✭ 49 (+145%)
Mutual labels:  css-grid
LayerMotionSlideshow
A CSS Grid-based slideshow template with a layer motion effect on the main image and on the title.
Stars: ✭ 94 (+370%)
Mutual labels:  css-grid
TicTacToe-SwiftUI
Unidirectional data flow tic-tac-toe sample with SwiftUI.
Stars: ✭ 22 (+10%)
Mutual labels:  tic-tac-toe
unitscss
UNITS is a simple and beautiful CSS component set.
Stars: ✭ 13 (-35%)
Mutual labels:  css-grid
buldy
🎈 Modern CSS framework distilled from the best of larger frameworks
Stars: ✭ 18 (-10%)
Mutual labels:  css-grid
40-lines-of-Sass
Full featured flexbox grid in 40 lines of Sass
Stars: ✭ 20 (+0%)
Mutual labels:  css-grid
boardgame
An online board game playground. Including lobby, chat
Stars: ✭ 11 (-45%)
Mutual labels:  tic-tac-toe
grapesjs-plugin-toolbox
Tools for grapesjs
Stars: ✭ 17 (-15%)
Mutual labels:  css-grid
tictactoe-ai-tfjs
Train your own TensorFlow.js Tic Tac Toe
Stars: ✭ 45 (+125%)
Mutual labels:  tic-tac-toe
Gangster-Legends-V2
A free to use text-based PBBG / MMORPG script
Stars: ✭ 48 (+140%)
Mutual labels:  web-game
awesome-grids-css
A curated list of awesome Grids CSS System 🤘
Stars: ✭ 34 (+70%)
Mutual labels:  css-grid
slaytheweb
Slay the Web is a singleplayer, deck builder, roguelike card crawl game for the web based on Slay the Spire
Stars: ✭ 57 (+185%)
Mutual labels:  web-game
dash-flexbox-grid
Wrapper around react-flexbox-grid for Plotly Dash
Stars: ✭ 19 (-5%)
Mutual labels:  css-grid
alpha-zero
AlphaZero implementation for Othello, Connect-Four and Tic-Tac-Toe based on "Mastering the game of Go without human knowledge" and "Mastering Chess and Shogi by Self-Play with a General Reinforcement Learning Algorithm" by DeepMind.
Stars: ✭ 68 (+240%)
Mutual labels:  tic-tac-toe
tictac
Un-winnable game of Tic Tac Toe using MinMax
Stars: ✭ 15 (-25%)
Mutual labels:  tic-tac-toe
View All Similar Projects âž”

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

Demo

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

demo of the game

Game Rules

For an interactive explanation you can go to our how to play page.

Ultimate Tic-Tac-Toe is played with 9 small tic-tac-toe boards. Each turn a player marks a field. When you get three signs in a row (diagonal, vertical or horizontal) on a small board, you’ve won that board. To win the game, you need to win three small boards in a row.

But here's the twist: Each turn the previous move of your opponent dictates in which board you can move next.

For example 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][ ]
[ ][ ][ ]   [ ][ ][ ]   [ ][ ][ ]
[ ][ ][ ]   [ ][ ][ ]   [ ][ ][ ]

If your opponent sends you to a board that's already won, you can make your move on any of the other boards. If one of the small boards results in a tie, the board counts for neither X nor O.

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 (installation instructions for yarn) and use:

  • yarn test for tests in watch mode
  • yarn test:int for executing browser tests (currently requires bash)
  • 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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].