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

Python – Birthday List

Python – Birthday List

Birthday List Python Program Worked on a project for a publication to pull the birthdays of their members quickly. To help demonstrate what they were working with; they had two Word files containing tables of birthday months, the dates for the month were not in order...

read more
Microsoft Certified: Azure AI Fundamentals

Microsoft Certified: Azure AI Fundamentals

Passed the Microsoft Certified: Azure AI Fundamentals Certification:https://learn.microsoft.com/api/credentials/share/en-us/LynnAmacher-1690/4DB4563B79AA3C11?sharingId=9196330BBB36EAF4 The graphic was created in Microsoft Image creator with DALL-E where I added the...

read more
AI as your assistant

AI as your assistant

With all the talk of AI will be taking your job and articles like you don’t need to learn coding AI will do it all for you. I’ve been playing around with AI, decided to try to see how much of what AI can be done for me. I use AI generical throughout the post and not...

read more

Pin It on Pinterest

Share This