Building a Tic-Tac-Toe Board

In this project, you will develop a program that plays Tic-Tac-Toe as well as you do.

On this first page, you use clones to display a Tic-Tac-Toe board and let two human players enter moves.

Three states of Tic-Tac-Toe: in progress, win, tie

The project is spread out over different units because there's a lot to do, and because some steps require techniques you haven't learned yet. On this page, you'll learn about cloning a sprite (like copying it, only better). In the future, you'll extend the project to detect wins and ties and, ultimately, to let the computer be one of the players.

One approach to building this game is to use multiple sprites; each square of the board is a separate sprite. Each sprite knows where it is on the board, and, once positioned, the sprites never move. The player clicks one of the nine squares, and that sprite changes its costume to display the move.

  1. Click here to load this file. Then save it to your Snap! account.
  2. The first sprite has already been set up for you. It has three costumes: Empty, X, and O. Click next costume a few times to see all of them.
    Costumes of a square: Empty, X and O

You will use clones to create the 3×3 Tic-Tac-Toe board. 

A clone is a copy of a sprite that shares information with its parent sprite (the original sprite). For example, clones have copies of any scripts from the parent, and if the parent's script is changed, then the clones' scripts change too. However, changes you make to a clone are not shared with the parent, so you can do things like move each clone to a different position.

Clones start with the same position, costumes, and scripts of their parent. But clones made by a program...

(There can also be permanent clones, which are created differently, but they're not used in this project.)

In this project, you'll need nine clones, one for each square of the Tic-Tac-Toe board. So, you'd need something like:
repeat (9){create a clone of (myself)}
The actual code you write will be slightly more than this, but this is the central idea. You'll need nine clones, and you will hide the parent. This will allow you to control the squares of the grid with blocks like:
When I start as a clone
  1. Before clicking anything else, read this demonstration script with your partner. Discuss what will happen when you click the sprite.
    This script will help you learn about clones, but it won't be part of your finished project.
    when I am (clicked){ create a clone of (myself); say(I'm the parent.); glide (1) secs to x: (pick random(-200) to (200)) y: (pick random(-150) to (150)); say()}
  2. Then click the sprite on the stage, and compare what happens with what you expected.
    • Notice that the parent sprite (not the clone) moves to the new random position after cloning itself. Look back at the code; why does this make sense?
    • Note that both the clones and the parent are sprites. Both are clickable (try it) and draggable (try that too). This is different from the effect of the stamp Pen block, which just leaves a picture of the sprite on the stage.
    • The create a clone block takes an input because it can copy any sprite. In this project, there's only one sprite at the beginning, so your choices are either myself or Square (the sprite's name), which in this case, means the same thing.
  3. Prepare to create your project:
    1. Delete the when I am clicked demonstration script from exercise 3.
    2. Connect the when ⚑ clicked block toward the bottom of the scripting area to the script just below it.
      makeBoard, set (X's turn?) to (true) [Comment: X plays first.]
    3. Read that script and notice...
      • The makeBoard block is empty. You'll write it in the next problem.
      • The variable X's turn? will be true when it's X's turn to play or false when it's O's turn.
        When alternating between two values, it's convenient to use Booleans because you can use not to switch between them and you can use if to test the variable. (Recall that if requires a true/false input.)
        set (X's turn?) to (not (X's turn?)) if (X's turn?){}
  4. Edit the block makeBoard to set up nine clones in three rows of three.
    One row of squares Two rows of squares Three rows of squares
    Tips:
    • The costumes are all 50 steps tall and 50 steps wide.
    • Make sure the clones start out with the empty square costume.
    • Be sure to show the original sprite before cloning it, so that the clones will be visible. After cloning nine times to create the board, hide the original sprite so it does not interfere with the game as a tenth square.
    • Click if you need an additional hint about makeBoard.
      for (row) = 1 to 3 {for (column) = 1 to 3 {} }
  5. Now finish up:
    1. Write a when I am clicked script that will make each clone wear the proper costume when clicked: X or O depending on whose turn it is.
    2. Decide how a square should behave when it is clicked while already wearing an X or O costume.
    3. Make the parent sprite not-draggable so that the clone squares aren't accidentally moved around when the player clicks.
      Draggable box un-checked
  6. Play one or two games of Tic-Tac-Toe with your partner, and fix any bugs. Then, discuss what else you might want to add to the project.

    7. You can leave comments in the project file to remind yourself of things you might want to do later.

    Save. You will use this later.