JAVA Catch the Eggs Game Programming part1

TUTORIAL NO 6

JAVA Catch the Eggs Game Programming part1

In this tutorial you will learn: 1.Game Programming 2.CardLayout 3.Changing screens in the game 4.Internal Classes 5.Swing Animations 6.Event handling 7.JAVA awt 8.JAVA swing 9.Adapters 10.BoxLayout Today I am going to teach you how to make a simple yet fun game in JAVA. This tutorial will be divided into two parts so that thing remain simple and everyone could easily understand. In this game as the name suggests eggs are falling off and you have to catch them in a tray to gain more and more points. In this tutorial we will be working in JAVA SWING. We will setup JPanels for every screen so that we can easily switch between the menu , game and other panels. In this tutorial we will link everything like the menu’s help and game panels using cardlayout and in tomorrow’s tutorial we will program our main game. Basic step: Download and install ECLIPSE and set up a JAVA PROJECT. Then create a new class and name it CteGame (short for catch the eggs game ). Then follow the steps 1.IMPORT STATEMENTS First of all write these import statements in your .java file
  1. import java.awt.*;
  2. import java.awt.event.*;
  3. import javax.swing.*;
  4. import javax.swing.event.*;
We require event import for mouse click, awt and swing imports for visual design and animation. We will be using separate classes for JPanels and a public class for JFrame setup in which we will link every panel with cardLayout. First thing is setting up the panels and after that we will setup a class in which we will setup the frame. Then we will do composition i.e make and object of the panel class and add it to frame. 2.SETTING UP THE MENUPANEL CLASS
  1. class MenuPanel extends JPanel{
  2.  
  3. JButton play = new JButton("");
  4. JButton help = new JButton("");
  5. JButton exit = new JButton("");
  6.  
  7. Image menubkg = new ImageIcon("images\\menubkg.png").getImage(); //menu background
  8.  
  9. /* Setting icons on buttons */
  10. ImageIcon playbtn = new ImageIcon("buttons\\play.png");
  11. ImageIcon helpbtn = new ImageIcon("buttons\\help.png");
  12. ImageIcon exitbtn = new ImageIcon("buttons\\exit.png");
  13.  
  14. JPanel center = new JPanel(); //adding another jpanel in a panel for boxLayout
Here we made three buttons play, help and exit, included the background image from our image folder and added icons for the buttons. After that we created another panel to implement the boxLayout for adding the buttons vertically in the middle.
  1. MenuPanel(){
  2.  
  3. center.setLayout(new BoxLayout(center,BoxLayout.Y_AXIS)); //setting box layout
  4. add(center); //adding the panel to another JPanel
  5.  
  6. /* setting icons on buttons */
  7. play.setIcon(playbtn);
  8. help.setIcon(helpbtn);
  9. exit.setIcon(exitbtn);
  10.  
  11. /* adding the buttons in the panel */
  12. center.add(play);
  13. center.add(help);
  14. center.add(exit);
  15.  
  16. /* adding mouseListeners on buttons */
  17. play.addMouseListener(new Click());
  18. help.addMouseListener(new Click());
  19. exit.addMouseListener(new Click());
  20.  
  21. }//end constructor
In the constructor we first set the center panel layout to box layout with vertical axis because we want the buttons to be aligned vertical. Then we add that panel to the class panel. After that we set the icons for the buttons and add those buttons to the center panel and implement mouselisteners on the to catch the mouseClick by creating an object of internal class (which is extended from mouseAdapter) and passing it as parameter.
  1. class Click extends MouseAdapter{ //internal friendly class
  2.  
  3. public void mouseClicked(MouseEvent me){
  4. if(me.getSource()== play){
  5. CteGame.cl.show(CteGame.cards, "GamePanel"); //show gamePanel when play is clicked
  6. }
  7. if(me.getSource()== help){
  8. CteGame.cl.show(CteGame.cards, "HelpPanel"); //show helpPanel when help is clicked
  9. }
  10. if(me.getSource()== exit){
  11. System.exit(0); //exit application when exit is clicked
  12. }
  13. }//end mouseClick
  14. }//end mouseAdapter
Now we will write the internal class which we named Click. We inherited MouseAdapter class and override the mouseClicked function to implement functionality on play, help and exit. First of all we checked the source of the button i.e which button is clicked. Then we switch our card to that panel. When play is pressed we switch to GamePanel. If help is pressed we switch to HelpPanel and we switch to exit when exit is pressed. (REMEMBER: cardlayout object cl, all the panel objects and the cards panel containing the cardlayout are declared static in our public class which we will define later below ).
  1. public void paintComponent(Graphics g){
  2. super.paintComponent(g); //calling the super class functions
  3. Graphics2D g2d = (Graphics2D)g; //casting to graphcis2D
  4. setFocusable(true); //setting the focus on the panel
  5.  
  6. g2d.drawImage(menubkg, 0,0, null); //draw menu image
  7. repaint();
  8. }//end paintComponent
  9. }//end GamePanel
