This is a simple Tic Tac Toe game forked from code by Eduonix as part of their ‘Projects in Javascript and JQuery Course’.
I started by creating a container div in HTML which would hold the gameboard and added list elements inside to create the different squares. Next I created a title and button and styled everything with CSS to make it more user friendly.
For the functionality I set up some game variables and assigned the li items to ***. I then wrote functions to take turns, check for a winner, check if a square was taken and reset the board.
The tricky part was creating some AI to make the opponent a little more challenging. To do this I created a function ran through a series of steps to choose the best move. It starts by checking each row and column for two of its own symbols, then the opponents symbols and fills the missing space if it exists. If there are not two alike symbols then it chooses a random available square.
Finally, I spent some time testing the game to iron out any bugs or unexpected behaviour. To do this I used Chrome dev tools to look at what was happening at different stages of the game.
