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 fun 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!

To explore more about Scratch coding, 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

In Tic Tac Toe, there are three rows and three columns which makes for a total of 9 cells where X and O are placed. We will use the sprite called Button as the base for our X’s and O’s.  Make two more costumes: One for X and one for O. The third one will be used to represent an empty slot. It should look like the image below in the costumes tab:

2. Game platform

Simply right-click (or click with two fingers at the same time on a chromebook) the Button Sprite below the Scratch stage and select Duplicate to make 8 more, then arrange them side by side into three rows and three columns. The image below shows you where you need to right-click:

3. Start the game

Now is a good time to think of the first thing we want the player to see once the game starts. We first want to see the third blank costume for the button. We also want have all buttons return to their starting position 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 modulo block from the math operators category. The modulus block reports the remainder when the first number is divided by the second. Click here to learn more about the mod block from the Scratch wiki! This is a very useful block that can be used to determine even or odd numbers in your projects. For this game, we will use it to display the costume with an X if the number of clicks is odd, otherwise when the number of clicks is even, the costume with the O will show:

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

Now that we can keep track of whose turn it is,, we need to create a list variable to store that information so that we can determine the winner. In the Variables category, 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. Copy this code to each 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 at the end of the game. There are a total of 8 possible ways to win (each of the three rows, each of the three columns, and both diagonal lines). We have to code each individual win condition to make the program able to announce the right winner at the end of the game. 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. This code should be copied to every sprite so that it will declare the winner as soon as they have won:

TIP: It might be helpful to write the variable names on a tic tac toe board on a piece of paper. Then you can draw a line through each winning condition that you have already coded. This will help you make sure you don’t miss anything and also help you check which numbers count as a win!

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:
  • Modulo (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 courtesy.

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 versions 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.