Basic structure of an applet
Move a ball
Double buffering
Ball bouncing and change the direction
Using sound in applets
Using pictures in applets
Mouse events
Keyboard events
The first complete game
Artificial intelligence for a pong like game
Generation of random 2D landscapes

In this chapter I want to teach you the method to create 2D landscapes I used in my game Castles. Again, I won't talk about the Main class, which controls the applet in general and I won't talk about the Stars class, that paints the stars in the background. But both classes are pretty simple, so I think it will be no problem for you to learn them by yourself if you want to. Before we start programing, we have to know what our "problem" looks like.

The problem

We want to generate a 2D landscape that looks like the "Rocky Mountains" and can be used in a game like "Castles". This landscape will look different in every game, so it's not possible to use *.gif's or something like that. We want this landscape to be generated at random. Also we want to have the possibility to change it afterwards for example if "bombs" hit the ground. Another important thing is, that the datastructure of our landscape mustn't be too complicated, so that the game is still running fast and the amount of data is not too big. I'm sure, there are many different solutions to this problem one could think of. Let's talk about mine:

Idea and outline of the algorithm

To produce as little data as possible, I want to generate my landscape out of many lines and not out of single points/pixels. The basic idea is to draw a vertical line for every pixel of the length of the landscape. Now we choose the lower point of all lines as constant. So we only have to store the upper point, the "surface" of the landscape that will have different values for every line, in a array.

First of all one has to recognize, that it doesn't make sense to choose every upper point at random. If you want to generate a "landscape" this way, you wouldn't get a structured surface, instead your "surface" would look like the picture beside this text.

To generate a real surface is a little bit harder. First of all I will show you the basic concepts of the algorithm, then afterwards, you get the method I used in Castles as a Java program. Remember, that we leave the lower point of every line constant and change/store the upper point only!

  1. First of all we choose a start value at random and store it in a array
  2. Now we initialize the second upper point (the second line) with a value 1 pixel higher or smaller than the one before (the first one).
  3. We initialize all values of the array this way, adding or subtracting 1 to the value before the value we want to initialize.
  4. The decision of adding or subtracting is made by random. The propability to change the direction (from adding to subtacting and vice versa) is 10% the propability to do the same operation (adding or subtracting 1) as before is 90%.

Beside this text you can see the result of this pretty simple but pretty effective algorithm and it is realy not bad. There are just a view small problems. First of all it happens pretty often, that "mountains" are higher and "valleys" are lower than the appelt size. Another "problem" is, that this landscape looks a little bit boring, I think. So I will present you an algorithm that solves these problems and adds some additional features to the landscape like changing colors. Here we go:

The "final" algorithm

          // Ändern der Richtung
          faktor = - (faktor);

          // new plus (value 1 or 2)
          plus = 1 + Math.abs(rnd.nextInt() % 2);
          // Ändern der Richtung
          faktor = - (faktor);
          // if color value get's too high
          greenvalue -= 10;
          // if color value get's too small
          greenvalue += 10;
      • // get the value before the actual position and store it in last
        last = map [i - 1];

        // Decision if changing direction or not
        change = Math.abs(rnd.nextInt() % 10);
        // changing direction and possibly plus
        if (change > 8)

        /* Make sure that surface values stay in a certain range */ if (last > 350 || last < 120)

        // Make sure that color values stay in a certain range
        if (greenvalue > 240)
        else if (greenvalue < 100)

        // Calculate and store surface value on position i
        map [i] = last + (faktor * plus);

        // Calculate and store color value on position i
        greenvalue = greenvalue + (-faktor * plus);
        colors [i] = new Color (redvalue, greenvalue, bluevalue);
    • /* initialize plus, this variable tells you which value will be added or subtracted from the last value. */
      plus = 1;

      // initialize variable factor which decides if + or - value of plus faktor = 1; // Initializing start value of the surface
      start = Math.abs(300 + (rnd.nextInt() % 50));

      // Store start value on the first position in the array
      map [0] = start;

      // Initializing start values for the colors
      int greenvalue = 200;
      int redvalue = Math.abs(rnd.nextInt() % 200);
      int bluevalue = Math.abs(rnd.nextInt() % 201);

      // Storing first RGB value in the Color array
      colors [0] = new Color (redvalue, greenvalue, bluevalue);

      // Loop to initialize all array positions
      for (int i = 1; i < mapsize; i ++)
  • public void generateLandscape ()

If one has initialized all array values that way one can paint the landscape. The easiest way to do this is to get all values of the arrays with a for - loop. Then draw a line from the bottom of the applet (constant value) to the surface array value. The x - coordinate is the array position of the value. Draw the line in the corrosponding color out of the color array. You can see the result of this method besides this text. As I mentioned, there are many different possibilitys to generate a landscape (for example one could calculate and store single points instead of lines) but my algorithm is fast and doesn't generate a too large an amount of data. And at least the result is not too bad. Ok, that's it, if you have another good method to generate a landscape (maybe even 3D) write me. Here comes the source code and the applet!

Sourcecode download (*.zip - archive)
Take a look at the applet