How to display a simple board?

First you have to make a little reflexion about your levels, and to draw some examples with your favourite drawing program (This is the easiest way). For your first level, you will obtain this kind of picture:

To represent this in your code, we will use the well know switch on/off for cells. In fact, we will use a 2 dimensions array of Booleans. When a cell needs to be drawn, its value will be true, else, it will be false. For our example, the file Tiles.java contains the array needed to display our level.

Now, that we have made a representation of the board, we need to choose or to draw a picture for tiles. We made this little one:

We will introduce something new, the background image in a playfield. To have a pretty representation, it is recommended to display a background image in a playfield.
For this, we use the following picture:

You can notice that the size of this picture is exactly the same as the applet's one.

To set a background image to the playfield, we only have to use the setBackgroundImage(Image) method like this:

...
    // Creates the playfield
    playfield = new PlayField(Tiles.tiles[0].length*tileSize,
			   Tiles.tiles.length*tileSize);
    playfield.setBackground(Color.white);
    playfield.setBackgroundImage(backgroundImage);
...

Now that all elements of the puzzle are presented, we will construct the board. For this, we will create a new sprite for each filled cell. The advantage, of using sprites for filled cells, is the ability for your future characters to use collision to move on tiles, but this is another story.

In our example, the cell picture is a 16x16 image, therefore each cell have the same size. We will go all over our array of Booleans by steps of 16 pixels for cells. Here is this simple engine:

...
    // Display tiles from class Tiles.
    // If the current position in the Tiles array is set to true,
    //  a new sprite is created.
    for (int y = 0; y < Tiles.tiles.length; y++) {
      for (int x = 0; x < Tiles.tiles[y].length; x++) {
	if (Tiles.tiles[y][x]) {
	  Sprite tile = new Sprite(tileImage);
	  tile.setPosition(x*tileSize, y*tileSize);
	  playfield.addSprite(tile);
	}
      }
    }
...

But do you find this board a little bit uniform?
See the next example to give a non-uniform effect.