Tic Tac Toe

Step 1
We will be creating the classic game "Tic Tac Toe"
Step 2
Let's start by creating a new variable to define the game screen size

Add this code:

Step 3
The game grid will be a square but there will be a text box below the game that is 100 pixels tall
Step 4
Let's make a setup function to create the canvas at the correct size

Add this code:

The setup function will run one time when the "Run" button is pressed.

The size function creates the canvas at a certain width and height.

Step 5
Now we will make a "drawGame" function that will draw a green background and call it in the setup function

Add this code:

Step 6
Save and run your code to make sure you can see the green background

Note: The height should be slightly bigger than the width

Step 7
The grid will be four lines that cuts the canvas into thirds

To create the lines we will be using these coordinates. The variable s represents the game's screen size and t represent a third of that size.

Step 8
Draw the lines for the grid

Add this code inside the drawGame function:

Hint: The line code not covered is the left vertical line. Use the coordinates from the last picture to fill in the three remaining lines.

Check Your Work
Step 9
Save and run your code

The grid should appear on the screen like so:

Step 10
We will be making a "drawMessage" function that will display a message underneath the grid
Step 11
Create a function to draw a message at the bottom of our program
Step 12
Let's also center all the text we will be using in our game

Add this code inside the setup function:

Step 13
Display the message "Player 1 Turn" by calling the "drawMessage" function

Hint: If you need help, then look at Step 10.

Check Your Work
Step 14
Run and save your code

We should see the message at the bottom!

Step 15
The next step will be setup each grid square with an index in an array

Here's an animation that shows each square's index:

Step 16
Start by creating a variable named "grid"
Step 17
Now make a function that will reset the grid as an array with nine items for each square
Step 18
Next add code to draw each grid item in the appropriate square

Add this inside the drawGame function:

Check Your Work
Step 19
Save and run your code

We should see numbers representing each index in the grid array

Step 20
Now that we know the grid is being drawn correctly, change the grid to have empty strings as the items

We will be changing the grid to a letter (X or O) if the player clicks in the appropriate box.

Change this code inside the resetGrid function:

Step 21
Add code that checks if the player clicks inside an empty grid square and assign it the letter "X" and redraw the game

Add this code to the bottom of the file:

Step 22
We just typed a lot of code but what does it mean?

The mousePressed function is called when the player clicks the mouse

In the snowflake game, we learned that mouseX and mouseY are inaccurate if the canvas is resized, which it often is so we have to adjust to the canvas resize ratio.

With the mouse location, we can now find the row and column the mouse is in with some division. We can then find the index of the grid square by using a formula: numberOfColumns * rowNumber + columnNumber.

Then we simply check if the grid square is empty at the index. If not, then we assign it the letter X and redraw the game.

Check Your Work
Step 23
The grid square should now change to the letter "X" if the player clicks inside the square
Step 24
Now it's time to add a second player to the game
Step 25
First create a boolean variable named "player1turn" and set it to true at the start
Step 26
The "?" operator is a quick way to do an "if-else" statement

Here's an example of how to shorten code using the ? operator:

Here's a link with more information

Step 27
The "!" operator is a quick way to toggle a boolean variable

Here's an example of how to shorten code using the ! operator:

Step 28
Use the "player1turn" variable to disaply the player's letter in the grid and then switch turns

Use the previous two steps to fill in the appropriate code inside the mousePressed function:

Step 29
Next change the message when drawing the game to reflect which player's turn it is

Change this code inside the drawGame function:

Notice how we can use the ? operator to simplify code that could be written longer like this:

Check Your Work
Step 30
Save and Run your code

The player's turn should now switch properly!

Step 31
We will now be adding a game over function to check if all the squares are taken
Step 32
Let's make a boolean variable named "playing" to track when the game ends
Step 33
When the game ends, make the game reset when the mouse is clicked
Step 34
Now create a function named "gameOver" that will only check (for now) if there are no more empty grid squares
Step 35
Inside the mousePressed function, add code to make the game end and display a Game Over message using the new function
Check Your Work
Step 36
Save and run your code

You should see a Game Over message once the grid is filled and the game will reset when the mouse is pressed.

Step 37
The last thing is to check if any player has gotten three of the same letter in a line
Step 38
In case you didn't know, there are 8 possible ways to win in Tic Tac Toe

The player must have three of a kind in one of these 8 lines:

Step 39
Add an array inside the gameOver function to represent these 8 potential winning lines
Step 40
We now need to use these index number to find the actual value in the grid square
Step 41
For each possible winning line, we are going to make a temporary array to hold the grid values
Step 42
Then check if the array does not have an empty square and has three matching letters

Hint: Step 34 shows how we checked if the grid has no empty squares

Check Your Work
Step 43
Save and run your code

The game should end if there is the same three letters in a line

Step 44
[OPTIONAL] Draw a red line when three letters are in a row
Check Your Work
Step 45
You have completed Tic Tac Toe!
Tic Tac Toe Info


MVCode Clubs

Created By



One-Lesson Javascript Games

Access Level


For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach