How to display a cropped image like a puzzle in random order in the gamepanel in the left side and let the user solve the puzzle?

Question

I'm trying to build a puzzle game but I can't seem to crop the image into equal parts and i dont know how to create an action listener that will transfer a particular button to the free space in the bottom-right most area of the Photo Puzzle Panel

Thanks!

import java.awt.*;
import javax.swing.*;
import java.awt.event.*;
import javax.swing.JLabel;

import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.GridLayout;
import java.awt.Image;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.image.CropImageFilter;
import java.awt.image.FilteredImageSource;

import javax.swing.Box;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

public class midterm extends JFrame
{
    JPanel mainpanel;
    JPanel gamepanel;
    JPanel controls;

    JButton image1=new JButton();
    JButton image2=new JButton();
    JButton image3=new JButton();
    JButton image4=new JButton();
    JButton image5=new JButton();
    JButton image6=new JButton();
    JButton image7=new JButton();
    JButton image8=new JButton();
    JButton image9=new JButton();   

    JButton j1=new JButton();

    ExitButtonListener end=new ExitButtonListener();

    JLabel text=new JLabel("Please select a photo.");
    JLabel piclabel;



    public midterm()
    {
        super("Girls' Generation - I GOT A BOY 4th Korean Album");
        setSize(700,700);
        setLocation(200,30);
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setVisible(true);
        setResizable(false);

        panel();
        this.getContentPane().add(mainpanel);
        this.pack();
        setVisible(true);   
    }



    public static void main(String[] args)
    {
        midterm frame=new midterm();
    }



    void panel()
    {
        mainpanel=new JPanel();
        mainpanel.setLayout(new BorderLayout());


        gamepanel=new JPanel();
        gamepanel.setBorder(BorderFactory.createTitledBorder("Photo Puzzle"));
        gamepanel.setLayout(new GridLayout(3,3));


        ImageIcon sica = new ImageIcon("jung.jpg");
        image1.setBorder(BorderFactory.createLineBorder(Color.blue));
        image1.setIcon(sica);
        image1.setSize(200,200);
        image1.setVisible(true);
        image1.setToolTipText("Jessica Jung Sooyeon");
        gamepanel.add((image1));

        ImageIcon yuri = new ImageIcon("kwon.jpg");
        image2.setIcon(yuri);
        image2.setSize(200,200);
        image2.setVisible(true);
        image2.setToolTipText("Kwon Yuri");
        gamepanel.add(image2);

        ImageIcon tiff = new ImageIcon("hwang.jpg");
        image3.setIcon(tiff);
        image3.setSize(200,200);
        image3.setVisible(true);
        image3.setToolTipText("Tiffany Hwang Miyoung");
        gamepanel.add(image3);

        ImageIcon sunny = new ImageIcon("lee.jpg");
        image4.setIcon(sunny);
        image4.setSize(200,200);
        image4.setVisible(true);
        image4.setToolTipText("Sunny Lee Sunkyu");      
        gamepanel.add(image4);

        ImageIcon soo = new ImageIcon("choi.jpg");
        image5.setIcon(soo);
        image5.setSize(200,200);
        image5.setVisible(true);
        image5.setToolTipText("Choi Sooyoung");
        gamepanel.add(image5);

        ImageIcon hyo = new ImageIcon("kimh.jpg");
        image6.setIcon(hyo);
        image6.setSize(200,200);
        image6.setVisible(true);
        image6.setToolTipText("Kim Hyoyeon");
        gamepanel.add(image6);

        ImageIcon yoona = new ImageIcon("im.jpg");
        image7.setIcon(yoona);
        image7.setSize(200,200);
        image7.setVisible(true);
        image7.setToolTipText("Im Yoona");      
        gamepanel.add(image7);

        ImageIcon taeng = new ImageIcon("kimt.jpg");
        image8.setIcon(taeng);
        image8.setSize(200,200);
        image8.setVisible(true);
        image8.setToolTipText("Kim Taeyeon");
        gamepanel.add(image8);

        ImageIcon hyunnie = new ImageIcon("seo.jpg");
        image9.setIcon(hyunnie);
        image9.setSize(200,200);
        image9.setVisible(true);
        image9.setToolTipText("Seohyun Seo Juhyun");
        gamepanel.add(image9);



        controls = new JPanel();
        controls.setLayout(new BorderLayout());
        controls.setBorder(BorderFactory.createTitledBorder("Control"));

        JButton newGame = new JButton("New Game");
        newGame.addActionListener(new NewButtonListener());
        controls.add(newGame, BorderLayout.NORTH);


        JButton exitGame = new JButton("Exit");
        exitGame.addActionListener(end);
        controls.add(exitGame, BorderLayout.SOUTH);


        //controls.add(text, BorderLayout.SOUTH);

        mainpanel.add(gamepanel, BorderLayout.CENTER);
        mainpanel.add(controls, BorderLayout.EAST);

        mainpanel.setVisible(true);

        process jj = new process(); 

        image1.addActionListener(jj);
        image2.addActionListener(jj);
        image3.addActionListener(jj);
        image4.addActionListener(jj);
        image5.addActionListener(jj);
        image6.addActionListener(jj);
        image7.addActionListener(jj);
        image8.addActionListener(jj);
        image9.addActionListener(jj);


    }

