Programming a Memory Game in Delphi - Part 1



In this Delphi programming tutorial, we will see how the TDrawGrid component can be used to help us develop a "Memory" game (later we will also explain how to program a falling bricks game). Firstly we will describe what is involved with the Memory game

How to Play the Memory Game

This is a very simple game which we all know about. In this game, there are a number of hidden image couples, and our aim is to match them. We do this by selecting a couple of images at a time. If these two images match, we are done and left with the remaining ones. However if they do not match, they are closed and we continue from the same state. But we had better remember the places of the images we've just checked. The game finishes when no couples remain on the board. Of course, the best player will be the one that matches all the couples in minimum number of tries in minimum time.

How to develop this game in Delphi? A drawgrid would be a perfect choice for this purpose.

Adding the DrawGrid Component

First of all, let's start a new application and name the application as "Memory", the form as "frmMain", and let's give the caption the name "Memory".

Now, let's put a TDrawGrid component on our form. By default you will find the TDrawGrid component on the Additional tab. We will name this component as DrawGrid.

Our form in the Delphi IDE should now look like this:

Game form

Number of Columns, Number Of Rows, Cell Size

Before continuing further, we have to decide on the following:

  1. What will be the size of our game? That is, how many rows and columns will be there on the drawgrid?
  2. What will be the size of the cells?

Of course, as a software developer, it is always better to make the application fully customizable and leave such kind of choices to the user whenever possible. But in order to make this tutorial compact and to the point, I want to keep the number of columns, number of rows and the cell sizes fixed. I will use the following values for these:

As you have already noticed, the product of the number of rows and number of columns should be an even number, since we are dealing with couples. In this case, we will have 4 * 5 = 20 cells on the draw grid, and thus we need 20 / 2 = 10 distinct images for our game.

Let's continue to the application development from where we left and assign these values to the draw grid.

From the object inspector, find the ColCount and the RowCount properties of the DrawGrid, and assign the values above to these fields. As their names indicate, they keep the number of columns and number of rows of the drawgrid, respectively.

In the same way, assign the cell width value indicated above to the DefaultColWidth property, and cell height to DefaultRowHeight property.

Why do we have the "default" prefix in these two property names? That is because the rows and columns can be individually resized, that is, they don't have to have the same height or width. But in our application, we have nothing to do with this facility, so we will keep our row heights and column widths as fixed.

After assigning the values mentioned above and resizing the drawgrid properly in order to get rid of the unnecessary blank space on it, our form will look like this:

Game form with TDrawGrid

Those cells that are in gray are the cells of the fixed columns and fixed rows. They are generally used for labeling the rows and columns. For example, if this was a chess application, we would label the cells on the single fixed row as A, B, C ... and on the cells on the column as 1, 2, 3 ... etc. But in our application, we do not need such a labeling, so we can remove the fixed row(s) and column(s). We can do this by changing the values of the FixedCols and FixedRows properties.

FixedCols := 0;
FixedRows := 0;

Now, our form should appear as follows:

Programming Memory Game DrawGrid

We are now ready to start coding. But before this, we need to do one more thing:

We keep the cell sizes fixed. If the user wants to resize the form or maximizes it, this will lead to a bad appearance. In order to prevent user from resizing the form, change the value of the BorderStyle property to bsSingle. In order to prevent him/her from maximizing the form, extract the biMaximize from the BorderIcons property of the form by making it False.

To carry on this tutorial please follow the link to Programming a Memory Game in Delphi - Part 2 - Starting to Code

Programming a Memory Game in Delphi - Part 2 - Starting to Code
Programming a Memory Game in Delphi - Part 3 - Drawing the Grid
Programming a Memory Game in Delphi - Part 4 - Coding the Algorithm

Delphi Central - Delphi Programming Tutorials, Hints and Tips