2 hours to develop "Penalty Shooting Game", animation demonstration ideas, the code has been open source

chatter

Recently locked at home by the epidemic, more time and less exercise, really boring! Maybe it’s God’s will, and the World Cup is here. Although this World Cup is very “cold”, it still adds some boring interesting things to us. A Java version of [Penalty Shooting Game], I have been addicted to the ball these days, I have a little time today, I will share this game with you, I hope you like it! (The game also has music, the gif cannot be played, which is a pity)

What are the games that are worth learning for everyone [key]

  • How to achieve the aiming trajectory of the ball [see Figure 1 below]? This is used in games such as QQ billiards, King of Glory, Angry Birds, etc.!
  • How to draw a three-dimensional picture [see Figure 2 below]?
  • How to achieve animation [see Figure 3 below]?

figure 1

figure 2

image 3

Game Interface Implementation Ideas & Code

Definition of Interface Terms

The interface is divided into the game area and the scoring area, and the game area is further divided into:

  • audience area
  • goal area
  • game elements
  • shooting area

Audience Area Drawing Ideas & Codes

The audience area can be drawn with swing pure code, and the idea of ​​drawing is as follows:

  • 1. Draw a background rectangle
  • 2. Draw the second row of audience
    • Draws a circle and ellipse combined into one spectator style
    • Draws a smaller circle and ellipse combined into one spectator style
    • Combine and place in row 2, and spread the entire row
  • 3. Draw the first row of audience [same as the previous step, pay attention to changing the color of the audience]
    • Draws a circle and ellipse combined into one spectator style
    • Draws a smaller circle and ellipse combined into one spectator style
    • Combine and place in row 1, and cover the entire row
  • 4. Draw two rectangular frames of different colors, and place the 'feet' that block the first row of audience in the front
  • 5. Draw a few black lines to cover the edge of the advertisement

To make it easier for everyone to understand, Brother Yong will show you an animation this time, let’s give it a thumbs up:

Reference implementation code: 

// audience background
g2d.setColor(personBgColor);
g2d.fillRect(0,y,getWidth(),100);//draw a rectangle
for (int i = 0; i < getWidth(); i+=46) {
    // audience second row
    g2d.setColor(person2);
    g2d.fillOval(i,36,16,16);//draw a circle
    g2d.fillArc(i-7,50,30,50,0,180);// Fan row
    g2d.fillOval(i+24,40,13,13);
    g2d.fillArc(i+18,51,24,49,0,180);
}
y+=90;
// audience first row
g2d.fillRect(0,y-30,getWidth(),50);
g2d.setColor(person1);
for (int i = 0; i < getWidth(); i+=46) {
    g2d.fillOval(i+7,y-41,16,16);
    g2d.fillArc(i,y-25,30,50,0,180);
    g2d.fillOval(i+31,y-34,13,13);
    g2d.fillArc(i+25,y-24,24,49,0,180);
}
// Draw advertising bars and black lines
g2d.setColor(personBgColor1);
g2d.fillRect(0,y,getWidth(),20);
g2d.setColor(personLineColor);
g2d.fillRect(0,y,getWidth(),2);
y+=20;
g2d.setColor(personBgColor2);
g2d.fillRect(0,y,getWidth(),18);
y+=18;
g2d.setColor(personLineColor);
g2d.fillRect(0,y,getWidth(),2);
for (int i = 1; i < 5; i++) {
    g2d.fillRect(getWidth()*i/5,y-38,2,38);
}
copy

Lawn drawing ideas & code

The lawn area can be drawn with swing pure code, and the idea of ​​drawing is as follows:

  • 1. Draw two rectangles of different colors
  • 2. Use two rectangles with different colors to cover the entire screen
  • 3. The height of the adjustment rectangle is incremented from the top to the bottom, presenting a stereoscopic vision

Go to the animation and give it a like:

Reference implementation code: 

// football grass
int count =0;
int h1=60;
for (int i = y; i < getHeight(); i++) {
    if(count%2==0){
        g2d.setColor(bgColor1);
    }else{
        g2d.setColor(bgColor2);
    }
    g2d.fillRect(0,y,getWidth(),h1+count*10);
    y+=h1+count*10;
    count++;
}
copy

3D drawing ideas & codes for restricted areas

The restricted area can be drawn with swing pure code, and the idea of ​​drawing is as follows:

  • 1. Draw a hollow rounded rectangle
  • 2. Use transformation technology to make the rounded rectangle have a three-dimensional effect
  • 3. Adjust the position of the restricted area frame
  • 4. Use a green rectangle to block more restricted areas

