How to Create a Simple Puzzle Game (GUI) in Java - Beginner friendly

Learn how to create a picture puzzle game in java using java swing and java awt,Complete beginner friendly tutorial.

2 years ago

Read in 8 minutes

- wishnuprathikantam

      SHARE  


.



In this tutorial we'll be creating a simple yet cool java picture puzzle game using netbeans ide you can download the net beans ide

from https://netbeans.org/.

We'll end up with this:

User has to choose a puzzle i)Deadpool puzzle or ii) Black Panther puzzle then the main

window is hidden and puzzle window is inovked.

 

Images Used:

1.LOGO.png

2.BP.png

3.DP.png

We have two folder deadpool and blackpanther both folder have icons 1.png,2.png,3.png...16.png and also ref.png and we load the image icons based on the user input.

  Source Code:

package puzzleconsole;
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class PuzzleConsole implements ActionListener
/*

Action listener is an interface with only one method actionPerformed() used to handle button events and a class
with action events should implement this interface.

*/
{
JFrame Firstframe = new JFrame("Welcome to PuzzleConsole");
/*
javax.swing : JFrame class to create GUI window in java
*/
String win_title;
JFrame PKOframe = new JFrame();
JLabel header = new JLabel("Select a Character..");
/*javax.swing :JLabel class to create text Labels

*/
JButton BP = new JButton();
/*javax.swing :JButton class used to create buttons

*/
JButton DP = new JButton();
ImageIcon logo = new ImageIcon(getClass().getResource("Logo.png"));
/*

Creates an image icon.

*/
ImageIcon ic1,ic2,ic3,ic4,ic5,ic6,ic7,ic8,ic9,ic10,ic11,ic12,ic13,ic14,ic15,ic16,Move,Ref_img;

/*
Let's Intialise required icons ic1... are icons for puzzle,ref_img is refernce image and Move is movable icon in the puzzle
*/

JButton Part1,Part2,Part3,Part4,Part5,Part6,Part7,Part8,Part9,Part10,Part11,Part12,Part13,
Part14,Part15,Part16;

/*
Let's intialise required buttons Part1,..which are puzzle pieces with ic1.. as their icons.
*/

PuzzleConsole(){


ImageIcon BP_RES = new ImageIcon(getClass().getResource("BP.png"));
ImageIcon DP_RES = new ImageIcon(getClass().getResource("DP.png"));


Firstframe.setSize(380,350);
Firstframe.getContentPane().setBackground(new Color(0,0,0));
Firstframe.setVisible(true);
Firstframe.setLayout(null);
Firstframe.setResizable(false);
Firstframe.setLocationRelativeTo(null);

/*

Using JFrame class methods to customise the Firstframe window
setSize(width,height)
setVisible(boolean value)
setBackground to set background color to JFrame window.

setLayout(null) Sets the window layout to null
setResizable(boolean) If false doesn't allow window resizing.
setLocationRelativeTo(null) Starts the Jframe window at the center of the screen.

*/

header.setFont(new Font("Agency FB", Font.BOLD, 20));
/*
Note:Import abstract window tool kit.import java.import.awt;
setFont method allows to change the style of the text label.

*/
header.setBounds(100,6,200,100);
/*
setBounds used to set the position and width,height of the label,button,..
*/
header.setForeground(Color.white);
/*
setForeground color to a label,button,window

*/
JLabel Logo = new JLabel(logo);
Logo.setBounds(10,6,76,94);
BP.setIcon(BP_RES);//setIcon method to set icon to a button
DP.setIcon(DP_RES);
BP.setBounds(100,100,200,75);
DP.setBounds(100,200,200,75);
DP.setBorderPainted(false);
BP.setBorderPainted(false);
BP.addActionListener(this);

//addActionListener method Adds actionlistener(Event handler) to a button

DP.addActionListener(this);
JSeparator Divide = new JSeparator();
JSeparator Divide1 = new JSeparator(SwingConstants.VERTICAL);

//JSeparator Class to create a seperator on the JFrame window


Divide1.setBounds(86,1,1,350);
Divide.setBounds(10,90,380,1);
Divide.setForeground(Color.white);
Divide1.setForeground(Color.white);
Firstframe.add(header);
Firstframe.add(Logo);

//add method to add the components to the JFrame Window

Firstframe.add(Divide);
Firstframe.add(BP);
Firstframe.add(DP);
Firstframe.add(Divide1);
Firstframe.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

//Method to set default operation on close.

}


public static void main(String[] args) {

PuzzleConsole RunNow = new PuzzleConsole();


}

public void load_slices(String puzzle_resources){

//Load the puzzle pieces based on userinput either dead pool or black panther

ic1 = new ImageIcon(getClass().getResource(puzzle_resources+"1.jpg"));
ic2 = new ImageIcon(getClass().getResource(puzzle_resources+"2.jpg"));
ic3 = new ImageIcon(getClass().getResource(puzzle_resources+"3.jpg"));
ic4 = new ImageIcon(getClass().getResource(puzzle_resources+"8.jpg"));
ic5 = new ImageIcon(getClass().getResource(puzzle_resources+"6.jpg"));
ic6 = new ImageIcon(getClass().getResource(puzzle_resources+"5.jpg"));
ic7 = new ImageIcon(getClass().getResource(puzzle_resources+"7.jpg"));
ic8 = new ImageIcon(getClass().getResource(puzzle_resources+"4.jpg"));
ic9 = new ImageIcon(getClass().getResource(puzzle_resources+"13.jpg"));
ic10 = new ImageIcon(getClass().getResource(puzzle_resources+"14.jpg"));
ic11 = new ImageIcon(getClass().getResource(puzzle_resources+"11.jpg"));
ic12 = new ImageIcon(getClass().getResource(puzzle_resources+"15.jpg"));
ic13 = new ImageIcon(getClass().getResource(puzzle_resources+"9.jpg"));
ic14 = new ImageIcon(getClass().getResource(puzzle_resources+"10.jpg"));
ic15 = new ImageIcon(getClass().getResource(puzzle_resources+"12.jpg"));
ic16 = new ImageIcon(getClass().getResource(puzzle_resources+"16.jpg"));
Ref_img=new ImageIcon(getClass().getResource(puzzle_resources+"Ref.jpg"));
Move = ic16;

//Set ic16 as Move (The Movable Piece in the Puzle)

}


public void kickpuzzleout(String puzzle_resources){
PKOframe.setTitle(win_title);
PKOframe.setSize(800,720);
PKOframe.getContentPane().setBackground(new Color(0,0,0));
PKOframe.setVisible(true);
PKOframe.setResizable(false);
PKOframe.setLocationRelativeTo(null);
PKOframe.setLayout(null);
PKOframe.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
load_slices(puzzle_resources);
Part1 = new JButton(ic1);
//Load Puzzle Pieces as Icons to Buttons
Part2 = new JButton(ic2);
Part3 = new JButton(ic3);
Part4 = new JButton(ic4);

Part5 = new JButton(ic5);
Part6 = new JButton(ic6);
Part7 = new JButton(ic7);
Part8 = new JButton(ic8);

Part9 = new JButton(ic9);
Part10 = new JButton(ic10);
Part11 = new JButton(ic11);
Part12 = new JButton(ic12);

Part13 = new JButton(ic13);
Part14 = new JButton(ic14);
Part15 = new JButton(ic15);
Part16 = new JButton(ic16);

Part1.setBounds(100,100,100,100);
Part2.setBounds(200,100,100,100);
Part3.setBounds(300,100,100,100);
Part4.setBounds(400,100,100,100);


Part5.setBounds(100,200,100,100);
Part6.setBounds(200,200,100,100);
Part7.setBounds(300,200,100,100);
Part8.setBounds(400,200,100,100);

Part9.setBounds(100,300,100,100);
Part10.setBounds(200,300,100,100);
Part11.setBounds(300,300,100,100);
Part12.setBounds(400,300,100,100);

Part13.setBounds(100,400,100,100);
Part14.setBounds(200,400,100,100);
Part15.setBounds(300,400,100,100);
Part16.setBounds(400,400,100,100);

header.setText("Solve Puzzle");
header.setBounds(100,6,200,100);
header.setForeground(Color.white);
header.setFont(new Font("Calibri", Font.PLAIN, 35));
JLabel Logo = new JLabel(logo);
Logo.setBounds(640,50,76,94);

JLabel Ref = new JLabel("Reference Image");
Ref.setForeground(Color.white);
Ref.setFont(new Font("Candara", Font.PLAIN, 18));
Ref.setBounds(600,200,200,100);
JLabel RefX = new JLabel(Ref_img);
RefX.setBounds(580,300,200,200);
JSeparator y = new JSeparator(SwingConstants.VERTICAL);
JSeparator x = new JSeparator();
x.setBounds(550,200,800,1);
y.setBounds(550,0,1,720);
PKOframe.add(header);

PKOframe.add(Part1);
PKOframe.add(Part2);
PKOframe.add(Part3);
PKOframe.add(Part4);
PKOframe.add(Part5);
PKOframe.add(Part6);
PKOframe.add(Part7);
PKOframe.add(Part8);
PKOframe.add(Part9);
PKOframe.add(Part10);
PKOframe.add(Part11);
PKOframe.add(Part12);
PKOframe.add(Part13);
PKOframe.add(Part14);
PKOframe.add(Part15);
PKOframe.add(Part16);
PKOframe.add(Logo);
PKOframe.add(Ref);
PKOframe.add(RefX);
PKOframe.add(x);
PKOframe.add(y);

Part1.addActionListener(this);
Part2.addActionListener(this);
Part3.addActionListener(this);
Part4.addActionListener(this);

Part5.addActionListener(this);
Part6.addActionListener(this);
Part7.addActionListener(this);
Part8.addActionListener(this);

Part9.addActionListener(this);
Part10.addActionListener(this);
Part11.addActionListener(this);
Part12.addActionListener(this);

Part13.addActionListener(this);
Part14.addActionListener(this);
Part15.addActionListener(this);
Part16.addActionListener(this);



}



@Override
public void actionPerformed(ActionEvent e) //actionPerformed Method in the Interface ActionLstener
{

if(e.getSource()==DP)
{

//getSource method to determine the event source.Here if the button source is from button DP

header.setText("Calling DeadPool..");
win_title="DeadPool Puzzle";
Firstframe.setVisible(false);
kickpuzzleout("Deadpool/");
}else if(e.getSource()==BP){
header.setText("Calling BlackPanther");
win_title="BlackPanther Puzzle";
Firstframe.setVisible(false);

kickpuzzleout("Blackpanther/");
}


if(e.getSource()==Part1){ //Part1 can only move to Part4,Part2 and Part5.
Icon M=Part1.getIcon();
if(Part2.getIcon()==Move){
Part2.setIcon(M); //Swap the icons of the button
Part1.setIcon(Move);
} else if(Part4.getIcon()==Move){
Part4.setIcon(M);
Part1.setIcon(Move);
}
else if(Part5.getIcon()==Move){
Part5.setIcon(M);
Part1.setIcon(Move);
}
}
if(e.getSource()==Part2){
Icon M=Part2.getIcon();
if(Part1.getIcon()==Move){
Part1.setIcon(M);
Part2.setIcon(Move);
} else if(Part3.getIcon()==Move){
Part3.setIcon(M);
Part2.setIcon(Move);
} else if(Part6.getIcon()==Move){
Part6.setIcon(M);
Part2.setIcon(Move);
}
}
if(e.getSource()==Part3){
Icon M=Part3.getIcon();
if(Part2.getIcon()==Move){
Part2.setIcon(M);
Part3.setIcon(Move);
} else if(Part4.getIcon()==Move){
Part4.setIcon(M);
Part3.setIcon(Move);
} else if(Part7.getIcon()==Move){
Part7.setIcon(M);
Part3.setIcon(Move);
}
}

if(e.getSource()==Part4){
Icon M=Part4.getIcon();
if(Part3.getIcon()==Move){
Part3.setIcon(M);
Part4.setIcon(Move);
} else if(Part3.getIcon()==Move){
Part3.setIcon(M);
Part4.setIcon(Move);
} else if(Part8.getIcon()==Move){
Part8.setIcon(M);
Part4.setIcon(Move);
}
}

if(e.getSource()==Part5){
Icon M=Part5.getIcon();
if(Part1.getIcon()==Move){
Part1.setIcon(M);
Part5.setIcon(Move);
} else if(Part9.getIcon()==Move){
Part9.setIcon(M);
Part5.setIcon(Move);
} else if(Part6.getIcon()==Move){
Part6.setIcon(M);
Part5.setIcon(Move);
}
}

if(e.getSource()==Part6){
Icon M=Part6.getIcon();
if(Part5.getIcon()==Move){
Part5.setIcon(M);
Part6.setIcon(Move);
} else if(Part2.getIcon()==Move){
Part2.setIcon(M);
Part6.setIcon(Move);
} else if(Part7.getIcon()==Move){
Part7.setIcon(M);
Part6.setIcon(Move);
} else if(Part10.getIcon()==Move){
Part10.setIcon(M);
Part6.setIcon(Move);
}
}
if(e.getSource()==Part7){
Icon M=Part7.getIcon();
if(Part3.getIcon()==Move){
Part3.setIcon(M);
Part7.setIcon(Move);
} else if(Part11.getIcon()==Move){
Part11.setIcon(M);
Part7.setIcon(Move);
} else if(Part6.getIcon()==Move){
Part6.setIcon(M);
Part7.setIcon(Move);
} else if(Part8.getIcon()==Move){
Part8.setIcon(M);
Part7.setIcon(Move);
}
}
if(e.getSource()==Part8){
Icon M=Part8.getIcon();
if(Part4.getIcon()==Move){
Part4.setIcon(M);
Part8.setIcon(Move);
} else if(Part7.getIcon()==Move){
Part7.setIcon(M);
Part8.setIcon(Move);
} else if(Part12.getIcon()==Move){
Part12.setIcon(M);
Part8.setIcon(Move);
}
}
if(e.getSource()==Part9){
Icon M=Part9.getIcon();
if(Part5.getIcon()==Move){
Part5.setIcon(M);
Part9.setIcon(Move);
} else if(Part10.getIcon()==Move){
Part10.setIcon(M);
Part9.setIcon(Move);
} else if(Part13.getIcon()==Move){
Part13.setIcon(M);
Part9.setIcon(Move);
}
}
if(e.getSource()==Part10){
Icon M=Part10.getIcon();
if(Part6.getIcon()==Move){
Part6.setIcon(M);
Part10.setIcon(Move);
} else if(Part11.getIcon()==Move){
Part11.setIcon(M);
Part10.setIcon(Move);
} else if(Part14.getIcon()==Move){
Part14.setIcon(M);
Part10.setIcon(Move);
} else if(Part9.getIcon()==Move){
Part9.setIcon(M);
Part10.setIcon(Move);
}
}

if(e.getSource()==Part11){
Icon M=Part11.getIcon();
if(Part7.getIcon()==Move){
Part7.setIcon(M);
Part11.setIcon(Move);
} else if(Part12.getIcon()==Move){
Part12.setIcon(M);
Part11.setIcon(Move);
} else if(Part10.getIcon()==Move){
Part10.setIcon(M);
Part11.setIcon(Move);
} else if(Part15.getIcon()==Move){
Part15.setIcon(M);
Part11.setIcon(Move);
}
}
if(e.getSource()==Part12){
Icon M=Part12.getIcon();
if(Part11.getIcon()==Move){
Part11.setIcon(M);
Part12.setIcon(Move);
} else if(Part8.getIcon()==Move){
Part8.setIcon(M);
Part12.setIcon(Move);
} else if(Part16.getIcon()==Move){
Part16.setIcon(M);
Part12.setIcon(Move);
}
}
if(e.getSource()==Part13){
Icon M=Part13.getIcon();
if(Part9.getIcon()==Move){
Part9.setIcon(M);
Part13.setIcon(Move);
} else if(Part14.getIcon()==Move){
Part14.setIcon(M);
Part13.setIcon(Move);
}
}
if(e.getSource()==Part14){
Icon M=Part14.getIcon();
if(Part13.getIcon()==Move){
Part13.setIcon(M);
Part14.setIcon(Move);
} else if(Part15.getIcon()==Move){
Part15.setIcon(M);
Part14.setIcon(Move);
} else if(Part10.getIcon()==Move){
Part10.setIcon(M);
Part14.setIcon(Move);
}
}

if(e.getSource()==Part15){
Icon M=Part15.getIcon();
if(Part14.getIcon()==Move){
Part14.setIcon(M);
Part15.setIcon(Move);
} else if(Part11.getIcon()==Move){
Part11.setIcon(M);
Part15.setIcon(Move);
} else if(Part16.getIcon()==Move){
Part16.setIcon(M);
Part15.setIcon(Move);
}
}
if(e.getSource()==Part16){
Icon M=Part16.getIcon();
if(Part12.getIcon()==Move){
Part12.setIcon(M);
Part16.setIcon(Move);
} else if(Part15.getIcon()==Move){
Part15.setIcon(M);
Part16.setIcon(Move);
}
}

}

}

Discussions


0
@Wei1996

9 months ago

qwe


Login / SignUp to Join the Discussion.