Delphi

First a few words about the visual programming language Delphi.  This is the development software Borland Delphi from Inprise, earlier versions (2 and 3) of which have been given away free on magazine cover CD's.  A  example being Delphi 3 Pro on the cover of PCPlus March 2000.  I have used version 2 for most of my development work.   So hopefully, if you do not already have a version of Delphi, you can get hold of a free version from cover CD's to follow this tutorial.    

In Delphi, you start with a blank form which is the main window  and drop onto it standard components from an extensive range available in easily accessible tabbed libraries.  The way the components react when clicked by the mouse etc. can be set from the standard properties of the component in the Object Inspector with further actions programmed in Pascal in the code window where needed.  These actions are called 'events' and code is attached to these events which makes Delphi an 'event driven' development program.  The whole lot is then put together and compiled into an executable (.exe) file automatically when you run it.  This site focuses on the use of Delphi for a particular application, rather than introducing the beginner to programming in Delphi.  So, if you are not familiar at all with Delphi and programming in Pascal I suggest obtaining and going through one of the many introductory tutorial type books available for Delphi or visiting one of the Delphi centred web sites with tutorials.  You do not need to be an expert or even experienced Delphi and Pascal programmer to follow the following progam development, but you will need to have a basic working knowledge.

Return to Index 

The Game of Tangled Fishing Lines

This is the well known game of tracing tangled fishing lines to find out what catch each fisherman has got.  The flexibility of computer-based versions of this game has been exploited a bit by including increasing levels of difficulty as the amount of tangling is increased.  The game looks like this when run by clicking the Draw Button:

You trace the line of each Fisherman and set the number of each catch in the Answers box and the click the Reveal button to see if you are correct.  In this case it would give the result seen in the picture at the top of the page.

In this Delphi based game, you can see the main window with a number of components positioned on it - some buttons and edit and memo boxes above the drawing and some labels, edit boxes, radio buttons and spin buttons below.  We will discuss the siting, operation and programming of each of these components in turn, the drawing of the fishermen, the catches and the tangled lines to obtain the completed program.

 Return to Index

Adding the Buttons

The objective is to provide the user with buttons that will
1.    Clear the drawing space and draws 3 random sets of fishing lines.
2    Reveal each line in a different colour
3    Tell the user about the game and how to play
4.    Exit the game

Click a button to select it and its properties will show in the Object Inspector on the left.  For each of the buttons, change the Caption text from the button number to Draw (Button1), Reveal (button 2), About (button3) and Exit (button4). Also change the font to bold in each Object Inspector.  Double-click a button and the outline of its click procedure will be automatically written in the code window with the cursor ready for any user code to be entered in the procedure.  Double-click the Exit button and enter the code Close; so that clicking that button will exit the program when it is run.  Double-click the Draw button and enter the code DrawLines; which is the name of the drawing procedure that we will write.  We can also give the Form a heading by clicking anywhere on the form (away from any components) and changing the caption in its Object Inspector to something like Fishermen's Tangled Lines.

 Return to Index

Adding the Memos, labels and Edit Boxes

Drop two Memo components from the standard Tab onto the form, resizing and positioning between the buttons as shown in the figure at the top of the page, and then do the same for two Edit Boxes.  Click the top Memo and then double-click the (TStrings) in Lines in its Object Inspector and enter the text Wins in a row in the String Editor that pops up.  Change the font to bold in the Object Inspector.

Do the same for the other Memo, entering Highest Run this time.  In the two edit boxes, enter 0 (zero) in the Text in their Object Inspectors.

We will now add the Answers Box and the Difficulty Box near the bottom of the form.  Drop a Group Box from the Standard Tab onto the form towards the bottom.  Repeat this for another Group Box to the right and resize and position them as shown below.  Select the GroupBox1 and then drop 3 Label components and 3 Edit boxes into the GroupBox from the Standard Components tab and then 3 Spin buttons from the Samples Component Tab.  Arrange them in three groups of Label, Edit Box and Spin Button as shown in the picture below.  Select the GroupBox2 and drop 3 radio buttons into the GroupBox from the standard Tab.  Arrange them vertically as shown in the picture below. 

Select GroupBox1 and in its Object Inspector, change the label to Answers and the font to bold.  Click label1 and in its Object Inspector change the caption to the name Blue and then click font and choose bold and colour blue.  Repeat this with Red for label2 and Green for label3.  Select GroupBox 2 and change its label to Difficulty.   Click Radiobutton1 and in its Object Inspector change the label to Easy and the font to bold and colour Teal.  Repeat this with Regular and colour purple for Radiobutton1 then with Hard and colour Maroon for Radiobutton3.

