How to make Tic Tac Toe on Scratch

In this tutorial, we will show you how to make a simple Tic Tac Toe game on Scratch using variables and lists. Follow along as we break down the logic to help you create your own Tic Tac Toe game. Here's what our completed project will look like.

1. One button, three costumes

There are three rows and three columns which makes for a total of 9 possible slots where X and O are placed. Let’s start with one Sprite: Button. Make two more costume: One for X and one for O. The third one will be used to represent an empty slot:

How to Make Tic Tac Toe on Scratch

2. Our platform

Simply right-click Button Sprite and select duplicate to make 8 more, then arrange them side by side into three rows and three columns:

A picture containing graphical user interface

Description automatically generated

3. Starting the game

Now is a good time to think of the first thing we should see once the game starts. We first want to see the third costume for the button (the one without the X/O). We also want to lock in a position for each button just in case they get shuffled around during the game:

Graphical user interface, text

Description automatically generated

4. Whose turn?

Next, let’s create a variable to keep track of our turns. Since the game always starts with an X, we’ll use the mod block to display costume with an X if the number of clicks is odd, otherwise the costume with the O will show:

Chart

Description automatically generated

5. List variables for X’s and O’s

Now that we can keep track of turns or XO’s, we need to create a list variable to store that information so that we can determine the winner. In Variables, click on Make a List for an X list and do the same for an O list. Then, use the “add ‘thing’ to” block to add to our lists. Do this for the rest of the Buttons but be sure to change the text for our list variables (x-button2; x-button3, o-button2, o-button3):

Graphical user interface

Description automatically generated

6. Determine what’s inside and who won

And finally, it is time to check what’s inside of our list variables to announce a winner. There are a total of 8 possible ways to win (each row, each column, and diagonally for each side). If a list has one of the three descriptions that fall under a winning list, then we need to announce the winner. For example, if X list has x-button1, x-button2, and x-button3, which represent the first row of the game, then we have a winner. Use if/then condition to check all 8 possible solutions for both the X and the O list:

A screenshot of a computer

Description automatically generated with low confidence