Suggested Approach
1) Create the Playing Area:
a. Create the console as a 496 x 556 window.
b. Using Image and VisibleImage objects, load the picture from mountainGoat.jpg and position at 0,0 in the display
(see Chapter 9, fallingBall with a raindrop image) in the begin() method
c. Create an int score and a JLabel scoreLabel GUI, placing scoreLabel in the SOUTH position of the ContentPane
d. Modify onMouseClick() so it updates scoreLabel to show the current score.
2) Also in begin(), create the 64 FilledRects and FramedRects first without using arrays.
a. This is similar to the brick program from Chapter 7. Use nested while loops to lay out the 64 FilledRects in an 8x8
grid.
b. So you can see them better, set the FilledRects as you create them to random shades of gray or random colors
c. Create the Framed Rects at the same time (in the same loop structure).
d. Run and test that this step works.
HINT: Your code for this step will look something like this:
for (int row = 0; row<8; row++)
for(int col = 0; col<8; col++){
temp = new FilledRect( … , … , 59, 59, canvas);
temp2 = new FramedRect( … , … , 59, 59, canvas); }
where the …,… need to be filled in with a math expression or variables that places each square in the right position on the grid. The squares
are all sized at 59x59 so they should fit 8 to a row across the 480x480 image (1 less than 60 so no overlap). You may want to consult the
Bricks.zip program to see how the bricks were arranged in that example (which used while loops, but here for loops are more appropriate).
3) Now, so you can refer to them later, create two arrays, one of 64 FilledRects, one of 64 FramedRects.
a. Go back to the nested loops you created and assign each rectangle to a cell in the appropriate array.
b. Use an independent counter variable such as cell that is initially set to zero and is incremented after each new
pair of rectangles (a Filled and Framed) are created and assigned to array cells.
c. The program should still behave as it did in 2.
4) “Pair up” cells in the FilledRect array so that each cell has a counterpart somewhere else on the board with the same
color.
a. To do this, assume you have two numbers x and y and your FilledRect array is called tile. The statement
tile[y].setColor(tile[x].getColor()) will change tile y’s color to match tile x’s color (or shade of gray).
b. This will involve a loop. Initially you can just link cell 0 with cell 32, cell 1 with cell 33, … cell 31 with cell 63 using a
single for loop. Later you can come up with a way to truly randomize the associations.
5) Now that the game board is ready, modify onMouseClick so the player can click on one tile, then click on a second tile.
For every click the score should increment by 1. A successful match should also remove the two tiles selected, revealing
more of the goat.
a. You will probably need to create a method that takes your tile array and a Location point and determines
which tile was selected. That method will look something like this:
public int tileSelected( Location point) {
…. For loop that checks each cell to see if the FilledRect there contains point
and returns cell num if true and if no match, returns -1.
}
b. When you have this step working, congratulations. Take a break, then come back, and design an algorithm to
randomize the paired tiles on the board. That should keep you thinking!
You may also download the file ConcentrationPseudo (Many thanks to Steve Bruemmer), which contains a step by
step list of instructions. The following text shows the progress of the Color-pairing algorithm you should see in your
console when you complete step 5:
FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFFFFFFFFFFFFFTFFFFFFFFFFFFFFFFFFFFFFFFFFFTFFFFFFFF
FFFTFFFFFFFFFFFFFFFFFFFFFFFTFFFFFFTFFFFFFFFFFFFFFFFFFFFTFFFFFFFF
TFTTFFFFFFFFFFFFFFFFFFFFFFFTFFFFFFTFFFFFFFFFFFFFFFFFFFFTFFFFFFFF
TFTTFFFFFFFFFFFFFFFFFFFFFFFTFFFFFFTFFFFFFFFTFFFFFFFTFFFTFFFFFFFF
TFTTFFFTFFFFFFFFFFFFFFFFFFFTFFFFFFTFFFFFFFFTFFFFFFFTFFFTFFTFFFFF
etc. at the bottom should have all T’s