public void paint(Graphics g) { //grid frame g.drawRect(20,20,400,400); //row one g.setColor(Color.red); g.fillRect(20,20,100,100); g.setColor(Color.blue); g.fillRect(120,20,100,100); g.setColor(Color.green); g.fillRect(220,20,100,100); g.setColor(Color.gray); g.fillRect(320,20,100,100); //row two g.setColor(Color.orange); g.fillRect(20,120,100,100); // etc etc //row three g.setColor(Color.darkGray); g.fillRect(20,220,100,100); // etc etc //row four }

Let's talk redesign.

We can use modularity in two ways here:

1. use of loops
2. use of classes

Rather than how it is set up in the above code, consider a loop and an array:

Box boxes[][] = new Box[4][4]; for (i = 0; i <= 3; i++) { // do calculations to set/change x variables for (j = 0; j <= 3; j++){ // do calculations to set/change y variables boxes[i][j] = new Box(x, y, height, width, myColor);

Here was the order I proceeded ... one step at a time...each step is basically only changes one method. Parts of the code are below:

1. redesign ideas (see below)
2. (1 pt.) get the button on the screen (init): See it here
3. consider what the button will do, and thus consider possible reuse of code that draws the grid
4. (5 pt.) make the grid to at least draw the squares (displayGame): See it here and generating the colors
5. (5 pt.) make the grid draw the same color only twice (use random and arrays): See it here
6. (1 pt.) get the surrounding lines: See it here
7. (1 pt.) make the New Game button create a new grid: See it here
8. (5 pt.) consider the game - we need to know which box is chosen when clicked with the mouse (mouseReleased): See it here by looking at the Java Console and using System.out.println in the MouseReleased() method. It would be helpful to remember the array lecture and an example
   • how does this effect the individual Box itself?
   • once I can be sure my code knows which Box is clicked, what do I want to happen once clicked
9. (1 pt.) make the Box change once clicked: See it here
10. (1 pt.) make the Game begin with the boxes gray: See it here
11. (5 pt.) make it play the game (i.e., proper flips at proper times). This finished code is only one method different than the one in the previous step.
    Documentation and design points:
    
    1. (2 pt.) Object model on link
    2. (1 pt.) Javadoc on link
    3. (2 pt.) Design (good modular use of classes and methods)

Here, again, is the game done with the mouse working and flipping back when colors do not match.

One student's final submission...nice. Make sure to play the whole game.
Another amazing - make sure to play to the end and then choose New Game. Finally, one without the "third click" trick code to show pause

You need to be very careful of where you place variables in loops. Specific examples

OK, step 1: redesign

Object Model??

Let's talk redesign

Here is a possible Lab 7 startup. Notice the use of System.out.println() throughout. Keep the Java Console open so you can see the "clues" these are giving you. I am going to use the code below to show how you can use some of one's old material (lab 5) to begin a re-design that can really help this lab.
NOTE: Compile this class - you will see some errors about variable Box. Note that you are declaring things as Box but have not defined the class Box. See below for a start on the Box class.

/* *Program Name: GuessGame *Description: This program is designed to create a color matching game. */ import java.awt.*; import java.applet.Applet; import java.awt.event.*; public class GuessGame extends Applet implements ActionListener, MouseListener{ int x,y; Box [][] boxes = new Box[4][4]; Box boxChoice; int col; int row; int initialBoxX = 50; int initialBoxY = 50; int width = 50; int height = 50; Graphics g; public void init() { Button newGame = new Button("New Game"); add(newGame); newGame.addActionListener(this); addMouseListener(this); setBackground(Color.white); setNewGame(); } public void setNewGame(){ // set up the grid (fill it with the boxes...see below) } public void paint(Graphics g) { displayGame(g); } public void displayGame(Graphics g){ // go to each box and display it. for (int i = 0; i <= 3; i++) { for (int j = 0; j <= 3; j++){ //System.out.println("display coordinates: row "+i+" column "+j); boxes[i][j].display(g); } } // now make the solid lines around the boxes } public void playGame(Box newestChosen) { // called after a mouse click to show change in grid // here will be your use of if statements } public void actionPerformed(ActionEvent event) { setNewGame(); // nice use of modularity } public void mouseClicked(MouseEvent e) { } public void mouseEntered(MouseEvent e) { } public void mouseExited(MouseEvent e) { } public void mousePressed(MouseEvent e) { } public void mouseReleased(MouseEvent e) { x=e.getX(); y=e.getY(); System.out.println("the coordinates clicked are x " + x + "and y" + y); // figure out which box has this x and y - call boxChosen // call some method to tell that box it has been clicked // so it can change its showColor "flag" // call repaint or display boxChoice.picked(); // method in Box - should indicate how the box changes playGame(boxChoice); repaint(); //which will call display for all } }

• constructs: the Applet needs to construct the box and give the box a location and color.

  Some new ideas (INCOMPLETE) for the Applet class are to have the init() call a method to set up the array of Boxes

  The color will come from a Color array that you have and randomly pick items (colors) out of. An simple array of Colors (not generated randomly) could look like:

  Color colorArray[] = {Color.red,Color.blue,Color.cyan, Color.green, Color.magenta,Color.pink,Color.orange, Color.yellow};

  You might use a specified array like that to at least get going until you figure the random generator. See here for random info

  public void setNewGame(){ int chosenColors[] = {0,0,0,0,0,0,0,0}; // explain why have it ... and why here // Box boxes[][] = new Box[4][4]; // what is problem with declaring this here? for (i = 0; i <= 3; i++) { // do calculations to set/change x variables System.out.println("my col value is: " + i); for (j = 0; j <= 3; j++){ System.out.println("my row value is: " + j); // do calculations to set/change y variables // generate a random color (actually a random // int) which then accesses a color // in your array colorArray[] (see below) AND // int rint = (int)(Math.random() * 8); // this **could** generate more than 2 of the // same color - so a check is needed ... somewhere // you have to keep track of what colors have already // been chosen and not allow more than twice // another array of ints is a good idea boxes[i][j] = new Box(x, y, h, w, colorArray[rint]); // do you have what you think you have? System.out.println("coordinates: row " + j + " column " + i); } } repaint(); } public void displayGame(Graphics g){ for (int i = 0; i <= 3; i++) { for (int j = 0; j <= 3; j++){ boxes[i][j].display(g); } } }
  The new paint would be simply:
  public void paint(Graphics g){ displayGame(g); }

  How about a Box class. This gives you a "handle" to each box... rather than just knowing the coordinates

  Discuss - why would this be useful?

  What does one do with a box?

  • constructor: set up the location and color. What about something like
    // public class Box { // if this class is in the same file as the game class, // only one can be public. If it is in its *own* file, // then it should be public class Box { int x, y; int width; int height; Color boxColor; Graphics g; boolean showColor = false; // this is a flag - it will later tell the box // if it has been clicked or not public Box(int X1,int Y1,int h ,int w, Color myColor){ x = X1; y = Y1; height = h; width = w; boxColor = myColor; } }
  • display the box: draw it depending on if it has been chosen
    public display(Graphics graph){ g = graph; // tell what about "simple" mistake the "other" way if (showColor == false) { // wow, see what happens with only one = : no compile error g.setColor(Color.gray); g.fillRect(x, y, height, width);} else { g.setColor(boxColor); g.fillRect(x, y, height, width);} } public void picked() { } }
  Now that you have reconsidered design, go back to the design steps now so that you do not get too confused.

  ---

  How about getting the colors?

  Let's talk about the random generator of colors. Easiest way is to match colors to a number, since java provides a random number generator

  1. java.lang.Math.random() returns a double ... but Math also has
     rint(double) returns the closest integer to the argument.
     or one can cast (int)Math.random()
     Nice option since it is a class method so can call without instantiation
  2. java.util.Random is a class that you can instantiate and call the method nextInt() which returns an int.
     
     For example: nextInt(8) returns a random number between 0 and 7.
  For either of these, since we only want 8 choices of numbers mod (or the java operator %) may be useful. Why? How does mod arithmetic work?

  The color will come from a Color array that you have and randomly pick items (colors) out of. An simple array of Colors (not generated randomly) could look like:

  Color colorArray[] = {Color.red,Color.blue,Color.cyan, Color.green, Color.magenta,Color.pink,Color.orange, Color.yellow};

• We want to identify the box clicked. Once a box is clicked, we should be able to get the x,y coordinates from the mouse event.
  This involves something like the array we saw in class in these notes
• How do you tell if the box that was chosen was a particular one that you had made? Box.isItMe?(x,y)
  Again, this is like the array we saw in class in these notes Then:
  public Box whatOne(int x1, int x2, int y1, int y2){ for (i = 0; i <= 3; i++) { for (j = 0; j <= 3; j++){ boolean thisOne = boxes[i][j].isItMe?(x,y); if (thisOne == true) return boxes[i][j]; } } }

  OR, you could do some mathematical truncation, etc to determine which box...(this is easier...and what I did)
  (For example, if you have integer division (x - initialBoxX)/50 what does this give?)

• changeColor(): in the game, the boxes are "flipped". This method could do that

Hopefully, this is helpful...

Hmmmmm - can the MouseListener be in the boxes themselves! so when a box is clicked, it knows the source was the box and we do not have to play with coordinates? Check it out....hmmm these Boxes are not Components ... why do I think that is important?