Mosaic: Design of the game

Before we get started with programming, we will design the game first.

2.1 - Basic idea

The idea is to create a simple shuffle-puzzle. An image is divided in tiles which are mixed up, the goal of the game is to shuffle the tiles into place to make the image appear:

Puzzle phase 1Puzzle phase 2
Puzzle phase 3Puzzle phase 4

2.2 - Tiles window

The window with the tiles will be an ownerdrawn static control, i.e. it's a static control, it just displays something, but it is drawn by the program itself. A bitmap of 200 x 200 pixels is used for the tiles. First, the bitmap is loaded, then the 3D-borders that represent the tiles are drawn over the bitmap. When drawing the tiles, the program finds out which part (tile) of the bitmap should be displayed on a specific tile position, then copied to an image buffer (the backbuffer). When all drawings are done, the backbuffer is copied to the static control and is displayed. The backbuffer prevents flickering when drawing the static control, because all drawing is first done invisible on the backbuffer, then the completed image is displayed on the static control.

2.3 - Tile positions and coordinates

The program uses different forms of tile positions and coordinates.

The tiles are indexed like this:

Tiles positions

(when playing the game with numbers instead of a picture, they are numbered 1..16 of course)

There are three coordinate systems for the tiles: one in tile coordinates (0,1,2,3), one in real screen coordinates, relative to the left topmost pixel of the image above, and one in the static control coordinates, which includes margins to display the tiles in the center:

2.4 - Program flow

The basic program flow will be:

  1. Display the tiles
  2. The tiles are shuffled according to the difficulty level
  3. One tile is removed (tile 16 at tilepos 15) (otherwise it would be hard to shuffle :)
  4. When the user clicks on the static control, a procedure is called to find out which tile the user clicked on.
  5. The program checks if the tile clicked on can move (i.e. if the empty tile is surrounding the clicked tile)
  6. If not, it does nothing
  7. If yes, it finds out how to move the tiles, does the move and updates the static control to display the change
  8. It checks if the puzzle is solved, if yes the full image is displayed and statistics are shown.
  9. A counter is incremented to count the number of moves the user has taken
  10. A timer starts running when the user makes the first move to measure the amount of time the user took to solve the game