home download get support documentation weaver games

---

How To Make a Bouncing Ball

Let's start to program? What about a very simple program that it's equivalent to a "Hello World" in the world of game programming? Let's make an animation where a little ball is bouncing in the screen. The animation will end if any key is pressed.

Start a new project and move to it's directory typing:

weaver ball
cd ball

Now let's start to edit src/game.c. But first think: what kind of data we must store to represent a ball? We can think in a ball as a circle. A circle is represented by the coordinates of it's center (x, y) and a radius. So, in the beginning of our main function, declare these data:

  int ball_x, ball_y, radius;

But the ball will be moving. So we need to know how many pixels it moves horizontally and vertically. Declare also:

  int dx, dy;

After the function "awake_the_weaver()", we already have some usefull information to initialize some values that we declared. Let's center the ball in the screen:

  radius = 50;
  ball_x = window_width / 2;
  ball_y = window_height / 2;

The global variables window_width and window_height stores the screen resolution. They are initialized by the "awake_the_weaver" function.

Now let's make the ball move 2 pixels horizontally and 2 pixels vertically each frame:

  dx = dy = 2;

Now we can draw our ball in the screen:

  draw_circle(ball_x, ball_y, radius, RED);

This draws a red circle in the center of the screen. If you wish, you can already test this program compiling and running. Just remember that we still didn't make the ball moves. Run:

make
./ball

If everything was made correctly, you shall see a static red circle in the center of screen. If you don't want a red circle, but a green one, erase that "RED" and puts "GREEN" instead. Or WHITE, ORANGE, YELLOW, CYAN... Or write a number using the RGB code, like 0xff0000 for the red color, for example.

There are also other functions to draw geometric figures in the screen:

• void draw_point(x, y, color)
• void draw_line(x1, y1, x2, y2, color)
• void fill_circle(x, y, radius, color)
• void draw_rectangle(x, y, width, height, color)
• void fill_rectangle(x, y, width, height, color)
• void draw_ellipse(x, y, width, height, color);
• void fill_ellipse(x, y, width, height, color);

Well, it's time to make our ball moves. This only can be done in the main loop. Every frame, we need to do this:

1. Erase the ball from the screen.
2. Change it's coordinates.
3. Draw the ball again.

The first part is easy. In the beginning of the main loop, after handling the input, draw another ball in the same place that ours. But this ball will be black---the same color than the background. This erases the ball from the screen:

    draw_circle(ball_x, ball_y, radius, BLACK);

After this, let's move the ball:

    ball_x += dx;
    ball_y += dy;

It's not over yet. The ball cannot move endless in the same direction. If it hits the top or the bottom of the screen, it must change it's vertical direction:

    if(ball_y < radius || ball_y > window_height - radius)
      dy *= -1;

And if it hits the left or right side of the screen, it must change it's horizontal direction:

    if(ball_x < radius || ball_x > window_width - radius)
      dx *= -1;

Now we can draw our ball again in the screen:

    draw_circle(ball_x, ball_y, radius, RED);

Voilá. Our bouncing ball is ready. If everything was done correctly, you will see a ball bouncing over the screen after use the following commands:

make
./ball

One last thing: what we made was a red ball bouncing in a black background. But... And if we wish a white background? Easy. Before drawing the ball before the main loop, use fill_screen(WHITE). And to erase the ball, instead of draw a black one, draw a white one.