To take a break from the other projects this weekend I worked on a Tic-Tac-Toe game in JavaScript. The basic instructions I had for myself was it needed to be able to be played by 1 or 2 people.
I started with creating the game for 2 players. Thinking that if I can get the two players then it would be easier to add the code for the computer to take over the second player.
Got the bases for the 2 player done, then from there I created a 1 player version of the game. I decided I won’t go into trying to create an AI-ish type for this and have the computer just play a random open spot.
Quick code write-up:
A variable ‘flag’ to tell if it’s X or O’s turn; O could also be the computer and use that to help to help trigger its move. I used the normal Boolean idea of 1 or 0, could have used ‘X’ and ‘O’.
Added a variable, ‘players’, to keep track of how many players this is passed from the radio buttons, this being 0 for base, game not started, then 1 or 2 for player count.
Set the board to disabled, not allowing any plays till you select the number of players and hit start. When the player hits start it assigns the number of players, disables the number of player choices and opens the board to be played.
Have functions that controls the locking down the board and the player buttons (openBoard and lockPly). To trigger it, we pass through it either ‘true’, to lock board or ‘false’, to open it.
Have an array and an internal function to check if any spaces are empty and add those to the array. The array will reset itself each time a player moves. The other idea was to have a main array then pop the cells off as they are played; but this is such a small program I thought this might be simplier.
The clear board ‘clrBrd’ function is used when start or reset is hit. Reset is also reloading the screen. This also changes the flag back to one, in case it was Os turn.
The computers move is triggered after player X moves the flag changes to 0, causing the function (computerPlayer) to run. The computer player function will take the array, of empty cells, and then run random to select a cell to play. It will then pass it’s play on to the system like it’s a human player. This makes for a different play each time.
The toChk function runs first when the player selects the cell. This will mark the cell to the right X or O and then change the flag.
The second main function is ‘theGame’ this is triggered when a cell on the board is clicked. It gets the values from the board, marks on the board and checks if there is a winner or tie; then displays the next player.
To check for winners are two big if statements with ‘or’ and ‘and’ clauses for the various scenarios of how to win. Tie is just going through and checking if no empty spaces, with the idea that if it’s gone through X or O wins and didn’t trigger and now if no spaces are empty then it’s a tie.
At the end of the turn it looks if it’s a 1 player game and X just played it triggers the computer’s turn. When game is won or tied the player numbers will open again to be selected. Then when ‘Start’ is hit again it will clear the board.
Program:
https://www.lynnamacher.com/programs/tictactoe/ticTacToe.html
Github:
