In this lesson, we will create a Tic-Tac-Toe game board and add game pieces to it.
- 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.
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.
- 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.