Go to the animation and give it a like:

Reference implementation code: Note that when the code is implemented, it is necessary to draw two rounded rectangles to merge and erase the unnecessary part in the middle. This part is a bit difficult. If you don’t understand, you can leave a message and I will make a video explanation for you. 

g2d.setColor(Color.WHITE);
g2d.fillRect(0,175,getWidth(),5);
AffineTransform oldTx = g2d.getTransform();
Stroke stroke = new BasicStroke(5);
g2d.setStroke(stroke);
AffineTransform tx = new AffineTransform();
tx.setToShear(-0.5, 0);
g2d.setTransform(tx);
g2d.drawRoundRect(getWidth()*5/20,175,getWidth()*6/10,120,10,10);
AffineTransform tx2= new AffineTransform();
tx2.setToShear(0.5, 0);
g2d.setTransform(tx2);
g2d.drawRoundRect(getWidth()*3/20,175,getWidth()*6/10,120,10,10);
g2d.setTransform(oldTx);
//Clean up excess lines inside
g2d.setColor(bgColor1);
g2d.fillRect(0,173,getWidth(),2);
g2d.fillRect(getWidth()*3/20+10,180,getWidth()*7/10-20,20);
g2d.fillRect(getWidth()*3/20+10,270,getWidth()*6/10-20,23);
g2d.setColor(bgColor2);
g2d.fillRect(getWidth()*3/20+10,200,getWidth()*6/10-20,70);
copy

Goal net 3D drawing idea & code

The goal net is the most difficult. It is difficult to draw three-dimensional effects with plane technology. Of course, swing is also possible. The idea of ​​​​drawing is as follows:

  • 1. Draw a rounded rectangle as the goal frame
  • 2. Draw two curved lines as the inner goalposts of the goal
  • 3. Draw multiple horizontal three-segment polylines as the horizontal goal line of the goal
  • 4. Draw multiple vertical two-segment polylines as the vertical goal line of the goal

This is more complicated, it must be animated, and I must give it a thumbs up:

Reference implementation code: 

g2d.setColor(Color.WHITE);
int step = 15;
int startX = getWidth()*4/20+20;
int centerX = getWidth()/2;
int startY = 85;
// net vertical line
for (int i = startX; i < (getWidth()*4/5); i=startX) {
    int x[] = {startX,startX+(startX<centerX?+8:-8),startX+(startX<centerX?+12:-12)};
    int y[] = {startY,startY+10,155};
    if((centerX-startX)!=-10) {
        g2d.drawPolyline(x, y, x.length);//draw polyline
    }
    startX+=step;
}
// fan column left
Stroke stroke = new BasicStroke(5);
g2d.setStroke(stroke);
startX = getWidth()*4/20+20;
int tempX[] = {startX-18,startX-2,startX-2};
int tempY[] = {startY+3,startY+10,153};
g2d.drawPolyline(tempX, tempY, tempY.length);
startX = getWidth()*4/5;
int rightX[] = {startX-2,startX-20,startX-24};
int rightY[] = {startY+3,startY+10,153};
g2d.drawPolyline(rightX, rightY, rightY.length);
stroke = new BasicStroke(1);
g2d.setStroke(stroke);
startX = getWidth()*4/20;
// horizontal line
int endX = getWidth()*4/5;
for (int i = startY; i < 156; i=startY) {
    int x[] = {startX,startX+(startX<centerX?+18:-18),endX-12,endX};
    int y[] = {startY,startY-3,startY-3,startY};
    g2d.drawPolyline(x,y,x.length);
    startY+=step;
}
int x[] = {startX,startX+(startX<centerX?+18:-18),endX-12,endX};
int y[] = {158,155,155,158};
g2d.drawPolyline(x,y,x.length);
// draw the door frame
g2d.setColor(doorColor);
stroke = new BasicStroke(9);
g2d.setStroke(stroke);
g2d.drawRoundRect(getWidth()*4/20,85,getWidth()*3/5,95,20,20);// rectangle with rounded corners
stroke = new BasicStroke(5);
g2d.setStroke(stroke);
g2d.setColor(Color.WHITE);
g2d.drawRoundRect(getWidth()*4/20,86,getWidth()*3/5,95,20,20);
g2d.fillRect(0,175,getWidth(),5);
copy

Ideas & codes for drawing power storage area

