Tic-Tac-Toe in JavaScript

August 14, 2022

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.





Related Articles

Website Contact form using AWS

Website Contact form using AWS

For the next iteration of the HTML form was to set it up to send an email to the web owner using AWS. The purpose behind this is, if you have a HTML site and don’t want to purchase a monthly plan or build and maintain server software. Using AWS for this functionality...

read more
HTML with JavaScript contact form

HTML with JavaScript contact form

Link to the form: https://www.lynnamacher.com/pdf/contactForm_V1.html This is created to be basic test for an AWS contact form test. The full form when filled out will send an email through AWS to the site owner. Instead of creating the normal test form I try to...

read more
Sometimes the low-tech approach is the best way

Sometimes the low-tech approach is the best way

Have a family member looking to get me some family videos they had digitized, in one big file, about 80GB (they may not have optimized or know how). The need: The family member’s internet connection isn’t the best and could get disconnected at times, when this happens...

read more

Pin It on Pinterest

Share This