In the paintComponent of this panel we simply draw the menu background. And set the panel focusable for the listeners. 2.SETTING UP THE HELPPANEL CLASS
  1. class HelpPanel extends JPanel{
  2.  
  3. Image helpbkg = new ImageIcon("images\\helpbkg.png").getImage(); //help image background
  4. JButton back = new JButton("Back"); //back button
  5.  
  6. HelpPanel(){
  7. setFocusable(true); //setting the focus
  8. add(back); //adding back button in the panel
  9.  
  10. back.addMouseListener(new MouseAdapter(){
  11. public void mouseClicked(MouseEvent me){
  12. CteGame.cl.show(CteGame.cards, "MenuPanel"); // show menuPanel when back button is clicked
  13. }
  14. });
  15. }//end constructor
  16.  
  17. public void paintComponent(Graphics g){
  18. super.paintComponent(g);
  19. g2d.drawImage(helpbkg, 0,0, null); // draw help background
  20. repaint();
  21. }//end paintComponent
  22. }//end class
This is a very simple panel and in this panel we just need to insert an image to show the instructions and a back button to go back to the menu. For that we first added the help image from our image folder. Then created a back button. After that we start writing the constructor in which we added the listener on our back button and change the card to menuPanel when the button is clicked. As for the paintComponent we simply used it to draw the background image. 3. WRITING THE GAMEPANEL CLASS We will write this class in our next tutorial. This is the main class in which we will be coding the game part. For now Leave it as it is.
  1. class GamePanel extends JPanel{
  2.  
  3. // In Catch the eggs game programming tutoiral part 2
  4.  
  5. }//end class
4. WRITING THE PUBLIC CTEGAME CLASS
  1. public class CteGame extends JFrame{
  2.  
  3. static MenuPanel mp = new MenuPanel();
  4. static HelpPanel hp = new HelpPanel();
  5. static GamePanel gp = new GamePanel();
  6.  
  7. static CardLayout cl = new CardLayout();
  8. static JPanel cards = new JPanel(); // to contain the panels as cards
  9.  
  10. CteGame(){
  11.  
  12. cards.setLayout(cl);// setting the layout to cardlayout
  13. cards.add(mp, "MenuPanel");
  14. cards.add(hp, "HelpPanel");
  15. cards.add(gp, "GamePanel");
  16. cl.show(cards, "MenuPanel");
  17. add(cards); //adding the panel with cardlayout in JFrame
  18.  
  19. setTitle("Catch The Eggs Game");
  20. setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  21. setSize(1024, 700); //frame size
  22. setVisible(true); //frame visibility
  23. }//end constructor
  24.  
This is our main frame class in this class we are creating static objects of all the panels, cardlayout and JPanel. After that we started writing the constructor. In the constructor we first set the Layout of JPanel (named cards) to cardlayout. Then we add other panels in that Jpanel. After that we set the first card to menu panel as the main game screen. Then we set the title of the frame , close operation, size and visibility. 5. DEFINING THE MAIN FUNCTION
  1. public static void main(String args[]){
  2. new CteGame();//making an object
  3. }//end main
  4. }//end class
  5. class Animation
In the main function we only created the object of the JFrame class and our game is 50% complete. Right now when we open we click help button on the menu we go to the help panel and when click back we come back to the menu. We can exit by clicking exit button. OUPUT: output

Comments

Add new comment