How to Make a Tic-Tac-Toe Game in Scratch - Easy Scratch Tutorial for Beginners

Published by Kodex Academy — Learn. Build. Innovate.
Scratch Game
How to Make a Tic-Tac-Toe Game in Scratch - Easy Scratch Tutorial for Beginners

Introduction – Tic-Tac-Toe Game in Scratch

Hello everyone, welcome to Kodex Academy. Today, we are going to build the all-time favourite logic game in Scratch: Tic-Tac-Toe. In this game two players take turns making X and O on a 3×3 grid. The first one to get three in a row — across, down or diagonally — is the winner. But be careful: if you don't think ahead, your opponent might block your move.

By the end of this tutorial you will have your very own interactive Tic-Tac-Toe game that you can play with your friends right inside Scratch.

Feel free to play it, follow along and then use this blog post as your written reference.

Why build Tic-Tac-Toe Game in Scratch?

  • Scratch is a drag-and-drop visual programming environment that is perfect for beginners and for learning game logic.
  • A Tic-Tac-Toe game covers many key ideas: sprites and costumes, variables, lists (or arrays), cloning or duplicates, detecting win-conditions, turn-taking logic, broadcasting messages, and more.
  • Once you build it, you can easily enhance it (see later) to multi-player, AI opponent, scoring, custom graphics, animations, sound effects, etc.

Overview

Before we dive into the coding, let's understand what we'll be building:

  • Game Board: A 3x3 grid drawn on the stage
  • Game Pieces: X and O sprites that players can place
  • Turn System: Alternates between X and O players
  • Win Logic: Checks for 3 in a row (horizontal, vertical, diagonal)
  • Draw Logic: Detects when board is full with no winner
  • Restart Feature: Allows players to start a new game

We'll use variables to track the game state and lists to store the board positions.

Step-by-Step Tutorial (with code blocks) – Tic-Tac-Toe Game in Scratch

Below we break down each step with code samples and explanations.

1. Setup the stage and backdrop

  • In Scratch choose a backdrop (for example "Stripes" as in the video).
  • On the green-flag event, set the backdrop and initialise the game. Example code in the Stage or a control sprite:
when green flag clicked
switch backdrop to [Stripes v]
broadcast [initGame v]
  • Optionally hide lists/variables you don't want to see.

2. Create the grid sprite

  • Create one sprite (e.g. a square) which will act as a cell of the Tic-Tac-Toe board.
  • Go to its Costumes tab:
    • Costume 1: blank (say "Empty") – a white square, light outline.
    • Costume 2: yellow cat face (representing X / player1) – perhaps paste the cat face and colour appropriately.
    • Costume 3: white cat face (representing O / player2) – adjust as per video transcript.
  • Rename the costumes: e.g. Empty, YellowCat, WhiteCat.

3. Populate 9 cells (via cloning or duplicates)

Option A – Using clones (recommended for cleaner code):

when I receive [initGame v]
go to x: (-100) y: ( 100)   // top-left cell (adjust coordinates)
set costume to [Empty v]
show
go to front
repeat (2)  // create two additional in this row
  create clone of [myself v]
  change x by (100)     // adjust spacing
end
// then after row one, go to next row:
create clone of [myself v]
change y by (-100)
set x to -100
repeat (2)
  create clone of [myself v]
  change x by (100)
end
// repeat similarly for third row or use nested loops

Option B – Duplicate sprite manually 9 times (as done in the transcript):

  • After placing first cell, duplicate it twice for the row, then duplicate the row sprites twice and shift down for the other rows.

4. Variables and list

  • Create variable player (for all sprites).
  • Create variable counter (for all sprites) – counts how many cells have been filled.
  • Create list board (for all sprites) – will hold 9 items, each representing the state of a cell: e.g. "Y" for yellowcat, "W" for whitecat, or blank.
  • Create variable number (for sprite only) – to identify which cell (1-9) the clone represents.
