Smart Tic Tac Toe – PictoBlox Block Coding

In this project you'll build a two-player Tic Tac Toe game using PictoBlox block coding. Players take turns clicking squares to place X and O. The game detects wins and draws, shows who won, and has a reset button to start over.

You'll learn about variables, broadcast messages, costumes and conditions (if/else blocks). No coding experience is needed.

Tools required to create this project are:

1. Pictoblox Software: Download PictoBlox | Windows, MacOS, Linux, Chromebook, Android & iOS
2. Laptop/PC

The game works with a few ideas:

1. Each of the 9 squares is its own sprite, named C1 to C9.
2. Each square has a variable that remembers what is in it: 0 is empty, 1 is X, and 2 is O.
3. A Turn variable tracks whose go it is: 1 for X and 2 for O.
4. After every move, the game checks all 8 winning lines.

The squares are numbered like this:

C1,C2,C3,C4,C5,C6,C7,C8,C9

1. Each of the 9 squares is its own sprite, named C1 to C9.
2. Each square has a variable that remembers what is in it: 0 is empty, 1 is X, and 2 is O.
3. A Turn variable tracks whose go it is: 1 for X and 2 for O.
4. After every move, the game checks all 8 winning lines.

1. Click the Stage and open the Backdrops tab. Draw or upload a Tic Tac Toe grid.
2. Go to the Variables palette in the Code tab and click Make a Variable.
3. Create each of these, choosing For all sprites:
4. Turn
5. Winner
6. Game over
7. Moves
8. C1, C2, C3, C4, C5, C6, C7, C8, C9

1. Add a new sprite (paint your own) and rename it C1 in the sprite info panel.
2. Open the Costumes tab and create three costumes with exactly these names:
3. Empty: a large, nearly invisible white square. Make it about twice as wide as the X or O. PictoBlox only detects clicks on visible pixels, so a tiny Empty costume can't be clicked.
4. Block-x: your X.
5. Block-o: your O.
6. Set the sprite's size to about 65 and its position to x = -100, y = 100.

A click is only accepted if the game isn't over and the square is empty. The script then places the mark, records it in the variable, checks for a winner and passes the turn.

Add two more small scripts to C1: to reset and fix the sprites position

1. Drag each script onto the other sprites in the sprite list to copy it.
2. Drag the three costumes onto the other sprites too.
3. In every copy, change the variable to match that square. For example, in C2 change each C1 to C2. This is the most common mistake, so check every dropdown.
4. Set each square's position and size:

Square x y

C1 -100 100

C2 0 100

C3 100 100

C4 -100 0

C5 0 0

C6 100 0

C7 -100 -100

C8 0 -100

C9 100 -100

After every move, the game checks the 8 possible winning lines. Each square remembers what's in it: 0 is empty, 1 is X, and 2 is O. A line wins when its three squares hold the same mark and aren't empty.

1. Row logic (3 lines, side to side)

1. Top row: C1, C2, C3
2. Middle row: C4, C5, C6
3. Bottom row: C7, C8, C9
4. For each row, the game asks whether the first square matches the second and the second matches the third.
5. If they do, and the first square isn't 0, that row is a win.

2. Column logic (3 lines, top to bottom)

1. Left column: C1, C4, C7
2. Middle column: C2, C5, C8
3. Right column: C3, C6, C9
4. The check is the same as for rows, applied to the squares of each column.
5. All three must match and must not be empty.

3. Diagonal logic (2 lines, corner to corner)

1. Main diagonal: C1, C5, C9
2. Other diagonal: C3, C5, C7
3. Both diagonals pass through the centre square, C5.
4. The check is again three matching, non-empty squares.

Why the "not empty" check matters

1. Three empty squares all hold 0, so they would match each other.
2. Without the "not 0" check, the game would announce a winner on the first click.
3. Because of this check, a line only counts when it contains X's or O's.

What happens when a line matches

1. The game saves the winning mark (1 or 2) in the Winner variable.
2. It sets Game over to 1, so no more clicks are accepted.
3. If Winner is 1, it announces X wins. Otherwise it announces O wins.

What if nobody wins

1. The game counts every move in the Moves variable.
2. If Moves reaches 9 and no line matched, the board is full and the result is a draw.

Why the order matters

1. The winner check runs before the turn changes, so the player who just moved is the one who gets the win.
2. Win checks come first, and the draw check only runs if there's no winner. This way a win on the 9th move still counts as a win and not a draw.

Repeat it for these lines, changing the squares each time:

1. Rows: C1-C2-C3, C4-C5-C6, C7-C8-C9
2. Columns: C1-C4-C7, C2-C5-C8, C3-C6-C9
3. Diagonals: C1-C5-C9, C3-C5-C7

The not (… = 0) check stops three empty squares from counting as a win.

Then add the announcement at the end of the same script:

1. Make a sprite named Play with three costumes: a plain one, a "P1" glow and a "P2" glow.

1. Make a sprite named Win with three costumes, for example "X wins!", "O wins!" and "Draw!".
2. Set its position to x = 0, y = 0 and its size so the text is easy to read.

Make the same script for O wins v (costume Glow-2) and Draw v (costume Win), using the matching costume.

Create a small round button sprite labelled "REST" (or "RESET").

Click the green flag in PictoBlox and test:

1. X wins on a row, a column and both diagonals.
2. O wins.
3. A full board with no winner shows the draw message.
4. You can't click a square that's already taken.
5. You can't keep playing after the game ends.
6. The reset button clears the board and starts again.

1. A square doesn't change when clicked: Check that its variable is set to 0 on the green flag. Check that its Empty costume is large enough to click, and that the script uses that square's own variable.
2. Clicking is ignored after a reset: Make sure the New Game script resets all nine squares, including C9.
3. A diagonal never wins: Check that its condition compares different squares and tests not (C1 = 0).
4. The winner message doesn't appear: Check that the Win sprite is on stage at a sensible size, and that it has a go to front layer block.
5. The draw message is wrong: Check that Moves is set to 0 on both green flag and New Game.

You now have a complete two-player game built from variables, broadcasts and conditions. The same approach of storing state in variables and announcing events with broadcasts works for many other PictoBlox projects. Try changing the artwork and share your remix.