Tic Tac Toe!

• 

  Screencapture of the Tic Tac Toe Game. Player O won!

Inspiration

As part of the Hacakthon, I'd like to try to build a Tic Tac Toe game using React.JS and JavaScript/TypeScript, and CSS.

What it does

The project is a simple simulation of the popular game, Tic-Tac-toe

How we built it

First, I did a quick research of tic-tac-toe games, and broke down the rules of the game.

What are its requirements? What kind of components do I want? How do I want to play it? And once done, can I add any stylizing to make it stick out?

So after breaking down the rules of Tic-Tac-Toe, I realized that I'd need 4 components, one for a single Square space, one for the board with 3 rows & 3 columns, one to render the game to make it playable, and one to display it. Instead of making it all into one file and different functions, I thought using React.JS would help cover this and make things more cost effective for the code. TypeScript came to mind since the data would have to handle strings and numbers, and keeping these types, as well as say empty values or null, was vital to keep the program in check.

I stylized the game in minor ways to make it presentable, and from there, I came up with a few features after looking further into online tic-tac-toe games and thinking what I'd like my game to have too.

Challenges we ran into

Being able to chose which symbol you want to start with. I feel like that makes the game more personal and different every time one chooses to play it. Like, it took a few tries to figure that out.

Accomplishments that we're proud of

The functionality of the game and the features made such as restarting it, tracking the player's moves, and being able to chose which symbol to start with at the beginning.

What we learned

That developing a game like tic-tac-toe is fun, and really pushing one's skillsets. I had to learn more about how to manipulate data when its clicked on and transferring around between each file was very tricky.

What's next for Tic Tac Toe!

I'd like to add animated visuals to the game such as making a board that flips the squares like cards when you click on them, and the cards will reveal the symbol you chose to play with. Perhaps a scoreboard of a games played, requiring possibly to use databases!

Built With

• css3
• html5
• javascript
• react.js
• typescript