Tutorial

Bounce a ball

Well Ok we are now able to move a ball across the applet without any flickering of the screen. This means that we know the two most important steps to program a game with animated objects. In this chapter I want to tell you, how to change the movement direction of the ball. This is the first time, that we can't solve a problem by a "standard" technique, as we could do in the chapters before (Double buffering...). But I'm sure if you understand the solution, you will have your own ideas once you are in a similar situation. In our last two applets, the ball is moving across the applet area just one times. But now we want to avoid, that the ball is leaving the applet area, instead the ball should bounce in the opposite direction if it hits a wall. What shall we do? It would be good, if you would stop reading now and try to find a solution by yourself. In the following chapter you'll get to know my solution (which is not the only one!). Please use the "Ball" - applet with double buffering as the basic code for this chapter!

How to move a ball in different x - directions

First of all we have to think of the technique we used to move the ball in the second chapter. What did we do? Well, we increased the x - position of the ball every time the thread was executed and and repainted the ball at the new position. Maybe you didn't realize it, but we used a "speed vector" for the x - direction of the ball, everytime we changed the x - position of the ball by calling x_pos ++ in the run - method. That means that we can also define a variable called x_speed that stores the value which will be added to x_pos by calling now x_pos += x_speed . Imagine, x_speed has the value 1, this means, that the ball is moving from the left to the right hand side (same direction a in the chapter before), because x_pos will be increased by one everytime the run - method is executed. Now it is really easy to change the direction of the ball. We only have to set the value of x_speed to -1! This means, that everytime we call x_pos += x_speed -1 is "added" to the x - position of the ball. That way the value of x_pos is decreased by one and the ball is moving from the right to the left hand side!

Now we are able to change the direction of the ball! And there is just one "problem" left! How can we (the computer) decide, when to change the direction? Well, we have to test everytime we execute the run method, at what x - position our ball is. The code to do this looks like this:

// Ball is bounced if its x - position reaches the right border of the applet
if (x_pos > appletsize_x - radius)
{
// Change direction of ball movement
x_speed = -1;
}
// Ball is bounced if its x - position reaches the left border of the applet
{
// Change direction of ball movement
x_speed = +1;
}

Everytime we execute the run - method we test if the ball has reached one of the borders (left or right). If this is the case, we change the value of x_speed and that way we are able to change the direction of the ball movement.
You might be asking why I use the radius of the ball in the code above. The x - position of the ball is its middle point, which means that the left or the right border of the ball is its x - position plus or less the radius. To make us believe that the ball would be bouncing when it hits the wall, we have to add or substract the radius to / from the the value of x_pos.

How to "beam" the ball

Once you understand the technique of how to test where the ball is, you can implement many other things. Imagine we want to let the ball appear on the other side of the applet once the ball has left the applet area. That's very easy to do, we have to test again, where the ball is and then we have to set a new x - position for the ball instead of changing the value of x_speed.

// Test if ball has left applet area if (x_pos > appletsize_x + radius)
{
// Set a new x_pos value for the ball
x_pos = -20;
}

Later, in chapter 5, I will talk about how to move a ball not only in an one dimensional way but in a two dimensional area (which means in x and y direction). That is really easy to do. You will have not only one vector (x_speed) but two (x_speed, y_speed), and a y_pos and a x_pos. If one changes both values everytime run() is called the ball will be moving over the whole area. But of course we have to test 4 different possibilities, where the ball could leave the applet. If you want to, you can program a applet where the ball can move in different directions (2D) and is bouncing from every border of the applet (would be a good practise ;-). Ok, that it, take a look at the applets and download the code!

Next chapter

Using sounds in applets
 Fabian Birzele, 2001-2004. web-design: Vadim Murzagalin, 2004.