ST EK List:
No EK's found
Why do this? Mainly because it introduces an extended project; having such a project is worthwhile to show kids that it's not all about trivial exercises. But cloning is apparently popular with teachers, too.

Why here? Multithreading is an important technique for dealing with complexity.

Building a Tic-Tac-Toe Board

Here is some of the critical teacher feedback on the prior version (there was great feedback too!):

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

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

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

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 (at least those made by a program)...

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(You clicked me!); 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 effects 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.

The next script in the project is:
when flag clicked{delete this clone}
The block is called delete this clone rather than delete this sprite because it only works for clones. When you click green-flag button, the parent sprite and all its clones will run this script, but only the clones will be deleted, leaving just the parent on the stage.

Clicking stop button automatically deletes clones, but this script is insurance in case you run the program multiple times without clicking stop.
  1. Prepare to create your app:
    1. Delete the when I am clicked demonstration script from exercise 3.
    2. Connect the additional when ⚑ clicked block toward the bottom of the scripting area to the script just below it.
      when green flag clicked, wait (.1) secs [comment: Wait for old clones to be deleted.], makeBoard, set (X's turn?) to (true) [Comment: X plays first.]
    3. Read that script and notice...
      • The wait block ensures that the other when ⚑ clicked script has time to delete old clones before we make new ones.
      • 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?){}
  2. 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 {} }
  3. 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
  4. 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 app.

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

    You will work on this more in Unit 3 Lab 2 Page 1: Remembering the Moves.

  5. Save. You will use this later.