Tic-Tac-Toe

Planning the Project | Designing the Project | Programming
Improving the Project | Assignments | Download the Project

Task

• to create a Tic-Tac-Toe game for two players.

• how to work with the turtles, change their shape, define events for them, and how to create buttons.

• a little about object oriented programming, how to create new classes, to work with their events and change these events.

Planning the Project There are several variations to how you can create Tic-Tac-Toe in Imagine Logo: In the simplest, the computer allows players to draw a cross or a circle into any empty square. In a more sophisticated version of the game, the computer can 'know' which player's turn is next, and highlight this fact for them. Another variant is when the computer is able to find out which player is the winner. The most complicated version of Tic-Tac-Toe to program would be to use an algorithm that would turn the computer into the opponent. Thus, a player could challenge the computer to a game. To begin with, you will learn how to create the simplest variation. Later you can always make changes of your own.

Designing the Project

The Tic-Tac-Toe grid is made up of individual turtles, which all have the same .LGF graphic. This graphic has three frames:

• Frame 1 - an empty box
• Frame 2 - a box with a red circle in it
• Frame 3 - a box with a blue cross in it
  

You can download the finished graphic by clicking here. Open it in Logomotion and have a look at it. You will find that all the frames are of an equal size - this size is important, because it will determine how big your playing board can be on the screen. You will also notice that the frame items have been converted to frames, which means that they are aligned (one under the other) in the bottom left-hand corner of the Organizer window. Saving the .LGF like this is necessary for the functioning, and programming of your game.

This is how you want each turtle to react in the game:

• if the box is empty and the left mouse button is clicked, then the .LGF will display Frame 2 with the red circle. This happens because of an onLeftDown event.
• if the box is empty and the right mouse button is clicked, then the .LGF will display Frame 2 with the blue cross. This happens because of an onRightDown event.
  

Programming

The Tic-Tac-Toe grid is made up from 100 turtles. You could create all of these individually, but a snippet of Logo programming could do all this for you. Here's how...

Before you begin to create the turtles, you must realize that they all have certain things in common:

• they have the same shape
• they have the same response to a mouse click.

The only difference they possess is their X Y position on the screen.

This is the first step to what is called Object Oriented Programming - finding common properties of a set of objects, which means that they can be classed, or grouped, together. This project will introduce you to the basics of OOP.

NB: For more information on Object Oriented Programming, go to Imagine Logo Help. You can access these files by going to the Main toolbar and clicking on Help.

Since common properties have been discovered for your turtles, you can create a class for them. Begin by typing the following into the command line:

Open the Explore Project Window (press F4 on your keyboard). The window makes it possible for you to explore the structure of your project: its pages and turtles, all building blocks (panes, text boxes, buttons, sliders…) are displayed here with all their settings. Notice that a new class, with the name 's' is already listed. The fact that the class name is next to an icon of a turtle, lets you know that the class concerns turtles only. Double click on this turtle to open a dialog where you will be able to create Events, Variables and Procedures.  All of the common properties of class 's' will be created here.

Go to the Events tabs, and click on the Add button. From the selection of events listed, choose onLeftDown. Where your cursor is flashing next to onLeftDown, type: if frame=1 [setFrame 2] This event means that, if the left mouse button is clicked on a turtle, and that turtle is displaying Frame 1, then the image must change to show Frame 2 (i.e. the red circle). Click on the Add button again. This time select onRightDown and type: if frame=1 [setFrame 3] This event means that, if the right mouse button is clicked on a turtle, and that turtle is displaying Frame 1, then the image must change to show Frame 3 (i.e. the blue cross). Every turtle you now create will have these two properties: Exit the dialog window.

Although your class now has set properties, you have not yet defined the image that each turtle should have.

Go to the command line at the bottom of the page and type (but do not press the Return key at the end):

? s'setShape loadImage

Click the F9 button on your keyboard. This will allow you to browse to the image Tic-Tac-Toe.lgf.

Your command line should now look like this:

? s'setShape loadImage "Tic-Tac-Toe

