Do you often consider your own mortality, or perhaps listen to copious amounts of heavy metal? Do you also enjoy playing tic-tac-toe but think it might detract from your edginess? โ๏ธ vs ๐ is a new version of the classic tic-tac-toe game built just for folks like you!
The goal for completing this project was to have a fully functioning tic-tac-toe game. The game should declare a winner, declare if there was a draw, show how many wins each player has and have a time-out at the end of each game to reset the board.
- Fork this repo
- Clone down to your machine
- Access cloned directory
- Run "index.html"
This tic-tac-toe game can be played two different ways. You can click the cell you wish to play when it's your turn. Alternatively, use the tab key to move around the gameboard, hitting the space bar to select the cell with your token. Once a player acheives a win, all the cells are disabled, and the winner is declared. There is a 5 second hold before the game reloads and the winner's tally is updated.
If there isn't a winner for the game, it's declared a draw. Again, there is a 5 second hold before the game resets.
I found this project to be very challenging. Once I was able to figure out how my classes would interact with my main.js file it clicked into place.
I wanted to make the game playable with the keyboard, so I opted to use inputs for HTML instead of divs, which made the styling somewhat more challenging. I also tried for a long time to try to figure out a way to get the winning boards to render on the page under each player, but wasn't able to solve it using the gameboard objects that I had built.
I originally tried to incorporate my "it's a draw" logic a different way, but for some reason it would never fire despite my best efforts with return and break statements. I finally figured out a way to make it work, and I like the logic there. The evaluateBoard method in my game class is giant. I worked for a while trying to refactor it, but I wasn't able to come up with a good way to break it apart and keep the functionality.
Sarah Fitzsimons GH
Functionality | Structure | Styling |
![]() |
![]() |
![]() |