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.
Since a cell can be in one of the three modes, it can display one of the three situations:
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;NOTE: In order these to take effect, make the DefaultDrawing property of the drawgrid False.
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