Thread: Memory Card Game JButtons Array

I am making a memory card game. I created a 2D array of JButtons, size 5x6. Each button is placed on my board using a gridlayout with the same image shown when the card is face down. When the user clicks on the card, I would like to have that button show a different image. I created a string array that has 15 images location stored in it. I am unable to get the buttons to show a different image. When I click a button, it shows it as a light blue, but then as soon as I let go of the click, it goes back to what it was without showing the image. Thanks for your help. Here is my code:

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
 
public class Layout implements MouseListener{
 
	JButton[][] button = new JButton[6][5];
	private int matches;
	private int attempts;
	int attemptsCounter = -1;
	String Images[] = {"blanton.jpg", "brown.jpg", "halladay.jpg", "hamels.jpg", "howard.jpg",
			"lee.jpg", "mayberry.jpg", "papelbon.jpg", "pence.jpg", "polanco.jpg", "rollins.jpg",
			"ruiz.jpg", "utley.jpg", "victorino.jpg", "worley.jpg"};
 
	public void jpanel(){
		JFrame frame = new JFrame();
		JPanel gridPanel = new JPanel(new GridLayout(5, 6));
		JPanel northPanel = new JPanel();
 
 
		JLabel attempts = new JLabel("Attempts: ");
		JButton playAgain = new JButton("Play Again");
		JLabel matches = new JLabel("Matches: ");
		northPanel.add(attempts);
		northPanel.add(matches);
		northPanel.add(playAgain);
		frame.setSize(900, 700);
		frame.add(northPanel, BorderLayout.NORTH);
		northPanel.setSize(900, 100);
		frame.add(gridPanel);
		gridPanel.setSize(800, 600);
		for(int i=0; i<button.length; i++){
			for(int j=0; j<button[i].length; j++){
				int n = i*button[i].length + j+1;
				button[i][j] = new JButton();
				gridPanel.add(button[i][j]);
			}
		}
		java.net.URL image = Memory.class.getResource("phillies.jpg");
		for(int i=0; i<6; i++){
			for(int j=0; j<5; j++){
				button[i][j].setIcon(new ImageIcon(image));				
				button[i][j].addMouseListener(this);
			}
		}
 
		frame.setVisible(true);
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
	}
 
	public void mouseClicked(MouseEvent event){
		for(int k=0; k<30; k++){
			for(int i=0; i<6; i++){
				for(int j=0; j<5; j++){
					button[i][j].setPressedIcon(new ImageIcon(Images[k]));
					button[i][j].getPressedIcon();
				}
			}
		}
	}
}

Originally Posted by rlo10

I am making a memory card game.

That sounds like a really nice idea for a project. I think if I was going to do this the way you are doing it, I would certainly start by extending JButton - say something like

public class MemoryGameButton extends JButton
{
...
}

and making sure it has sufficient internal state to remember whether it is 'face down' or 'face up'. I'd test one instance of that MemoryGameButton in a window by itself before I got on with my game. Next step after that? Maybe look at extending ButtonGroup to capture the 'game logic' (up to two cards flipped per turn). A quick glance at the docs for ButtonGroup tells me there may be a better class to extend than JButton! Read the docs and see what you think.

Thanks for your reply. I tried doing it this way. I have a set and get face for the card, but I'm thinking I need to change the card class to a JButton now. I extended JButton now and I tried to just get one image to show when I click on it. It still will not work. Here's what I tried to do.

public void mouseClicked(MouseEvent event){
		Card card = new Card();	
		card.setFace(true);
		if(card.getFace() == true){
			button[0][0].setPressedIcon(new ImageIcon("blanton.jpg"));
		}
}

Can you make a small complete program that compiles, executes and shows the problem?

Here is my output. The first button shows the phillies image, but it turns blue(in the picture) when it is clicked instead of showing the image that I designated it.

output.jpg

So I have the backs of the JButtons that are the same. Once I click on the JButton, the image should change. Here is my updated code.

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
 
public class Layout extends JButton implements MouseListener{
 
	JButton[][] button = new JButton[6][5];
	private int matches;
	private int attempts;
	int attemptsCounter = -1;
	String Images[] = {"blanton.jpg", "brown.jpg", "halladay.jpg", "hamels.jpg", "howard.jpg",
			"lee.jpg", "mayberry.jpg", "papelbon.jpg", "pence.jpg", "polanco.jpg", "rollins.jpg",
			"ruiz.jpg", "utley.jpg", "victorino.jpg", "worley.jpg"};
 
	public void jpanel(){
		JFrame frame = new JFrame();
		JPanel gridPanel = new JPanel(new GridLayout(5, 6));
		JPanel northPanel = new JPanel();
 
 
		JLabel attempts = new JLabel("Attempts: ");
		JButton playAgain = new JButton("Play Again");
		JLabel matches = new JLabel("Matches: ");
		northPanel.add(attempts);
		northPanel.add(matches);
		northPanel.add(playAgain);
		frame.setSize(900, 700);
		frame.add(northPanel, BorderLayout.NORTH);
		northPanel.setSize(900, 100);
		frame.add(gridPanel);
		gridPanel.setSize(800, 600);
		for(int i=0; i<button.length; i++){
			for(int j=0; j<button[i].length; j++){
				int n = i*button[i].length + j+1;
				button[i][j] = new JButton();
				gridPanel.add(button[i][j]);
			}
		}
		java.net.URL image = Memory.class.getResource("phillies.jpg");
		for(int i=0; i<6; i++){
			for(int j=0; j<5; j++){
				button[i][j].setIcon(new ImageIcon(image));				
				button[i][j].addMouseListener(this);
			}
		}
 
		frame.setVisible(true);
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
	}
 
	public void mouseClicked(MouseEvent event){
		button[0][0].setPressedIcon(new ImageIcon(Images[0]));
        }
 
	public int getMatches(){
		return matches;
	}
 
	public void setMatches(int matches){
		this.matches = matches;
	}
 
	public int getAttempts(){
		return attempts;
	}
 
	public void setAttempts(int attempts){
		this.attempts = attempts;
	}
}

I have a Card class, but I'm not sure if I need that anymore. That was for the text-based part of this project before making a GUI. Here is that code.

public class Card{
	private String symbol = "";
	private int num;
	private boolean face = false;
	private int row;
	private int column;
 
	//Card constructor
	public Card(String symbol){
		this.symbol = symbol;
	}
 
	//Empty card constructor
	public Card(){
	}
 
	//Getter for symbol
	public String getSymbol(){
		return symbol;
	}
 
	//Setter for symbol
	public void setSymbol(String text){
		this.symbol = text;
	}
 
	//Getter for num
	public int getNum(){
		return num;
	}
 
	//Setter for num
	public void setNum(int number){
		this.num = number;
	}
 
	public boolean getFace(){
		return face;
	}
 
	public void setFace(boolean f){
		this.face = f;
	}
 
	public int getRow(){
		return row;
	}
 
	public void setRow(int row){
		this.row = row;
	}
 
	public int getColumn(){
		return column;
	}
 
	public void setColumn(int column){
		this.column = column;
	}
}

And then here is my main class...

public class Memory{
 
	/**
	 * @param args
	 */
	public static void main(String[] args){
		Layout test = new Layout();
		test.jpanel();
	}
}

Your code does not compile:
Layout is not abstract and does not override abstract method mouseExited(java.awt.event.MouseEvent)

If it does not compile, how were you able to test it?

Are you sure you're creating the ImageIcon correctly? I see you use getResource to load the card backs but you use a straight-from-named-file constructor for ImageIcon, which won't throw Exceptions because it uses the MediaTracker to do the hard work. Perhaps you could try checking ImageIcon.getImageLoadStatus()?

It does work, I didn't post that part of the code, I thought it wasn't important, sorry. Here is my whole layout class.

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
 
public class Layout extends JButton implements MouseListener{
 
	JButton[][] button = new JButton[6][5];
	private int matches;
	private int attempts;
	int attemptsCounter = -1;
	String Images[] = {"blanton.jpg", "brown.jpg", "halladay.jpg", "hamels.jpg", "howard.jpg",
			"lee.jpg", "mayberry.jpg", "papelbon.jpg", "pence.jpg", "polanco.jpg", "rollins.jpg",
			"ruiz.jpg", "utley.jpg", "victorino.jpg", "worley.jpg"};
 
	public void jpanel(){
		JFrame frame = new JFrame();
		JPanel gridPanel = new JPanel(new GridLayout(5, 6));
		JPanel northPanel = new JPanel();
 
 
		JLabel attempts = new JLabel("Attempts: ");
		JButton playAgain = new JButton("Play Again");
		JLabel matches = new JLabel("Matches: ");
		northPanel.add(attempts);
		northPanel.add(matches);
		northPanel.add(playAgain);
		frame.setSize(900, 700);
		frame.add(northPanel, BorderLayout.NORTH);
		northPanel.setSize(900, 100);
		frame.add(gridPanel);
		gridPanel.setSize(800, 600);
		for(int i=0; i<button.length; i++){
			for(int j=0; j<button[i].length; j++){
				int n = i*button[i].length + j+1;
				button[i][j] = new JButton();
				gridPanel.add(button[i][j]);
			}
		}
		java.net.URL image = Memory.class.getResource("phillies.jpg");
		for(int i=0; i<6; i++){
			for(int j=0; j<5; j++){
				button[i][j].setIcon(new ImageIcon(image));				
				button[i][j].addMouseListener(this);
			}
		}
 
		frame.setVisible(true);
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
	}
 
	public void mouseClicked(MouseEvent event){
		button[0][0].setPressedIcon(new ImageIcon(Images[0]));
	}
 
	@Override
	public void mouseEntered(MouseEvent e) {
		// TODO Auto-generated method stub
 
	}
 
	@Override
	public void mouseExited(MouseEvent e) {
		// TODO Auto-generated method stub
 
	}
 
	@Override
	public void mousePressed(MouseEvent e) {
		// TODO Auto-generated method stub
 
	}
 
	@Override
	public void mouseReleased(MouseEvent e) {
		// TODO Auto-generated method stub
 
	}
 
	public int getMatches(){
		return matches;
	}
 
	public void setMatches(int matches){
		this.matches = matches;
	}
 
	public int getAttempts(){
		return attempts;
	}
 
	public void setAttempts(int attempts){
		this.attempts = attempts;
	}
}

Sean, I am not sure if I'm doing right. I am able to get all the backs to display correctly. I thought you could just assign another image to the JButton using the setPressedIcon() method. Is there a way to assign these images using the Images array I created?

Did you compile and test the code before posting it?
I am getting more compiler errors.

When I fixed the compiler error the code works for me.

That's weird. I swear it's working for me. I have 2 warnings, but no errors. I just checked the code word for word and it compiles.