The main game components, as seen in the picture at the top of the page, are now in place and it remains to develop some icon type images for the fishermen and the catches and then link them all together with some Pascal programming code, most of which goes into the procedures automatically created by Delphi.

 Return to Index

Making the Images

Delphi contains an Image Editor which can be accessed through the Tools Menu.  This can be used to create a Resource File which is included in the program to provide the images needed.  You need to decide on the size of each image and then create the required images.  In this case we need to create a Fisherman (and copy it for two more) and the three catches (fish, boot and starfish).  Open the Image Editor and click the File Menu, then New and Resource File.  Right-click Contents and choose New Bitmap with a height and width of 50 and with VGA 16 colors.  This creates a blank 50x50 pixel bitmap named Bitmap1.  Right-click the name Bitmap1 and rename it F1. Now double-click F1 to get the blank bitmap, clicking View and Zoom to get a better size which should show some useful gridlines.  

Using the simple tools on the left side panel, create an image of a fisherman, coloured blue as seen in the picture of the game at the top of the page (and below).  You can probably make a better looking job than I have for this!  When you have finished, right-click the name Bitmap (under the name Contents) and select New and Bitmap to create a second bitmap which you rename to F2.  To copy your masterpiece from F1, click the Bitmap F1, then the Edit menu, choosing Select All (a white square of moving dots should surround the bitmap).  Click the Edit Menu again and select Copy.  Now click the bitmap F2 and select Paste to copy the F1 bitmap into F2.  Change the colour of the Fisherman to red and repeat the sequence to create bitmap image F3, the green Fisherman.  

Now carry on with this routine to create three more bitmaps which you can name C1, C2 and C3 for the three catches.  You can of course please yourself what you draw (let rip with your imagination!) and what size you make each one (not too large to block out fishing lines).  I used 30x20 for the Fish, 30x30 for the Boot and 20x20 for the Starfish.  The completed contents of Fish.res with two example bitmaps are shown below.

When you have finished click the File Menu and Save and change the name of the Res File from Untitled1 to Fish and save it (Fish.res) in the same directory as your Delphi files.  You can bring up the Image Editor anytime and edit any of the bitmaps to get them the way you want.

 Return to Index

Adding the code

Before you forget, add the compiler instruction to include your Resource file straight away.  Start at the top of the Pascal Code window in Delphi and go down past the Procedure declarations to the word Implementation after which add the line {$R FISH.RES} making sure you use the 'curly' brackets.

Most of the code that is needed for events with each component is pretty routine, like the code Close; we added to the Exit Button click event (that's all that's needed for that component).  Since everybody has their own way of adding code, I will not go into detail here of each line of code that I have used,  Instead, I will endeavour to mention what code is needed for each event in the program.  You will probably find that it is very much a trial and error process to develop the code and get the program running properly.  If you cannot get the program to work properly after many trials you can always Email me with questions, or if all else fails, for sample code!

DECLARING VARIABLES
First of all you will need to declare some global variables which can be used in any Procedure.  Before the heading Implementation in the code window, below the code Form1:TForm1 under the heading Variables, declare two integer variables to hold the x and y co-ordinates when drawing the fishing lines  e.g. s,t:array[1..3,1..8] of integer; then another, e.g. r:array[1..3] of integer; to hold the random numbers generated for the co-ordinates.  Then declare two integer variables, e.g. n,a:integer; and a Boolean variable e.g. refr:Boolean; to set whether black or coloured lines are to be drawn (set to false for black and true for coloured).   Also add a constant e.g. b=5; and declare a bitmap type under the heading Private further up in the code e.g. bmp:Tbitmap; to facilitate drawing the bitmap images in the Resource file.  The declaration part of the code should look something like this:

private
            Bmp:Tbitmap;
public
          { Public declarations }
end;
           const b=5;
var
           Form1: TForm1;
           s,t:array[1..3,1..8] of integer;
           r:array[1..3] of integer;
           n,a:integer;
           refr:Boolean;
implementation
{$R *.DFM}
{$R FISH.RES}