    class process implements ActionListener
    {
        public void actionPerformed (ActionEvent e)
        {
            if(e.getSource().equals(image1))
            {
                image1.setVisible(false);
                image2.setVisible(false);
                image3.setVisible(false);
                image4.setVisible(false);
                image5.setVisible(false);
                image6.setVisible(false);
                image7.setVisible(false);
                image8.setVisible(false);
                image9.setVisible(false);
                text.setVisible(false);

                ImageIcon pic=new ImageIcon("jung.jpg");
                piclabel=new JLabel();
                piclabel.setIcon(pic);
                piclabel.setToolTipText("Your guide! This is Jessica Jung");
                controls.add(piclabel, BorderLayout.CENTER);






            }

            else if(e.getSource().equals(image2))
            {
                image1.setVisible(false);
                image2.setVisible(false);
                image3.setVisible(false);
                image4.setVisible(false);
                image5.setVisible(false);
                image6.setVisible(false);
                image7.setVisible(false);
                image8.setVisible(false);
                image9.setVisible(false);
                text.setVisible(false);

                ImageIcon pic=new ImageIcon("kwon.jpg");
                piclabel=new JLabel();
                piclabel.setIcon(pic);
                piclabel.setToolTipText("Your guide! This is Yuri Kwon");
                controls.add(piclabel, BorderLayout.CENTER);


            }

            else if(e.getSource().equals(image3))
            {
                image1.setVisible(false);
                image2.setVisible(false);
                image3.setVisible(false);
                image4.setVisible(false);
                image5.setVisible(false);
                image6.setVisible(false);
                image7.setVisible(false);
                image8.setVisible(false);
                image9.setVisible(false);
                text.setVisible(false);

                ImageIcon pic=new ImageIcon("hwang.jpg");
                piclabel=new JLabel();
                piclabel.setIcon(pic);
                piclabel.setToolTipText("Your guide! This is Tiffany Hwang");
                controls.add(piclabel, BorderLayout.CENTER);

            }

            else if(e.getSource().equals(image4))
            {
                image1.setVisible(false);
                image2.setVisible(false);
                image3.setVisible(false);
                image4.setVisible(false);
                image5.setVisible(false);
                image6.setVisible(false);
                image7.setVisible(false);
                image8.setVisible(false);
                image9.setVisible(false);
                text.setVisible(false);

                ImageIcon pic=new ImageIcon("lee.jpg");
                piclabel=new JLabel();
                piclabel.setIcon(pic);
                piclabel.setToolTipText("Your guide! This is Sunny Lee");
                controls.add(piclabel, BorderLayout.CENTER);

            }

            else if(e.getSource().equals(image5))
            {
                image1.setVisible(false);
                image2.setVisible(false);
                image3.setVisible(false);
                image4.setVisible(false);
                image5.setVisible(false);
                image6.setVisible(false);
                image7.setVisible(false);
                image8.setVisible(false);
                image9.setVisible(false);
                text.setVisible(false);

                ImageIcon pic=new ImageIcon("choi.jpg");
                piclabel=new JLabel();
                piclabel.setIcon(pic);
                piclabel.setToolTipText("Your guide! This is Sooyoung Choi");
                controls.add(piclabel, BorderLayout.CENTER);

            }

            else if(e.getSource().equals(image6))
            {
                image1.setVisible(false);
                image2.setVisible(false);
                image3.setVisible(false);
                image4.setVisible(false);
                image5.setVisible(false);
                image6.setVisible(false);
                image7.setVisible(false);
                image8.setVisible(false);
                image9.setVisible(false);
                text.setVisible(false);

                ImageIcon pic=new ImageIcon("kimh.jpg");
                piclabel=new JLabel();
                piclabel.setIcon(pic);
                piclabel.setToolTipText("Your guide! This is Hyoyeon Kim");
                controls.add(piclabel, BorderLayout.CENTER);

            }

            else if(e.getSource().equals(image7))
            {
                image1.setVisible(false);
                image2.setVisible(false);
                image3.setVisible(false);
                image4.setVisible(false);
                image5.setVisible(false);
                image6.setVisible(false);
                image7.setVisible(false);
                image8.setVisible(false);
                image9.setVisible(false);
                text.setVisible(false);

                ImageIcon pic=new ImageIcon("im.jpg");
                piclabel=new JLabel();
                piclabel.setIcon(pic);
                piclabel.setToolTipText("Your guide! This is Yoona Im");
                controls.add(piclabel, BorderLayout.CENTER);

            }

            else if(e.getSource().equals(image8))
            {
                image1.setVisible(false);
                image2.setVisible(false);
                image3.setVisible(false);
                image4.setVisible(false);
                image5.setVisible(false);
                image6.setVisible(false);
                image7.setVisible(false);
                image8.setVisible(false);
                image9.setVisible(false);
                text.setVisible(false);

                ImageIcon pic=new ImageIcon("kimt.jpg");
                piclabel=new JLabel();
                piclabel.setIcon(pic);
                piclabel.setToolTipText("Your guide! This is Taeyeon Kim");
                controls.add(piclabel, BorderLayout.CENTER);

            }

            else if(e.getSource().equals(image9))
            {
                image1.setVisible(false);
                image2.setVisible(false);
                image3.setVisible(false);
                image4.setVisible(false);
                image5.setVisible(false);
                image6.setVisible(false);
                image7.setVisible(false);
                image8.setVisible(false);
                image9.setVisible(false);
                text.setVisible(false);

                ImageIcon pic=new ImageIcon("seo.jpg");
                piclabel=new JLabel();
                piclabel.setIcon(pic);
                piclabel.setToolTipText("Your guide! This is Juhyun Seo");
                controls.add(piclabel, BorderLayout.CENTER);

            }           
        }


    }

