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.

alt

 

alt

  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

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.

alt

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

alt

 

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”.

alt

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

alt

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

alt

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.

alt

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:

alt

The Board() function now should look like this:

alt

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.

alt

alt
alt

 

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.

alt

 

 

4. Create GameBall Class

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

alt

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

alt

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

alt

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.

alt

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.

alt

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.

alt

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

alt

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.

2 thoughts on “Java with Greenfoot Lesson 2: Tic-Tac-Toe Game Part I”

  1. I`m relocating in the direction of pay back one particular thirty day period within just Philadelphia within just august. I`m a huge supporter of volleyball, as a result I`m on the lookout for spots (parks are most popular), wherever it`s opportunity toward engage in or quite possibly your self realize some month-to-month pickup game titles in just Philadelphia I can`t consider there is simply just fairmount park inside of Philly, exactly where u can take pleasure in this sport. I furthermore uncovered some sites in this article, yet have to have an suggestions regarding most straightforward desired destination.