You must be working in a contaminated environment. You have class definitions I don't have.
The following is undefined:
Memory.class.getResource(

Does a different image show up on the first JButton?

Yes when it is pressed.

Originally Posted by rlo10

Sean, I am not sure if I'm doing right. I am able to get all the backs to display correctly. I thought you could just assign another image to the JButton using the setPressedIcon() method. Is there a way to assign these images using the Images array I created?

The way you're attempting to do it looks like it ought to work - the only thing that stuck out to me was that you do it differently for the fronts and the backs. I wonder if you're successfully creating the card front ImageIcons. Besides that, I suspect 'setPressedIcon' may not be what you want - that's the image the button shows while the mouse button is down. When I play this game with my kids, we turn one card over, then another, if the two match - win, otherwise they both go face down again and it's the next person's turn. The pressedIcon won't give you that behaviour.

Originally Posted by Norm

the code works for me.

I suspect working directory and the ImageIcon constructor...

Ok so if I try to do something like this code, would it work better? I'm not sure what method to use do get the card to stay flipped over when it is pressed.

java.net.URL image = Memory.class.getResource("phillies.jpg");
		java.net.URL imageBlanton = Memory.class.getResource("blanton.jpg");
		java.net.URL imageBrown = Memory.class.getResource("brown.jpg");
		java.net.URL imageHalladay = Memory.class.getResource("halladay.jpg");
		java.net.URL imageHamels = Memory.class.getResource("hamels.jpg");
		java.net.URL imageHoward = Memory.class.getResource("howard.jpg");
		java.net.URL imageLee = Memory.class.getResource("lee.jpg");
		java.net.URL imageMayberry = Memory.class.getResource("mayberry.jpg");
		java.net.URL imagePapelbon = Memory.class.getResource("papelbon.jpg");
		java.net.URL imagePence = Memory.class.getResource("pence.jpg");
		java.net.URL imagePolanco = Memory.class.getResource("polanco.jpg");
		java.net.URL imageRollins = Memory.class.getResource("rollins.jpg");
		java.net.URL imageRuiz = Memory.class.getResource("ruiz.jpg");
		java.net.URL imageUtley = Memory.class.getResource("utley.jpg");
		java.net.URL imageVictorino = Memory.class.getResource("victorino.jpg");
		java.net.URL imageWorley = Memory.class.getResource("worley.jpg");
 
                for(int i=0; i<6; i++){
			for(int j=0; j<5; j++){
				button[i][j].setIcon(new ImageIcon(image));				
				button[i][j].addMouseListener(this);
			}
		}
                public void mouseClicked(MouseEvent event){
		        button[0][0].setPressedIcon(new ImageIcon(imageBlanton));
	        }

what method to use do get the card to stay

What about: setIcon

Thanks Norm, it worked!!

I suppose Your next problem will be using a Timer to flip the card back when there isn't a match.

Haha yes, I had the idea to just flip them back over after the user goes to click the 3rd picture, but a timer would work too. I guess I have to learn to use thread right? Actually my problem now is, I'm using setIcon to assign the images in the Mouse Click event, but the only way I can assign the buttons is to do them 30 times individually. I had three done and when I clicked on the third picture, it flipped over the first 3 buttons, not one at a time. Any idea how to fix this? Should I declare them above the mouse click event method and do something else inside to get them to flip? Here's my code for this part:

java.net.URL imageBlanton = Memory.class.getResource("blanton.jpg");
	java.net.URL imageBrown = Memory.class.getResource("brown.jpg");
	java.net.URL imageHalladay = Memory.class.getResource("halladay.jpg");
	java.net.URL imageHamels = Memory.class.getResource("hamels.jpg");
	java.net.URL imageHoward = Memory.class.getResource("howard.jpg");
	java.net.URL imageLee = Memory.class.getResource("lee.jpg");
	java.net.URL imageMayberry = Memory.class.getResource("mayberry.jpg");
	java.net.URL imagePapelbon = Memory.class.getResource("papelbon.jpg");
	java.net.URL imagePence = Memory.class.getResource("pence.jpg");
	java.net.URL imagePolanco = Memory.class.getResource("polanco.jpg");
	java.net.URL imageRollins = Memory.class.getResource("rollins.jpg");
	java.net.URL imageRuiz = Memory.class.getResource("ruiz.jpg");
	java.net.URL imageUtley = Memory.class.getResource("utley.jpg");
	java.net.URL imageVictorino = Memory.class.getResource("victorino.jpg");
	java.net.URL imageWorley = Memory.class.getResource("worley.jpg");
 
        public void mouseClicked(MouseEvent event){
		button[0][0].setIcon(new ImageIcon(imageBlanton));
		button[0][1].setIcon(new ImageIcon(imageBrown));
		button[0][2].setIcon(new ImageIcon(imageHalladay));
	}

Please write a list of the steps (pseudo code) of what the events and the program is supposed to do.
For example:
user clicks a button
the button is flipped.
user clicks a second button.
that button is flipped
??? now what

That's pretty much it.

User clicks a button
This button shows the image
User clicks second button
This button shows the image
If not a match, buttons will go back to showing the default image and the cards will flip back over after the user clicks a third card
If match, cards will stay on board flipped over with their images showing
Once all matches are found, the board will display how many attempts it took the user
The user can choose to play again

Which of those steps are you having problems with?
Take one of those steps and break it down into a number of smaller steps almost at the code level.
Include the variables needed etc