    class ExitButtonListener implements ActionListener
    {
        public void actionPerformed(ActionEvent event)
        {
            System.exit(0);
        }
    }

    class NewButtonListener implements ActionListener
    {
        public void actionPerformed(ActionEvent event)
        {
                image1.setVisible(true);
                image2.setVisible(true);
                image3.setVisible(true);
                image4.setVisible(true);
                image5.setVisible(true);
                image6.setVisible(true);
                image7.setVisible(true);
                image8.setVisible(true);
                image9.setVisible(true);
                piclabel.setVisible(false);
                j1.setVisible(false);

        }
    }


}

For better help sooner, post an [SSCCE](http://sscce.org/) (1st thing, instead of a 3x3 grid with 9 cells, have a 2x2 grid with 4 cells). — Andrew Thompson, Jan 25 '13 at 02:39
Take a look at [this](http://stackoverflow.com/questions/11819669/absolute-positioning-graphic-jpanel-inside-jframe-blocked-by-blank-sections/11820847#11820847) for some ideas about how to "cut" your image... — MadProgrammer, Jan 25 '13 at 02:41

score 3 · Answer 1 · answered Jan 25 '13 at 02:54

that will transfer a particular button to the free space in the bottom-right most area of the Photo Puzzle Panel

Your controls panel is using a BorderLayout, but you're already using the NORTH and SOUTH positions.

I would try using either a GridLayout or a GridBagLayout. The GridBagLayout can be configured to maintain the preferred size of the buttons...

The other problem is you've made you frame un-resiable, making difficult for the new button to become visible (or at least I did because I wasn't using any images ;)). I personally can't stand non-resizable windows, but that's me ;)

If you have control over the size of the images, you could simply create a blank/transparent image and set it as the default icon for the picLabel, adding to the controls panel at startup. Then all you should need to do is change the label's icon as you need.

How to display a cropped image like a puzzle in random order in the gamepanel in the left side and let the user solve the puzzle?

1 Answers1