How to Make Tic Tac Toe on Scratch

Ready to learn how to make Tic Tac Toe on Scratch? With Scratch coding, you can bring this traditionally paper-and-pencil game for two players into the digital realm. In this game, each player makes one type of mark, either: X or O, and each player takes turns marking the spaces in a 3×3 grid with their mark. The winner is the player who gets three in a row!

So today, we'll guide you and your child through simple steps to bring this game to life. We'll also provide you with a few fun examples of ways to get creative with your version of the game. Let's get started!

Join a live online award-winning Scratch class for kids, designed by professionals from Google, Stanford, and MIT, to enjoy expert guidance while you make fun games.

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:

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:

3. Start 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:

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:

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):

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:

Need Help Troubleshooting? Here Are a Few Tips

Common Issues and Bugs in Tic Tac Toe Tutorial and Solutions

1. Costumes Not Switching Correctly:
   • Issue: The button sprites are not switching to X or O when clicked.
   • Solution: Ensure each button sprite has three costumes (empty, X, and O) and that the next costume block is correctly linked to the when this sprite clicked event. Verify the logic in the variable tracking the turns.
2. Buttons Getting Shuffled:
   • Issue: Buttons move out of position during gameplay.
   • Solution: Use the go to x: y: block to lock each button sprite’s position at the start of the game. Ensure this block is included in the when green flag clicked event.
3. Turn Tracking Not Accurate:
   • Issue: The game does not correctly alternate turns between X and O.
   • Solution: Create a variable named turn to track the number of clicks. Use the mod operator to determine the turn. Ensure the variable increments correctly with each click.
4. Winner Not Determined Correctly:
   • Issue: The game does not accurately determine the winner.
   • Solution: Ensure lists are correctly storing X and O positions. Check the logic in the if/then blocks used to determine winning combinations. Verify each list updates accurately with the correct positions.
5. Lists Not Updating:
   • Issue: The X and O lists are not updating with each click.
   • Solution: Double-check that the add item to list block is used correctly for each button. Ensure the correct list (X or O) is being updated based on the current turn.
6. Game Not Resetting Properly:
   • Issue: The game does not reset after a win or draw.
   • Solution: Add a when green flag clicked event to reset all variables, lists, and button costumes. Ensure the game board returns to its initial state.

Review Key Programming Concepts We Used

• Sprites and Costumes:Sprites: The characters or objects in a game (e.g., buttons for Tic Tac Toe).Costumes: Different appearances for a sprite. Here, each button sprite has three costumes (empty, X, and O).
• Variables:Turn Tracking: A variable to keep track of the current player's turn.List Variables: Used to store the positions of X's and O's to determine the winner.
• Events:When Green Flag Clicked: An event to initialize the game, setting up the board and resetting variables.When This Sprite Clicked: An event to handle player moves, switching costumes, and updating lists.
• Control Structures:If/Then Statements: To check conditions, such as determining if a player has won or if a button has already been clicked.Loops: To repeat actions, such as initializing the game board.
• Operators:Modulus (mod): To alternate turns between players by checking if the turn number is odd or even.
• Lists:Creating and Updating Lists: To keep track of which squares contain X's or O's, allowing the game to check for winning combinations.

Examples of Tic Tac Toe on Scratch

Now that you've created an awesome Tic Tac Toe game, here are a few variations to inspire your creativity.

1. A semi-challenging Tic-Tac-Toe by cairparavel

Want to play against a computer and have the chance to win? Check out this Tic Tac Toe game by cairparavel where the computer always goes first.

2. Stepping it up with Gato y Raton by carlosthan

Perhaps you like the opportunity to win against a computer, but you prefer to go first? Check out Gato y Raton by carlosthan – a Tic Tac Toe game that always waits for its opponents to go first. Just and don’t underestimate the brains behind the curtesy.

3. Unbeatable Tic-Tac-Toe by crazy_ted

Funny username but a very serious game. This Tic Tac Toe game truly lives up to its name: it is unbeatable!! It also uses cloud version and keeps a global score of wins, loses, and ties.

Make Tic Tac Toe on Scratch

In this tutorial you’ve learned how to make a simple Tic Tac Toe game on Scratch using variables and lists. We’ve also covered how to switch back and forth between X and O based on turns, and we’ve implemented a way to determine a winner based on the 8 possible solutions for both X and O players.

Learn how to build games like this by taking our advanced Scratch course, designed by professionals from Google, Stanford, and MIT! You can also get started with any of our free coding classes for kids.

Ready for more fun? Find out how to make a Pacman game on Scratch.

Written by Sandra Dizdarevic, a Create & Learn instructor with 6 years of experience teaching STEM to children in the 3rd through 11th grade. She has an Undergraduate as well as a Masters Degree in Management Information Systems from UNO.