when I receive [initGame v]
delete all of [board v]
set [counter v] to [0]
set [player v] to [1]         // player1 starts
// ...
set [number v] to (clone index)      // assign number 1-9 per sprite
add [ ] to [board v]         // add blank for each of the 9

5. On cell click logic

In the cell sprite:

when this sprite clicked
if <(item (number) of [board v]) = [ ]> then   // only if empty
  if <(player) = [1]> then
    switch costume to [YellowCat v]
    replace item (number) of [board v] with [Y]
    set [player v] to [2]
  else
    switch costume to [WhiteCat v]
    replace item (number) of [board v] with [W]
    set [player v] to [1]
  end
  change [counter v] by (1)
  play sound [coin v] until done
  change color effect by (25)    // optional effect
  broadcast [checkWin v]
end

6. Check win / draw logic

In a separate sprite (or the same sprite using when I receive [checkWin]):

when I receive [checkWin v]
    // define combinations as list of lists or coded manually
    // Example for player Y:
    if <((item (1) of board) = [Y] and (item (2) of board) = [Y] and (item (3) of board) = [Y]) or
        ((item (4) of board) = [Y] and (item (5) of board) = [Y] and (item (6) of board) = [Y]) or
        ((item (7) of board) = [Y] and (item (8) of board) = [Y] and (item (9) of board) = [Y]) or
        ((item (1) of board) = [Y] and (item (4) of board) = [Y] and (item (7) of board) = [Y]) or
        ((item (2) of board) = [Y] and (item (5) of board) = [Y] and (item (8) of board) = [Y]) or
        ((item (3) of board) = [Y] and (item (6) of board) = [Y] and (item (9) of board) = [Y]) or
        ((item (1) of board) = [Y] and (item (5) of board) = [Y] and (item (9) of board) = [Y]) or
        ((item (3) of board) = [Y] and (item (5) of board) = [Y] and (item (7) of board) = [Y])> then
        broadcast [YWin v]
    end
    // do same for player W:
    if <((item (1) of board) = [W] and (item (2) of board) = [W] and (item (3) of board) = [W]) or
        ((item (4) of board) = [W] and (item (5) of board) = [W] and (item (6) of board) = [W]) or
        ((item (7) of board) = [W] and (item (8) of board) = [W] and (item (9) of board) = [W]) or
        ((item (1) of board) = [W] and (item (4) of board) = [W] and (item (7) of board) = [W]) or
        ((item (2) of board) = [W] and (item (5) of board) = [W] and (item (8) of board) = [W]) or
        ((item (3) of board) = [W] and (item (6) of board) = [W] and (item (9) of board) = [W]) or
        ((item (1) of board) = [W] and (item (5) of board) = [W] and (item (9) of board) = [W]) or
        ((item (3) of board) = [W] and (item (5) of board) = [W] and (item (7) of board) = [W])> then
        broadcast [WWin v]
    end
    // check draw
    if <(counter) = [9]> then
        broadcast [Draw v]
    end

Then handle the results:

when I receive [YWin v]
wait (0.5) secs
switch backdrop to [Y Wins v]
play sound [connect v]
stop [all v]

when I receive [WWin v]
wait (0.5) secs
switch backdrop to [W Wins v]
play sound [connect v]
stop [all v]

when I receive [Draw v]
wait (0.5) secs
switch backdrop to [Draw v]
play sound [boing v]
stop [all v]

7. Reset / start new game

On green flag:

when green flag clicked
broadcast [initGame v]

And in initGame, include logic to hide or reset all clones/sprites, back to blank, reset variables/list etc.

Enhancement Features & Their Code

Here are some ways to enhance the basic game and make it more fun, interactive, and polished – along with code snippets.

a) Highlight winning line

Once a player wins, highlight the three cells of the winning line (e.g., change color, glow, animate).

// When Y wins (in checkWin), also store the winning indices, e.g. winCells = [1,2,3]
broadcast [highlight v]
when I receive [highlight v]
  if <(item (number) of [winCells v]) = [yes]> then
    repeat (10)
      change color effect by (25)
      wait (0.1) secs
    end
  end

