Tic-Tac-Toe is a game played accross the world. Two players play at a 3x3 board of empty squares. One player goes first, and marks one of the nine squares with an "X". The second player goes next, and marks one of the remaining squares with an "O". The players repeat this until either one of the players has three of their symbol in a row horizontally, vertically, or diagonally, or until every square in the board has been taken. If a player achieves a three in a row, they have won the game. If the board fills up first, the game is declared a draw.
The program starts at the menu, where the user has three options. Clicking on "How to Play" will take them to an instruction manual that will provide information on how to play Tic-Tac-Toe. Clicking on "Settings" will take them to the settings menu, where they have many options:
- Volume slider, which allows the user to change the volume of the game
- Suggestions, which allows the user to turn off suggestions
- Player icons, which changes the icon that represents either player one or player two Clicking on "Play" will begin the game of Tic-Tac-Toe.
Once in the game, at the top, the user will get useful information, including:
- The score
- Who's turn it is
- Who won the game
Once the game ends, the user will have four options:
- "Main Menu", which will take the user back to the main menu. This will reset the scoreboard
- "Settings", which will take the user to the settings menu
- "Play Again", which will reset the board and allow the user to play another game
- "Share this Round", which will open a popup that allows the user to either copy a text version of the game to their clipboard or download an image of the game
- Two player Tic-Tac-Toe
- A computer opponent the user can play against
- Ability to switch the turn order every round
- Suggestions that provide the player with what the board will look like if they choose a location
- The ability to save and download each round
- Instruction guide on how to play Tic-Tac-Toe
- Up to thirteen icons per player
- Seven custom themes
- Fullscreen capabilities
- Audio sounds
- Settings saving through use of cookies
Information on different types of HTML elements and their CSS:
Fonts used:
Use of LinkedIn and Github logos at footer of page:
Tool used to produce audio sounds:
html2canvas library that allowed for gameboard to image processing: