Java with Greenfoot Lesson 2: Tic-Tac-Toe Game Part I

In this lesson, we will create a Tic-Tac-Toe game board and add game pieces to it.

 

1. Quick intro on Programs, Functions, Classes, Subclasses, and Objects

Computer programs are one way for humans to communicate with machines. Usually they are written in human-readable format such as Java, C++, python, and Ruby, but sometimes they are written in more cryptic languages such as assembly language (bytes and registries, anyone?). To compile a program is to convert the human-readable codes to machine-readable codes, which are binary codes.

00000101010000001010101000110001010101010101010

A function is a unit of execution. A class is like a Lego mold and an object is like a Lego block. If a class is named Car, then all objects of the Car class will have whatever features (aka functions) Car class has. You can also consider a class like a type. An object of the Car class can be said to be of the Car type. All objects of the Car type will have features like move, stop, etc. Using the Lego theme, a subclass of a class Car has a “mold” similar to that of the Car class, but its “mold” is enhanced to include battery-related features. For example, if a class called Hybrid Car is a subclass of the class Car, thenHybrid Car will not only have the features of Car but also its own battery-related feature.

 

1. Create a new scenario

A Greenfoot Scenario is just a project. There are several scenarios that came with the Greenfoot install and they are located in /scenarios. For example, if your Greenfoot software is installed in C:/Greenfoot, then the sample scenarios will in under C:/Greenfoot/scenarios.

Select “Scenario”=>”New”, and then enter” TicTacToe” for the project name.

The new scenario would look like this. Feel free to close the “wombat” scenario if you’d like.

 

2. Change the world to be a 3-by-3 board

To create the TicTacToe board, we need to create a subclass of the World. Right click on the World button and click “New subclass”.

Enter “Board” as the class name and then select the cell image from backgrounds category. Click OK.

The Board class has been created. Next, we will make it draw the background.

The Board class is defined in Board.java which is located in /TicTacToe directory.

If your Greenfoot is installed under C:/Greenfoot, then Board.java should be in C:/Greenfoot/scenarios/TicTacToe.

To edit it in Greenfoot’s class editor, double click the Board button and a window will pop up.

The function Board() is the default constructor of the Board class. It is automatically called when a Greenfoot program starts and is what we will modify to create the background.

We need to make two changes to the Board() function. First, change super(20,20,10) to super(3,3,60), because we want to create a world with 3×3 cells with a cell size of 60×60 pixels (cell.jpg is 60×60 pixels). Second, add a line below the “super” call:

The Board() function now should look like this:

Now hit Ctr+S or Class->Save to save the changes. Once the changes are saved, the changed status at the bottom would become saved.

 

3. Recompile the program

Click Compile all button at the bottom of main project window to recompile the program. You should see the board now being drawn.

 

 

4. Create GameBall Class

Right click on Actor button and select “New subclass…” from the drop-down list.

As shown in the image: enter GameBall as the class name, select steel-ball.png, and click OK to save.

You should see the GameBall class under the Actor class as this.

This is all we will do with GameBall class for now. We will add more to this class in Lesson 3.

 

5. Understand the Cell Layout of the Board

What good is a GameBall is it’s not on the board? So let’s put it on the board! But before doing that, let’s me take a minute to explain how the Board is laid out. Remember we make the background of the Board to be 3×3 cells of a cell size of 60 pixels? The index value of each cell is marked below. Take the first cell (one marked “0,0” ) for example, its column index is 0 and row index index is also 0. For the cell marked as “0,2”, its column index is 0 and row index is 1.

For convenience, we will mark our cells as follow, cell_1, cell_2, cell_3, …, cell_9. And in the next step, we will add GameBall to each cell, for all nine of them.

6. Add Game Balls to the Board

Double click on the Board button to open the Board editor. Then add the following whopping 18 lines (consider using copy-n-paste) under the setBackground function call. These 18 lines will create nine balls and put one ball at each cell.

Too add GameBall to the whole board, here is the complete code of the Board() function.

After saving and recompiling, your board should look like this.

In the next lesson, I will show you how to respond to the mouse click and how to determine when the game has been won.