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.
Here’s the full YouTube video link: How to make Tic Tac Toe Game in Scratch | Easy Scratch Tutorial for Beginners ❌⭕ | Kodex Academy
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 – Tic-Tac-Toe Game in Scratch
We’ll build the game in the following major steps:
- Setup stage and backdrop
- Create the square sprite(s) for the 3×3 grid
- Create costumes for “empty”, “player1” (X or yellow‐cat face), “player2” (O or white cat face)
- Use cloning or duplicates to populate the 9 grid positions
- Create variables:
player,counter, maybenumber - Use a list to record which cell is filled by which symbol (or number)
- Code the click logic: on sprite click → switch costume depending on player, change
playervariable, update list and counter. - Code win-condition logic: check all 8 winning combinations (3 rows, 3 columns, 2 diagonals) for either symbol. If a symbol wins → broadcast message → backdrop switch / show result. Also detect draw when counter reaches 9.
- Add enhancements: sound effects, graphic effects, resetting, animations.
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 loopsOption 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 ( … ) // assign number 1-9 per sprite
add [ ] to [board v] // add blank for each of the 95. 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]
end6. 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 … ) or
…> then
broadcast [YWin v]
end
// do same for player W:
if <… (for W) …> then
broadcast [WWin v]
end
// check draw
if <(counter) = [9]> then
broadcast [Draw v]
endThen 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
endYou’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.
endFor 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
ende) 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.
