Tic Tac Toe Game
Free Code Camp Advanced Project - Tic Tac Toe Game
Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/KzXQgy/.
- I can play a game of Tic Tac Toe with the computer.
- My game will reset as soon as it's over so I can play again.
- I can choose whether I want to play as X or O.
- Choose to play against the computer or against another person
- Choose player 1's piece (X or O)
The game then starts with each player placing their pieces in turn and ends when there's a winner or all the spots are filled. A player wins when they have 3 of their pieces in a row/column/diagonal.
The board automatically clears and begins a new game. The winner starts. If it's a draw, the next player starts.
The entire game can be reset.
In one player mode, players play against a computer who places down their piece after a 1-2 second pause.
CSS transitions were used to fade in and out between the different screens (choose number of players, choose piece, display the game board, display the outcome) and Javscript timers were used to move between the different screens. This was also used to raise and lower the flags showing whose turn it was.
Computer AI Logic
The part that required a bit of research was implementing the computer logic if the player plays against the computer (one player mode). I didn't want the computer to simply randomly select an empty spot but instead, would try to program the logic so the computer would win (or at the very least draw). This website Python: Coding unbeatable Tic Tac Toe AI was my inspiration.
The computer logic is as follows. The computer will select the spot (being empty) that:
- will win the game
- will stop the opponent winning on the next move
- will 'fork' the board, ie create a situation where the computer will essentially check-mate the player by creating two 'winning' scenarios, of which the opponent can only block one (the opponent can block one row but then the computer will win on the other row)
- will stop the opponent from creating a 'fork' situation
- is in the centre of the board
- is in a corner
- is in a side
This shows a fork. The computer ('O') has placed a piece that creates two winning scenarios. Player 1 ('X') can block one, but ultimately the computer will win on their next move.
There are also a special case also accounted for:
- there's a special 'fork' situation involving diagonals. The computer will choose a side slot rather than the usual corner.
Where a corner or side is chosen, a randomise function will pick a random spot (so empty spots are not selected in the same order). It was fun using recursion to write this program.