Programming a Memory Game in Delphi - Part 3 - Drawing the Cells

Memory Game Recap

In part 1 of Programming a Memory Game we explained how to create the form and drawgrid at design time. In part 2 we started writing the actual code, in this the third part of the tutorial we will go into drawing the grid that the game is played on.

How Do We Display the Cells?

Since a cell can be in one of the three modes, it can display one of the three situations:

• AlreadyMatched: Let's display an already matched cell as white
• CellVisible: The corresponding image of the cell should be displayed.
• CellInvisible: Let's display an invisible cell as black.

In order to display a cell, we will make use of the OnDrawCell event of the draw grid.

procedure TfrmMain.DrawGridDrawCell(Sender: TObject; ACol, ARow: Integer; 
                                    Rect: TRect; State: TGridDrawState);
begin
end;   

Here, the Rect parameter indicates the corresponding rectangle of the cell that is characterized by the ACol and ARow parameters.

procedure TfrmMain.DrawGridDrawCell(Sender: TObject; ACol, ARow: Integer; 
                                    Rect: TRect; State: TGridDrawState);
var
  index : integer;
begin
  // Calculate the corresponding linear index
  index := LinearIndexOf(ARow, ACol);  

  if ModeOfCell[index] = CELL_INVISIBLE then
  begin // if mode is CELL_INVISIBLE, then make the cell black
    DrawGrid.Canvas.Brush.Color := clBlack;
    DrawGrid.Canvas.FillRect(Rect)
  end
  else if ModeOfCell[index] = ALREADY_MATCHED then
  begin // if it is already matched, then make it white
    DrawGrid.Canvas.Brush.Color := clWhite;
    DrawGrid.Canvas.FillRect(Rect)
  end
  else 
  begin // else draw its corresponding image
    DrawGrid.Canvas.StretchDraw(Rect, 
	                            Images[ImageOfCell[index]].Picture.Graphic);
  end
end;

FillRect is a canvas method, and it fills the given rectangle area with the brush color of the canvas.

StretchDraw is also a canvas method, it draws the given graphic to the given rectangle area as stretched.

OnDrawCell event is called automatically when a cell needs to be redrawn (for example, moving the window or when another window is moved on to a cell and then pulled back). But whenever necessary, we will also call this event explicitly using the following procedure:

procedure RedrawCell (index : integer);
var
  Col, Row : integer;
begin
  Row := index div 5;  // Given the linear index, find its row
  Col := index mod 5;  // Given the linear index, find its column

  frmMain.DrawGridDrawCell(frmMain, Col, Row, 
                           frmMain.DrawGrid.CellRect(Col,Row), [])
end;

When a new game is started, the cells need to be redrawn. So, in the OnClick event of the itemNewGame, we should do this:

procedure TfrmMain.itemNewGameClick(Sender: TObject);
var
  i : integer;
begin
  RandomizeThePermutationArray;
  AssignPartnerships;
  AssignImagesToCells;
  InitializeCellModes;

  for i := 0 to 19 do
    RedrawCell(i); // Initially they are INVISIBLE so they will be drawn black
end;

When we start run the project the program should look like this:

This now completes the third part of this tutorial. in the fourth and final part we will write the algorithm for playing the game and also provide full source code for download

Delphi Tutorial - Programming a Memory Game - Part 1
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

Web www.Delphi-Central.com