You'll need winCells list or variable to hold the indices of the winning line.

b) Two-player vs. Computer mode

Add the option to play against computer instead of two human players. Use lists or logic to compute computer move (e.g., random open cell).

when I receive [computerTurn v]
  wait (0.5) secs
  set [validMoves v] to [ ]       // list of open cells
  repeat (9)
    if <(item (n) of [board v]) = [ ]> then
      add (n) to [validMoves v]
    end
    change [n v] by (1)
  end
  set [choice v] to (pick random (1) to (length of validMoves))
  set [cellNumber v] to (item (choice) of validMoves)
  // broadcast a custom message like "move cell #cellNumber"
  broadcast [moveCell_(cellNumber) v]

Then in the cell sprite:

when I receive [moveCell_#]
  if <(number) = (#)> then
    // mimic click logic: switch costume, update board, etc.
  end

For a more advanced AI (minimax) you can refer to the instructables logic above.

c) Scoreboard & Rematch

Add variables scorePlayer1, scorePlayer2, scoreDraws. Update when a game ends. Add a "Play Again" button sprite to restart with green flag or its own custom message.

when I receive [YWin v]
  change [scorePlayer1 v] by (1)
  // show scoreboard update
  wait (2) secs
  broadcast [resetGame v]

when I receive [resetGame v]
  broadcast [initGame v]

d) Sound and Graphic Effects

  • On each cell click: play sound [coin v] until done
  • On win: play sound [connect v]
  • On draw: play sound [boing v]
  • On hover (optional):
when green flag clicked
  forever
    if <(mouse down?) and (touching [mySprite v])> then
      change size by (10)   // a quick zoom effect
      wait (0.1) secs
      change size by (-10)
    end
  end

e) Custom Symbols, Themes, Animations

  • Replace "X" and "O" (or yellow cat/white cat) with custom images (e.g., superheroes, animals) for each player.
  • Create animated costumes (e.g., when you switch to player symbol, add "pop" animation: costume changes quickly or scale up/scale down).
  • Use intro/backdrop transitions: e.g., start screen, title animation, then switch to board.

Game Play and Scenarios Covered

We have covered multiple scenarios:

  • Two-player local game in Scratch (player1 vs player2)
  • Game logic: winner detection + draw detection
  • User interface / visuals: customizing symbols (yellow cat / white cat), animations
  • Game enhancement: scoreboard, reset/rematch, sound/visual effects
  • Variant: Single-player vs computer (AI) mode
  • Theme variation: custom symbols, mobile layout, cloud variables (multiplayer) for advanced users
  • Educational scenario: teaching variables, lists, conditionals, branching logic in Scratch

Conclusion: Build, Play, and Learn with Scratch!

Creating a Tic-Tac-Toe game in Scratch is more than just a fun coding project – it's an excellent way to learn core programming concepts like logic, loops, variables, lists, events, and conditions, all within a visual and beginner-friendly platform. By following this Scratch game tutorial, you've not only built a classic two-player logic game but also learned how to make your projects more engaging with animations, sound effects, and win detection logic.

With your completed Tic-Tac-Toe game, you can now:

  • Challenge your friends in a friendly two-player match ??
  • Experiment with new features such as AI opponents, scoring, or colorful themes ??
  • Use what you've learned to create your own games in Scratch, like Connect Four, Snake, or even your own story-based adventures ??

Remember, every great programmer started with a simple game — and today, you've built one yourself! Keep exploring, keep experimenting, and continue growing your coding creativity with Scratch programming games.

Call to Action

  1. Don't forget to check out the full video tutorial: How to make Tic Tac Toe Game in Scratch | Easy Scratch Tutorial for Beginners ?? | Kodex Academy
  2. Like, comment & share the video
  3. Visit kodexacademy.com
  4. Subscribe to the Kodex Academy YouTube channel for deeper Scratch content.
← Back to All Blogs