Java Game (with Greenfoot) Lesson 2: Tic-Tac-Toe Game Board

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 humanreadable 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, then Hybrid Car will not only have the features of Car but also its own battery-related feature. 2. 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 <GREENFOOT_INSTALL_DIRECTORY>/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.

3. we need to create a subclass of the World. Change the world to be a 3-by-3 board To create the TicTacToe board. .The new scenario would look like this. Right click on the World button and click “New subclass”. Feel free to close the “wombat” scenario if you’d like.

we will make it draw the background. Next. The Board class has been created.Enter “Board” as the class name and then select the cell image from backgrounds category. . Click OK.

double click the Board button and a window will pop up. It is automatically called when a Greenfoot program starts and is what we will modify to create the background.jpg is 60x60 pixels).60). Second.20.10) to super(3. The function Board() is the default constructor of the Board class.java which is located in <SCENARIO_DIR>/TicTacToe directory.The Board class is defined in Board. because we want to create a world with 3x3 cells with a cell size of 60x60 pixels (cell. First.3. To edit it in Greenfoot’s class editor. add a line below the “super” call: . We need to make two changes to the Board() function. change super(20. then Board. If your Greenfoot is installed under C:/Greenfoot.java should be in C:/Greenfoot/scenarios/TicTacToe.

Once the changes are saved.The Board() function now should look like this: Now hit Ctr+S or Class->Save to save the changes. the changed status at the bottom would become saved. 4. 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. .

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

.As shown in the image: enter GameBall as the class name. select steel-ball. We will add more to this class in Lesson 3. and click OK to save.png. This is all we will do with GameBall class for now. You should see the GameBall class under the Actor class as this.

cell_9. its column index is 0 and row index index is also 0. let’s me take a minute to explain how the Board is laid out. we will add GameBall to each cell. …. cell_2. For convenience. we will mark our cells as follow. cell_1. Take the first cell (one marked “0.2”. Remember we make the background of the Board to be 3x3 cells of a cell size of 60 pixels? The index value of each cell is marked below. its column index is 0 and row index is 1. for all nine of them.0” ) for example.6. . And in the next step. For the cell marked as “0. cell_3. 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.

. 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. Add Game Balls to the Board Double click on the Board button to open the Board editor. here is the complete code of the Board() function. Too add GameBall to the whole board.7.

. I will show you how to respond to the mouse click and how to determine when the game has been won. In the next lesson. your board should look like this.After saving and recompiling.

Sign up to vote on this title
UsefulNot useful