Java+with+Greenfoot+Lesson+2

=Java with Greenfoot Lesson 2: Tic-Tac-Toe Game Part I = [|July 18, 2013] by [|admin]  in [|java] | [|Leave a comment]

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

 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,// then//Hybrid Car// will not only have the features of //Car// but also its own battery-related feature. 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. <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;"> <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">The Board class has been created. Next, we will make it draw the background. <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;"> <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">The Board class is defined in Board.java which is located in /TicTacToe directory. <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">If your Greenfoot is installed under C:/Greenfoot, then Board.java should be in C:/Greenfoot/scenarios/TicTacToe. <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">To edit it in Greenfoot’s class editor, double click the Board button and a window will pop up. <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;"> <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">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. <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">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: <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;"> <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">The Board function now should look like this: <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;"> <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">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.// <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;"> <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;"> <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">3. Recompile the program <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">Click //Compile all// button at the bottom of main project window to recompile the program. You should see the board now being drawn. <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;"> <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">4. Create GameBall Class <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">Right click on //Actor// button and select “//New subclass…”// from the drop-down list. <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;"> <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">As shown in the image: enter //GameBall// as the class name, select //steel-ball.png,// and click OK to save. <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;"> <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">You should see the GameBall class under the Actor class as this. <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;"> <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">This is all we will do with GameBall class for now. We will add more to this class in Lesson 3. <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">5. Understand the Cell Layout of the Board <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">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. <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;"> <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">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. <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;"> <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">6. Add Game Balls to the Board <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">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. <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">Too add GameBall to the whole board, here is the complete code of the Board function. <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;"> <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">After saving and recompiling, your board should look like this. <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;"> <span style="font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif; font-size: 14px;">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.
 * 1) Quick intro on Programs, Functions, Classes, Subclasses, and Objects
 * 1) Create a new scenario