FORM1
Click the form and choose the Events tab in the Object Inspector.  We need to program two events for the Form, OnCreate and OnPaint.  
OnCreate:
This event occurs at program startup and we can initialise by clicking it and adding the code:  Bmp:=TBitmap.create; n:=0;    
OnPaint:
This event occurs when the program refreshes (redraws itself), so all of the drawing we need to do (The fishermen, the tangled lines and the catches) is drawn here. This ensures that none of the drawing is lost if temporarily covered by something else.  I did the drawing with a Do Loop that loops three times (counter j=3], drawing a fisherman, his line and catch each time.  The x and y co-ordinates for the line were set in the s and t array variables in the Drawlines procedure to be discussed shortly.  The fisherman is drawn using the code Bmp.Handle:=LoadBitMap(HInstance,'F1'); followed by the Delphi draw code Form1.canvas.draw(x,y,bmp); where  x,y is the required position of the image bmp, now containing the fisherman  F1 from the Resource File.  The line is now drawn using a loop with the counter i = n (set initially to the easy level of 5 turns) containing the Delphi draw code canvas.lineto(s[j,i],t[j,i]);, where s[j,i] and t[j,i] are the x and y co-ordinates at the end of the line. The variable j is 1 for the first Fisherman, 2 for the second and so on.  After this the catch bmp is drawn, using the bmp.handle and Form1.canvas,draw routine with x and y set at the end of the last line drawn.  The only other thing to mention is to set the pen color to the fisherman colour if the Reveal button is clicked (i.e. refr=true) with something like a Case Statement before the line drawing e.g.
If refr then
case j of
1: canvas.pen.color:=clblue;
2: canvas.pen.color:=clred;
3: canvas.pen.color:=clgreen;
end;

BUTTON1 (Draw)
In the Button1.Click procedure include code to check which radio button is checked to set the number (n) of fishing line turns e.g. if radiobutton1.checked then n:=5;  with similar ones, with increasing values of n, for the other radio buttons.  Also set refr:=false; to draw black fishing lines, set the Answers edit boxes to 1 e.g. edit3.text:='1';, then refresh the program with the code refresh; and finally call the procedure drawlines; to set the co-ordinates for the fishing line drawing.

BUTTON2 (Reveal)
Here you set Refr:=true; followed by Refresh; to redraw the Fishermen's lines in colour.

BUTTON3 (About)
This can be used to make a Panel or Memo visible that contains your instructions on how to play the game.  Click the Panel or Memo component in standard tab and place it over the form.  It will obscure some of the drawing space, buttons etc. but it can be made invisible until button3 is clicked, by clicking the visible property in its Object Inspector so that it is false.  Now add the text that you want to the Panel or Memo and in the Button3Click procedure (double click Button3 to get the empty procedure) add the line of code e.g. Panel1.visible:=true;. You will need to add a button to the panel, for the user to click to hide the panel again - I used a Bitmap Button from the Additional Tab which has a built-in graphic of a tick and OK.  The Click procedure for this button will need the code Panel1.visible:=false;.

DRAWLINES
This is a procedure that we need to write ourselves, to generate the random co-ordinates of each fishing line turn and store them in the s and t array variables to be used in the line drawing routines in the Form1 'OnPaint' event.  Take a deep breath and after the end of the Button1Click procedure in the code, type in:   
procedure TForm1.drawlines;
var
begin
end; 
to form the outline of the procedure.  The next thing is to declare the procedure in the headings near the top of the code so just above the private sub heading and below the last procedure declaration type:
procedure drawlines;
Into this procedure goes the routines to fill the s[j,i] and t[j,i] arrays with the x and y co-ordinates of each turn of each fishing line.  For the first fisherman, j is set to 1 and a loop set up to enter n random x values into s and n random y values into t (both for i from 1 to n).  You must make sure that x and y are limited in value to keep the tangled lines within the Form1 window space between the buttons at the top and the group boxes at the bottom.  This is an interesting problem, which I hope you enjoy solving!

 GENERAL
That should be the main game parts in place and it remains to add a few extras including: the scoring of Wins in a Row and Highest Run, according to the success with the Answers settings; Panels or Memos to acclaim a win or say Hard luck for a loss or acknowledge a good number of Wins in a Row!  You will also find that you need to add a few extra lines of code to most event procedures to control which components are active or inactive, visible or invisible at certain times.  For example in the Draw Button clicked (Button1Click procedure) the code groupbox2.visible:=false; hides the Difficulty box when the Fishermen's lines are drawn and the code groupbox2.visible:=true; in the Button2Click procedure reveals it when the Reveal button is clicked.  There will also be a Memo to add with Lines (text) that introduces the game at start-up and a button to close it (i.e. make it invisible).  This Memo is best left to last to add as it will lie over Form1, covering most of the components during program development and will therefore be a nuisance if added earlier.  I leave these extras for you to sort out and program, once the main part of the game is running OK.  Don't forget, if you have any trouble with the coding just Email me and I can send you samples of the code that I used to hopefully solve the problem!

 Return to Index

Well there it is - I hope that the descriptions are clear enough for you to develop a successful program and that you enjoy doing it as much as I did.  You could, of course, use Microsoft's Visual Basic instead of Delphi as a similar path can be followed with the programming in Basic instead of Pascal.  You may well be more artistic than me (not difficult!) and produce a more artistic version.  Whatever happens, I will be interested to hear from you via the Email link near the top of the page.              

Last modified November, 2003