The power storage area can be drawn with swing pure code, and the idea of ​​drawing is as follows:

  • 1. Draw two fan shapes of different colors
  • 2. Overlay two sectors
  • 3. With high-quality text

It's simple, it must be animated, and it must be praised:

Reference implementation code: 

// Power zone
g2d.setColor(Color.WHITE);
g2d.fillArc((getWidth()-64)/2-80,460,224,160,0,180);
g2d.setColor(Color.ORANGE);
g2d.fillArc((getWidth()-64)/2-80,460,224,160,0,arc);
// Word
Font font = new Font("Alibaba Pratt & Whitney Medium",1,24);
g2d.setFont(font);
g2d.setColor(Color.WHITE);
g2d.drawString("Ctrl + Mouse: move the ball",30,400);
g2d.drawString("Drag the mouse: adjust the angle",50,440);
g2d.drawString("mouse click: shoot",50,480);
copy

Ideas & codes for scoring area drawing

Scale area can be drawn with swing pure code, the idea of ​​drawing is as follows:

  • 1. Draw two rectangles of different colors
  • 2. Use two rectangles with different colors to cover the entire screen
  • 3. The height of the adjustment rectangle is incremented from the top to the bottom, presenting a stereoscopic vision

Go to the animation and give it a like:

Reference implementation code: 

Graphics2D g2d = (Graphics2D)g;
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON);
g.setColor(bgColor1);
g.fillRect(0,0,getWidth(),getHeight());
g.setColor(bgColor2);
g.fillRect(0,8,getWidth(),getHeight()-8);
Font font = new Font("Alibaba Pratt & Whitney Medium",1,32);
g.setFont(font);
g2d.setColor(Color.BLACK);
g2d.drawString("Fraction",30,45);
g2d.drawString("TIME",250,45);
g2d.drawString("frequency",540,45);
g2d.setColor(textColor);
g2d.fillRoundRect(100,20,80,30,25,25);
g2d.fillRoundRect(335,20,120,30,25,25);
g2d.fillRoundRect(620,20,80,30,25,25);
g2d.setColor(Color.WHITE);
g2d.drawString(String.format("%02d",score),120,47);
g2d.drawString(String.format("%02d:%02d",time/60,time%60),345,47);
g2d.drawString(String.format("%02d",count),638,47);
copy

Goalkeeper & Ball Drawing Ideas & Code

Goalkeeper & ball painting & stone are directly using pictures here, the idea of ​​drawing is as follows:

  • 1. Load pictures
  • 2. Place the picture in the corresponding position

Go to the animation and give it a like:

Reference implementation code: 

// ball
public class Ball extends JLabel{

    int startX = 0 ;
    int startY = 0;
    public Ball(){
        this.setPreferredSize(new Dimension(64,64));
        this.setIcon(new ImageIcon(ResourcesUtil.getRootPath()+"\\ball\\football.png"));// load image
    }

}
copy
// goalkeeper
public Goalkeeper(BackgroundPanel backgroundPanel){
    this.backgroundPanel = backgroundPanel;
    this.setBounds(backgroundPanel.getWidth()/2,100,78,128);
    this.setPreferredSize(new Dimension(78,128));
    this.setIcon(new ImageIcon(ResourcesUtil.getRootPath()+"\\ball\\smy.png"));
}
copy
// Stone
public class Shitou extends JLabel implements Obstacle {
    BackgroundPanel backgroundPanel;
    public Shitou(BackgroundPanel backgroundPanel){
        this.backgroundPanel = backgroundPanel;
        this.setBounds(backgroundPanel.getWidth()/2+50,100,316,100);//Set the location of the image placement
        this.setPreferredSize(new Dimension(316,100));
        this.setIcon(new ImageIcon(ResourcesUtil.getRootPath()+"\\ball\\st.png"));
    }

    @Override
    public String name() {
        return "Stone";
    }

    @Override
    public JComponent getComponent() {
        return this;
    }

    public void start(){
    }

    public void stop(){
    }

}
copy

Tags: Java Game Development

Posted by MikeA on Wed, 14 Dec 2022 05:01:53 +0300

Hot Tags

Java Python Javascript Algorithm Front-end Linux C++ data structure Spring Back-end Spring Boot MySQL Database C Android Design Pattern Vue Vue.js Docker leetcode Go Machine Learning Big Data programming language Deep Learning Operation & Maintenance Redis Interview Programming Kubernetes html AI C# SQL css
©2023 Algorithm Zone