You will need to check that your image has been set as the Variable of your turtle class. Go back to the Explore Project Window and double click on the turtle again. Select the Variables tab from the dialogue window. here, you should find that your three framed .LGF has appeared:

If you were to view all of your coding that you have created for the 's' class so far, this is how it would look:
? newClass "Turtle "s
   [shape (loadImage "Tic-Tac-Toe)
    event'onLeftDown [if frame=1 [setFrame 2]]
    event'onRightDown [if frame=1 [setFrame 3]]
   ]

You can now try and see whether you can add turtles from the 's' class to the screen. Type the following into the command line:

? new "s [pos [-160 130]]
? new "s [pos [-128 130]]

You should have two new turtles on your screen side by side. The numbers in the brackets are the screen co-ordinates for each turtle - the first is the 'x' co-ordinate and the second the 'y'. To position your turtles in a grid pattern, so that they are touching, you will need to know the size of your .LGF in pixels. In the case of Tic-Tac-Toe.lgf, the size is 32 by 32 pixels, and this is the exact difference between the two 'x' co-ordinates in the command lines above.

You should also be able to check that your events assigned to each turtle work. Click on the first one with your left mouse button, and then on the second one with your right mouse button. You should have one circle and one cross on the screen.

You could now waste a lot of time generating each turtle individually and painstakingly working out its co-ordinates. But you can just as easily write a command that generates all 100 turtles.

First cancel all three existing turtles on the screen by typing the following into the command line:

? eraseObject [t1 t2 t3]

In the command line type:

? ed "gamePage

A dialog window will appear where you can create a new procedure for your project called gamePage. It will be this procedure, which will create all of the turtles for you. Type the following:

to gamePage
  let "x -160
  let "y 130
  repeat 10
   [repeat 10 [new "s (list "pos list :x :y) make "x :x+32]
    make "y :y-32 make "x -160]
end

Now run the procedure to see if it works. Your completed game board should appear on the screen.

The only part of the game, which needs to be created, is the New Game button.

To create the New Game button, go to the Main toolbar, click on New Button, and then place your button called b1 anywhere on the screen. The properties of your button will need to be changed. Right click on the button and select Change b1. A dialog window will appear. Firstly, you will need to change the caption, or words that will appear on the button. Next to Caption, type 'New Game'. Then give your button a command in the onPush line: ask all [setFrame 1] Click on OK when you have finished. This command will run every time the button is clicked. It will tell all of the turtles to show Frame 1 (which is the blank square).

Play your game to see if it works.

Improving the Project

A global variable will keep track of whose turn it is and the turtle clicked will automatically change to the correct frame. This way we don't need the left and right click options because the project will know whose turn it is.

We now need to change something for all the turtles. Because we made them all instances of our square class, we can save time by just changing the parent class. Open the Explore Project Window, double click on the class s, and in the dialogue select the tab Events. Cancel the event onRightDown and change the event onLeftDown:
if frame = 1
  [ifElse :toGo = "c
    [setFrame 2 make "toGo "m]
    [setFrame 3 make "toGo "c]
  ]

Although these commands are printed here on several lines for clarity, remember you need to type all of them on one line.

In the command line create the variable toGo that determines which player - blue or red - gets to go first:
? make "toGo "c

Try clicking on individual squares - alternately a cross or a circle will appear in the square.

We can also add two buttons to control whose turn it is. Right click each one and chose Change. Tick the 'Switch' box and set them both to be part of the same group (e.g. 1). Untick the 'All Buttons May Be Off" box and delete the caption. Click on the Appearance tab and Set Picture to Tic-Tac-Toe.lgf. Click on the large button the frames appear on and delete two frames from each button, leaving the circle on one and the cross on the other. Set the onLeftDown event to:

if frame = 1
  [ifElse :toGo = "c
    [setFrame 2 make "toGo "m b3'setDown "true]
    [setFrame 3 make "toGo "c b2'setDown "true]
  ]

Assignments

Try to find an algorithm that will work with this game, so that Tic-Tac-Toe can be played against the computer.

Download the Project

You can download an example of the finished project by clicking here