The Skeet Shooting Game

Introduction

We have created a custom shape button that do nothing in the previous post. Now we are going to do some interesting thing. We will create a simple shooting game based on the idea of a custom shape button. We will use the API of Graphics2D extensively. The final playable version is less than 200 line of codes. Yet you would see real examples on how to rotate, scale and translate a image using the Graphics2D API. You would also see how to create a customized JComponent.

Star.svg

We will use a star as a moving target for our shooting game. I have found one on the web:
http://en.wikipedia.org/wiki/File:Star*.svg
The license says that it is in public domain. I would happily use it in my game.


If your browsers support SVG graphics, you will see a star above. If you right click it and view the source, you will see the following :

The above SVG source can be easily converted into a Java program as follows.
Compile it and test it.

Rotating Star

In order to make the game more interesting, we will make a rotating target. The original dimension of the star is 300x275. This is not a square and therefore not very desirable for rotation. So we would first make the dimension to become 300x300. Find the following line: and replace it with: Since we add 25 pixels in the y-dimension, we need to shift down the star by 12.5 pixels to keep the center of the star align with the center of the JComponent. We can add 12.5 to every y-coordinate of the polygon. Or we may just use the translate() method provided by Graphics2D. To implement the rotation, we just need to invoke the rotate method : We don't need the outline of the star, so we remove the last two statements from paint() Finally we want the star to keep rotating. We would use a Swing timer so that it will fire an ActionEvent on every 15ms. Of course we need to handle the timer event. We will just rotate and repaint the component. And finally we have a full source code for the rotating star.
Compile it and test it.

Clickable Star

To make the star clickable, we would use the technique in the previous article. We are going to treat the star as a custom shape button. First we would need to implement the MouseListener interface. We would need to provide implementation of all the five methods even we have nothing to do, just like above.

We would also need to tell our JComponent to listen to the mouse event. Hence the following statement is added to the constructor. We are going to let the star explode whenever it is clicked. I have chosen a simple "beam explosion method" for simplicity. It just need eight line of codes: The idea is to radiate 30 random beams from the explosion center. The length of every beam is random. If the center of explosion is (0,0), then the beam will radiate to a random point (x,y),

where -20 ≤ x < 20 and -20 ≤ y < 20

Note that (xExplode,yExplode) is the real explosion center, hence the coordinates in the drawLine() method are adjusted.
Now we have everything ready. We will rewrite mousePressed() method to start an explosion when the star is clicked. Just look at the source code together with the previous article. It should not be too complicate to understand.
Remember to compile it and test it.

Moving Object

I have written a series on "Moving Objects and Sprite Manager". You may visit the "Featured" page to find the link. A moving object is a object with non-zero velocity. It is simple to define the velocity in terms of pixels per frame. In the sprite manager series, I have used xv and yv to name the velocity in the x and y dimension. However, I am going to use dx and dy here. You may soon see the reason. If you know something about Physics and Calculus, you may know that velocity is actually defined by :

                            dx
velocity in x dimension =  ----
                            dt

                            dy
velocity in y dimension =  ----
                            dt

Since we are defining velocity for a unit time frame, we may treat dt as one, and hence we may just use dx and dy to represent the velocity.

Gravity Effect - Vertical Acceleration

Acceleration is the rate of change in velocity, therefore it is the "delta of delta y" per unit time. Therefore we would name it as ddy. Now we can initialize our moving object.

To move the object, we will update the position of the object for each frame The above background is enough for understanding the following sample.
Remember to compile it and test it.

And finally, The Skeet Shooting Game

We will now implement a skeet shooting game. The rotating star would be our shooting target. The game will finish after 20 targets are launched.