VCL Memory Tutorial. von Narses. Version 2.01 vom Zielsystem: Delphi 7 Win32VCL. Version 2.01 vom Seite 1 von 16

Transkript

1 von Narses Version 2.01 vom Zielsystem: Delphi 7 Win32VCL Version 2.01 vom Seite 1 von 16

2 1 Einleitung 1.1 Focus In diesem Tutorial wird das Spiel Memory nachgebildet. Ziel ist es, aus einer Menge verdeckter Karten gleiche Elemente herauszusuchen. Dabei sollen nur Standard-VCL-Komponenten eingesetzt werden. Informationstechnisches Ziel ist es, eine ereignisorientierte zustandsgesteuerte Anwendung auf Basis der Visual Component Library (VCL) zu planen und zu erstellen. Nebenbei wird auf verschiedene Datentypen und Programmiertechniken hingewiesen. 1.2 Voraussetzungen Dieses Tutorial ist mit Delphi 7 Professional unter Windows 2000 erstellt worden. Da nur Standard-VCL-Komponenten verwendet werden, sollte die Kompatibilität zu anderen Delphi- Versionen relativ hoch sein. 1.3 Zielgruppe Das Tutorial richtet sich hauptsächlich an Programmieranfänger oder Delphi-Einsteiger. Es sind keine besonderen Delphi- oder Pascal-Kenntnisse erforderlich, aber sicherlich hilfreich. Ein wenig Übung im Umgang mit der Delphi-IDE ist nützlich, aber nicht notwendig. Die Benutzungsweise des Objektinspektors wird als bekannt vorausgesetzt. Für Programmieranfänger ganz ohne Vorkenntnisse oder Programmiererfahrung ist das Tutorial nur bedingt geeignet, da nicht explizit auf die verwendeten Datentypen und objektorientierte Programmierung eingegangen wird, um den Rahmen nicht zu sprengen. Im Interesse eines leichten Arbeitsflusses und hoher Selbstmotivation aus der Aufgabenstellung selbst damit soll der Arbeitsweise der aktuellen Schülergeneration Rechnung getragen werden ist der Aufbau des Tutorials eher problemorientiert als informationstechnisch oder wissenschaftlich zu nennen. 1.4 Informationstechnische Inhalte Überblick TLabel, TEdit, TButton, TBitBtn, TImage, TImageList, Offscreen-Bitmap, lokale Prozedur, Random(N), Arbeiten mit Canvas, Berechnung von Zeichen mit Char(), gemeinsame Ereignisprozedur, Typecasts in beiden Syntaxformen, Verallgemeinerung durch Konstantendeklaration, Records, Objekt-Referenzen, (statisches) Array, FindComponent(), Aufruf von Ereignisprozeduren aus dem Programmcode heraus, Aufzählungstypen (Deklaration und Benutzung), Fallunterscheidung mit case of, (einfache) Zustandsmaschine, Deklaration von Klasseneigenschaften und zugehöriger Methoden 1.5 Copyright und Haftung Der Autor kann keinerlei Gewähr für die Richtigkeit der angegebenen Informationen übernehmen, die Benutzung geschieht auf eigene Gefahr. Der Autor dieses Dokumentes behält sich die Verwertungsrechte vor, Kontakt kann gegebenenfalls über das Delphi-Forum aufgenommen werden (per PN an User Narses ): Dieses Dokument darf und soll kostenlos weitergegeben werden, die Verbreitung über elektronische Medien ist ausdrücklich erlaubt, solange dieses Dokument und die zugehörigen Projektdateien nicht verändert werden. Die Weitergabe darf nur unentgeltlich erfolgen, auch für die Bereitstellung dürfen keine Kosten anfallen. Version 2.01 vom Seite 2 von 16

3 2 Vorbereitung 2.1 Projektordner anlegen Wir erstellen einen neuen Ordner, zum Beispiel Eigene Dateien\Memory, in dem wir das neue Projekt unterbringen wollen. Dann starten wir Delphi und legen ein neues Projekt an, wenn es beim IDE-Start nicht bereits automatisch erzeugt wurde: Datei Neu Anwendung. Mit F9 starten wir das leere Projekt, um die entsprechenden Dateien und deren Namen festzulegen. Unit1.pas stellt praktisch das Hauptformular der neuen Anwendung dar speichern wir im Projektverzeichnis Eigene Dateien\Memory, der Dateiname kann beibehalten werden. Projekt1.dpr benennen wir aber um in Memory.dpr, da hiermit auch schon der Dateiname des Zielprogramms (.EXE-Datei) festgelegt wird. Das Programm startet und es wird ein leeres Formular angezeigt, das wir sofort wieder schließen. 2.2 Die Benutzeroberfläche Die GUI steht für Graphical User Interface ( Benutzeroberfläche) sollte immer besonders sorgfältig geplant werden. Ein Programm kann noch so genial erdacht sein, wenn die Benutzeroberfläche schlecht ist, wird man es nicht gerne benutzen wollen. Im Objektinspektor setzen wir die Eigenschaft Caption von Form1 auf Memory, damit haben wir den Fenstertitel eingestellt. Die Eigenschaft Position stellen wir auf podesktopcenter ein, so wird das Fenster immer in der Bildschirmmitte geöffnet. Die Eigenschaft BorderStyle stellen wir noch auf bssingle um, damit man die Größe des Formulars zur Laufzeit nicht ändern kann. In den BorderIcons setzen wir bimaximize auf False, damit man das Fenster auch nicht maximieren kann. Jetzt brauchen wir noch die Bedienelemente für das Spiel. Für die Kartenvorderseiten nehmen wir Images ( Bilder). Dazu wählen wir aus dem Register Zusätzlich die Komponente Image aus und platzieren diese durch einen Klick links oben auf unserem Formular: Wir wollen mit 9 Pärchen spielen, brauchen also noch weitere 17 Images, die wir in 3 Reihen zu 6 Spalten anordnen. Um jetzt nicht in wildes Mausgehampel zu verfallen, drücken wir direkt nach dem die erste Image-Komponenten auf dem Formular platziert ist, Strg+C. Dann Strg+V, so wird eine Kopie des Images eingefügt, die wir nur noch mit der Maus an die richtige Stelle verschieben müssen. Wichtig! Die Images der Reihe nach von links nach rechts und oben nach unten anlegen. Jedem neuen Image wird ein Name zugewiesen, der mit Image nt und durch eine laufende Nummer ergänzt wird. Diese Nummernfolge darf nicht unterbrochen sein (Erläuterung später)! Version 2.01 vom Seite 3 von 16

4 Wir ergänzen noch drei BitButtons (das erste Symbol im Register Zusätzlich, der OK-Button mit dem grünen Haken) und aus dem Register Standard zwei Labels und zwei Editfelder usw. Anmerkung: Die Zahlen in der Abbildung sind nur zur Orientierung angegeben, natürlich sind in der IDE keine Zahlen in den Images zu sehen. Tipp: Wenn ein Bedienelement ausgewählt ist, kann man dieses mit Strg+Cursortasten pixelweise verschieben. Die Kartenvorderseiten sollen aber nicht immer zu sehen sein, deshalb brauchen wir noch die Rückseiten. Hier wollen wir einen kleinen Trick machen: Wir verwenden einfach Buttons, die wir vor den Images platzieren und auf die gleiche Größe bringen. Wenn eine Karte aufgedeckt wird, verstecken wir einfach den Button, dann wird das Bild darunter automatisch angezeigt. Deshalb wählen wir aus dem Register Standard den normalen Button aus, klicken diesen auf unser Formular und vergrößern ihn soweit, dass das Image verdeckt ist: Damit die Kartenrückseiten auch alle gleich aussehen, setzen wir die Eigenschaft Caption des Buttons auf? und stellen den Zeichensatz um, so dass der Button etwas hübscher aussieht. Es bietet sich an, den Zeichensatz Arial und die Schriftgröße 72 zu verwenden: Version 2.01 vom Seite 4 von 16

5 Jetzt kopieren wir mit Strg+C den veränderten Button und fügen ihm mit Strg+V ein, platzieren die Kopie entsprechend und so weiter, wie bei den Images. Dabei achten wir darauf, dass wir die Reihenfolge wie oben korrekt einhalten, so dass Image1 auch von Button1 verdeckt wird und so fort. So sollte das Formular dann später aussehen: Es fehlen nur noch aussagekräftige Namen und Bezeichnungen der drei BitButtons und der Labels mit den Editfeldern. Wir ändern die Eigenschaft Name des ersten BitButtons in BtnStart und als Caption stellen wir &Neues Spiel ein. Dem zweiten Button geben wir den Namen BtnExit und den Titel &Beenden. Der dritte Button soll BtnClear heißen und den Titel &Zurücksetzen haben. Das kaufmännische Und am Anfang der Titel sorgt dafür, dass man mit Alt+Buchstabe, also z.b. Alt+N, dieses Bedienelement auslösen kann, ohne die Maus benutzen zu müssen. Um den Buchstaben als Shortcut ( Abkürzung) zu kennzeichnen, wird dieser dann unterstrichen dargestellt. Wir ändern die Eigenschaft Caption von Label1 in Züge: und von Label2 in Punkte:. Den Eingabefeldern geben wir den Namen EMoves und EPoints. Jetzt klicken wir das erste Editfeld an und klicken dann mit gedrückter Shift-Taste das zweite Editfeld an, woraufhin beide Felder markiert sind. Wir stellen nun die Eigenschaft ReadOnly auf True und Color auf clbtnface, um anzudeuten, dass die Eingabefelder nicht änderbar sind. Wie man sieht, werden beide Felder auf einmal umgestellt, da beide markiert sind. Es fehlen nur noch die Symbole der BitButtons: Dazu wählen wir den ersten BitButton aus und klicken auf die Eigenschaft Glyph, anschließend auf das 3-Punkte-Symbol im Eingabefeld. Im darauf erscheinenden Bild-Editor wählen wir Laden, öffnen die Datei JinJang.bmp aus dem Tutorial-Verzeichnis und verlassen den Bild-Editor mit OK. Den anderen Buttons weisen wir analog die anderen beiden Symboldateien aus dem Tutorial-Verzeichnis zu. Im Menü Projekt wählen wir Optionen und dann die Registerkarte Anwendung. Hier geben wir für Titel Memory ein, damit zum Beispiel Nachrichtendialoge auch einen aussagekräftigen Titel bekommen. Dann klicken wir auf den Button Symbol laden... und wählen die Datei Memory.ico aus, damit das Programm nicht mehr mit dem Standard-Delphi-Symbol angezeigt wird. Version 2.01 vom Seite 5 von 16

6 Damit ist das Formular fertig und sollte etwa so aussehen: 2.3 Die Kartenvorderseiten Um die Bilder für die Kartenvorderseiten zu verwalten, benutzen wir eine ImageList ( Bilderliste). Wir wählen also aus dem Register Win32 die ImageList-Komponente und platzieren sie irgendwo auf dem Formular. Wo genau spielt keine Rolle, da es sich um eine sogenannte nonvisible ( unsichtbare) Komponente handelt, die zur Laufzeit gar nicht sichtbar ist. Der Eigenschaft Name geben wir den Wert CardImage. Die Eigenschaften Width und Height stellen wir auf 105 ein, was der Größe der Image-Komponenten und der Buttons entspricht. Die Eigenschaft Masked stellen wir auf False, da die Bilder formatfüllend sein sollen. Mit einem Doppelklick auf dem Symbol der ImageList auf dem Formular kann ein Editor geöffnet werden, mithilfe dessen bereits vorhandene Bilder in die Liste eingefügt werden können. Der Editor ist weitgehend selbsterklärend. Wenn gewünscht und vorhanden, können jetzt Bilder hinzugefügt werden, die später als Kartenvorderseite genutzt werden sollen. Wir wollen aber für den Fall, dass keine Bilder verfügbar sind, ebenfalls gerüstet sein. Deshalb erzeugen wir bei Programmstart einfach selbst welche, bis mindestens 9 Bilder in der ImageList verfügbar sind. Die selbsterstellten Bilder sollen dabei einfach aus einem Rechteck, dass mit einer zufälligen Farbe gefüllt ist, bestehen und darauf die Buchstaben von A bis I tragen. Da die Bilder nur beim Programmstart erstellt werden müssen, im Spiel werden dann immer die gleichen Bilder benutzt, schreiben wir den Code dafür in das Ereignis FormCreate() des Hauptformulars. Dazu machen wir einen Doppelklick auf dem Formularhintergrund, worauf automatisch eine entsprechende Ereignisprozedur erstellt wird. Diese füllen wir mit dem folgenden Code: Version 2.01 vom Seite 6 von 16

7 procedure TForm1.FormCreate(Sender: TObject); procedure CreateCard; // Bildsymbol in zufälliger Farbe erzeugen var // verwendete Variablen deklarieren OSB: TBitmap; // OffScreenBitmap, Typ: TBitmap dx,dy: Integer; // für Breite und Höhe eines Buchstabens Symbol: Char; // zum Bestimmen des Buchstabens nötig OSB := TBitmap.Create; // Verwaltungsstruktur für das Bitmap anlegen OSB.PixelFormat := pf24bit; // truecolor oder 24bit Farbtiefe OSB.Width := CardImage.Width; // OSB-Größe der Bildergröße OSB.Height := CardImage.Height; // in der ImageList anpassen with OSB.Canvas do Brush.Color := RGB(Random(256), // zufällige Farbe bestimmen Random(256), // und per RGB()-Funktion Random(256)); // richtig formatieren FillRect(Rect(0,0,CardImage.Width,CardImage.Height)); // Hintergrund Font.Name := 'Arial'; Font.Size := 72; Font.Style := [fsbold]; Font.Color := Brush.Color xor $00FFFFFF; // Farbe umkehren Symbol := Char(65 +CardImage.Count); // Buchstabe bestimmen, 65=A dx := OSB.Canvas.TextWidth(Symbol); // Breite des Zeichens dy := OSB.Canvas.TextHeight(Symbol); // und Höhe bestimmen, TextOut((CardImage.Width -dx) div 2, // dann den Buchstaben (CardImage.Height -dy) div 2, // mittig im Bitmap Symbol); // zeichnen CardImage.Add(OSB,NIL); // Bild in die ImageList aufnehmen OSB.Free; // und OffScreen-Bitmap wieder freigeben Randomize; // wirklich zufällige Zahlen while (CardImage.Count < 9) do // weniger als 9 Bilder? dann -> CreateCard; // ein weiteres Bild erstellen Die eigentliche Ereignisprozedur besteht dabei nur aus drei Zeilen Code. Der Befehl Randomize sorgt dafür, dass der Zufallszahlengenerator von Delphi auch wirklich zufällige Werte erzeugt. Wenn dieser Befehl weggelassen wird, werden bei jedem Programmstart immer die gleichen Zufallszahlen ausgegeben. Wir wollen aber immer andere Farben haben. Die while- Schleife fügt dann solange Bilder in die ImageList CardImage ein, bis diese mindestens 9 Bilder enthält. In der lokalen Prozedur CreateCard() wird ein sogenanntes OffScreen-Bitmap ( nicht sichtbares Bild) angelegt, dessen Farbtiefe auf truecolor ( Echtfarben; 24bit) und die Größe auf die Bildgröße der Bilder in der ImageList eingestellt. Dann wird eine zufällige Farbe für den Hintergrund eingestellt und das Bild damit gefüllt. Darauf wird mittig der passende Buchstabe ausgegeben, wobei die Farbe exakt umgekehrt wird. Das fertige Bild wird in die ImageList eingefügt und das OffScreen-Bitmap wieder freigegeben. Dieser Code sorgt dafür, dass auf jeden Fall immer 9 Bilder in der ImageList sind, egal ob zur Entwurfszeit Bilder in die Bilderliste eingefügt wurden oder nicht. Leider sieht man zum jetzigen Zeitpunkt noch nichts von den erzeugen Bildern, das holen wir aber gleich noch nach. Damit wären praktisch alle Vorarbeiten abgeschlossen. Das Programm ist zwar lauffähig und kann problemlos mit z.b. F9 gestartet werden, aber da noch kein Code für das Spielverhalten vorhanden ist, passiert weiter nichts. Womit wir bei der nächsten großen Etappe angekommen wären. Version 2.01 vom Seite 7 von 16

8 3 Programmverhalten Bevor wir an die Programmierung gehen, sind noch einige Überlegungen anzustellen. Am Anfang eines Projektes sollte immer eine ausgedehnte Planungsphase liegen, damit man nicht erst beim Codieren ( Programmieren) auf die logischen Probleme stößt, sondern diese bereits vorher gelöst hat. Es ist schlechter Arbeitsstil, zuerst mal mit dem Codieren anzufangen und dabei dann auftretende Probleme zu lösen. Meistens lässt sich diese Art zu Programmieren direkt am erstellten Code ( Quelltext) ablesen, da es typischerweise zu Flickwerk kommt. Auf diese Weise erstellter Code ist auch später nur sehr schlecht zu warten bzw. anpassbar, oder kurz und treffend: unprofessionell! 3.1 Spielregeln Üblicherweise besteht das Spiel Memory aus einer geraden Anzahl Karten, bei der jeweils ein Pärchen die gleiche Vorderseite hat. Die Rückseiten sind alle gleich. Die Karten werden gemischt und verdeckt ausgelegt. Ein Zug besteht daraus, zwei beliebige Karten aufzudecken. Sind die Kartenvorderseiten gleich, bleiben die Karten offen, das Pärchen ist identifiziert. Sind die Kartenvorderseiten nicht gleich, werden sie wieder verdeckt. Es dürfen nie mehr als zwei ungleiche Karten aufgedeckt sein. Das Spiel endet, wenn alle Kartenpärchen gefunden sind. Auf unsere Benutzeroberfläche bezogen bedeutet dass folgendes: Wenn einer der Karten-Buttons angeklickt wird, soll dieser versteckt werden, so dass die darunter liegende Karte sichtbar wird. Wir simulieren damit das Umdrehen der Karte. 3.2 Gemeinsame Ereignisprozedur Es ist sicherlich kein Problem, für jeden Karten-Button eine eigene Ereignisprozedur zu schreiben. Das würde aber in unserem Fall in 18 praktisch identischen Prozeduren enden... Da das nicht gerade effizient zu nennen ist, wollen wir einen anderen Ansatz verfolgen. Wir weisen jedem Karten-Button die selbe Ereignisprozedur zu. Dazu markieren wir einfach alle Karten- Buttons (Ersten anklicken und die Anderen mit gedrückter Shift-Taste), wählen im Objekt- Inspektor das Register Ereignisse und machen einen Doppelklick auf das OnClick()- Ereignis. Es wird eine neue Ereignisprozedur erstellt und allen Buttons zugewiesen, die wir mit folgendem Code füllen: procedure TForm1.Button1Click(Sender: TObject); (Sender as TButton).Visible := FALSE; Praktischerweise wird die Ereignisprozedur mit dem Auslöser als Parameter ( Sender: TObject) aufgerufen. Da der Aufruf allgemein gehalten ist (praktisch alle Ereignisprozeduren funktionieren auf diese Weise), wissen wir nur, dass Sender eine Komponente ist, aber nicht welcher Typ. Deshalb müssen wir dem Compiler durch (Sender as TButton) mitteilen, dass es sich bei Sender um einen Button handelt. Nach der schließenden Klammer können wir einfach auf gewohnte Weise die Eigenschaft Visible auf False setzen, so dass der Button verschwindet. Wir testen das Programm mit F9 und können jetzt die Buttons wegklicken. Allerdings befindet sich unter den Buttons noch kein Kartenbild und die Buttons lassen sich auch nur verstecken und tauchen nicht wieder auf. Wir sind also noch lange nicht fertig. 3.3 Das Spielfeld Beim letzten Test des Programms ist klar geworden, dass die Buttons und die Images alleine noch nicht ausreichen. Wir könnten zwar ein Bild direkt in den Images ablegen (einfach in der IDE eine Grafik einfügen), aber dann würde dieses Bild ja immer an dieser Stelle liegen, was dem Sinn des Spieles nicht gerecht wird. Bei jedem neuen Spiel sollen die Kartenpaare neu verteilt werden, sonst muss man sich ja irgendwann gar nichts mehr merken! Version 2.01 vom Seite 8 von 16

9 Wir benötigen also ein Spielfeld. Was ist darunter zu verstehen, Spielfeld? Wir haben im Kapitel Vorbereitungen doch schon das Spielfeld angelegt. Das ist genau genommen nicht richtig, wir haben lediglich die Ansicht auf das Spielfeld angelegt. Die 18 Buttons und darrunterliegenden Images müssen nämlich auf eine bestimmte Weise logisch miteinander verbunden sein bzw. werden, was man aber nicht direkt sehen kann: Je ein Button gehört zu dem darunter liegenden Image. Das Image enthält zwar (später) ein bestimmtes Kartenvorderseitenbild, aber wir benötigen die Information welches genau, um zwei aufgedeckte Karten vergleichen zu können. Diese Zusammenhänge bringen uns auf einen bestimmten Gedanken: das Spiel läuft praktisch in zwei Ebenen ab! Der Computer benötigt viel mehr Informationen und zum Teil auch solche, die dem Spieler unbekannt sein müssen, um das Spiel verwalten zu können. Die Benutzeroberfläche ist also nur eine Visualisierung bestimmter Teile des Spielzustandes im Speicher des Computers (der unsichtbar ist). Das Spiel selbst befindet sich in einer Datenstruktur im Speicher des Computers, die wir uns nun näher ansehen wollen. Die Benutzeroberfläche benötigen wir nur, um den aktuellen Stand anzuzeigen und Aktionen des Benutzers entgegenzunehmen. Diese Feststellungen wollen wir jetzt im Programm abbilden. Dazu fügen wir am Anfang der Unit1 folgenden Code ein (gelb markiert): uses const MIN = 1; // kleinste Spielfeldposition MAX = 18; // größte Spielfeldposition BTN_NAME = 'Button'; // Namenspräfix der Buttons IMG_NAME = 'Image'; // Namenspräfix der Images type TPosition = record CardID: Integer; // Kartennummer (ist auch der ImageIndex) Button: TButton; // zugehöriger Button Image: TImage; // zugehöriges Image TPlayGround = Array[MIN..MAX] of TPosition; TForm1 = class(tform) public Cards: TPlayGround; // unser Spielfeld (im Speicher!) Wir haben jetzt eine Datenstruktur für das Spielfeld definiert: Cards[MIN..MAX]. Jedes Feldelement beschreibt eine Kartenposition auf dem Formular. Allerdings ist jetzt nur die Struktur festgelegt und Speicherplatz dafür reserviert, die entsprechenden Werte sind aber noch nicht eingetragen worden. Die Button- und Image-Komponentenreferenzen müssen nur ein einziges Mal festgelegt werden, deshalb erweitern wir die Ereignisprozedur FormCreate() des Hauptformulars: procedure TForm1.FormCreate(Sender: TObject); var i: Integer; procedure CreateCard; // Bildsymbol in zufälliger Farbe erzeugen Randomize; // wirklich zufällige Zahlen while (CardImage.Count < 9) do // weniger als 9 Bilder? dann -> CreateCard; // ein weiteres Bild erstellen // Komponentenreferenzen ermitteln und eintragen for i := MIN to MAX do Cards[i].Button := TButton(Form1.FindComponent(BTN_NAME+IntToStr(i))); Cards[i].Image := TImage(Form1.FindComponent(IMG_NAME+IntToStr(i))); Cards[i].Button.Tag := i; // Trick zum späteren identifizieren Cards[i].CardID := (i -MIN) div 2; // Karten-ID vorbelegen Version 2.01 vom Seite 9 von 16

10 Mit Form1.FindComponent('Name') lässt sich eine Komponente über ihren Namen auffinden. Das ist der Grund, wieso wir beim Anlegen der Buttons und der Images so sehr darauf geachtet haben, dass die Namen der Komponenten durchgängig sind und die Buttons zu den Images passen! Da wir den Namen der Button-Komponenten durch den konstanten Teil BTN_NAME (im const-abschnitt am Anfang des Codes deklariert) und den Wert der Laufvariablen bilden, ergeben sich die Namen Button1 bis Button18. Deshalb müssen diese Komponenten natürlich auch existieren. Die als Trick im Kommentar gekennzeichnete Zuweisung der.tag-eigenschaft der Buttons hat folgenden Sinn: In der Ereignisprozedur für die Buttons bekommen wir eine Referenz auf den auslösenden Button geliefert. Mit (Sender as TButton).Tag können wir dann ganz einfach den Index in das Feld Cards[] herausfinden, ohne die passende Button-Referenz umständlich in einer Schleife suchen zu müssen. Wir verwenden Cards[].CardID dazu, den Index in die Bilderliste zu speichern. Auf diese Weise merken wir uns, welche Kartenvorderseite dieser Position zugeordnet ist. Der Ausdruck (i MIN) div 2 liefert jeweils für zwei aufeinanderfolgende i den gleichen Wert, angefangen bei 0, also (0,0,1,1,2,2,... ). Wir erzeugen damit praktisch alle Kartenpärchen, zwar in sortierter Folge, aber so haben wir immerhin alle möglichen Karten im Spiel. Später müssen wir uns nur noch darum kümmern, diese zu mischen. 3.4 Spielstart vorbereiten Bei jedem Spielstart müssen wir die Karten neu mischen. Womit wir auch schon bei der Ereignisprozedur für den Button Neues Spiel wären. Mit einem Doppelklick auf den Button legen wir eine entsprechende Prozedur an und fügen folgenden Code ein: procedure TForm1.BtnStartClick(Sender: TObject); var i, j, tmp: Integer; // Karten mischen for i := MIN to MAX do j := Random(MAX -MIN +1) +MIN; tmp := Cards[i].CardID; Cards[i].CardID := Cards[j].CardID; Cards[j].CardID := tmp; // Karten "umdrehen" und Vorderseiten passend raussuchen for i := MIN to MAX do Cards[i].Button.Visible := TRUE; // Button anzeigen CardImage.GetBitmap(Cards[i].CardID,Cards[i].Image.Picture.Bitmap); Da wir beim Initialisieren bereits alle Karten ins Spiel gebracht haben, müssen wir jetzt nur noch die Karten virtuell mischen. Dazu bestimmen wir für jede Karte eine neue, zufällige Spielfeldposition (in der Variablen j), also eine Zufallszahl im Bereich von MIN..MAX (die Grenzen des Spielfeldes). Leider liefert die Funktion Random(N) nur Zufallszahlen im Bereich 0..(N-1). Deshalb müssen wir mit (MAX -MIN +1) den Zahlenbereich ermitteln und die gelieferte Zufallszahl mit +MIN in den gewünschten Bereich verschieben. Die folgenden drei Zeilen stellen einen Dreieckstausch dar, denn die CardIDs an Position i und j sollen ja die Plätze tauschen. Im zweiten Teil werden die Buttons angezeigt und damit die Karten wieder verdeckt, sowie die zu den Karten-IDs gehörigen Bilder aus der ImageList an die Image-Komponenten unter den Buttons zugewiesen. Damit sind wir für einen weiteren Test des Programms bereit und starten mit F9. Nach einem Klick auf einen der Karten-Buttons wird schnell klar, dass natürlich zuerst ein Klick auf den Button Neues Spiel nötig ist, um die neue Funktionalität testen zu können! Das bringt uns auf einen weiteren Gedanken: Eigentlich ist jeder Programmstart auch ein Spielstart, deshalb könnte Version 2.01 vom Seite 10 von 16

11 die Funktion des Neues Spiel-Buttons auch gleich bei jedem Start des Programms ausgeführt werden. Wir ergänzen also im Code des FormCreate()-Ereignisses des Formulars: procedure TForm1.FormCreate(Sender: TObject); // Ende der for-schleife // jeder Programmstart ist auch ein Spielstart BtnStartClick(Self); Damit wird bei jedem Programmstart praktisch auch gleich der Button virtuell angeklickt, was wir mit F9 und ein paar Klicks schnell überprüft haben. ;-) 3.5 Spielzustände Wenn ein Karten-Button angeklickt wird, startet die entsprechende Ereignisprozedur, Button verstecken, Bild wird sichtbar, fertig. Wir merken schon, da gibt es ein Problem: Wir brauchen die Information, wie viele Karten bereits aufgedeckt sind und natürlich auch welche. Spätestens beim Anklicken der 3. Karte müssen die zwei bereits offenen Karten wieder verdeckt werden ( Button wieder sichtbar machen), wenn die Bilder nicht gleich sind! Die Lösung ist ein globaler Spielzustand, der die aktuelle Spielsituation wiederspiegelt. Aus den Spielregeln lassen sich folgende Zustände ableiten: Spiel läuft, keine Karte aufgedeckt Spiel läuft, eine Karte aufgedeckt Spiel läuft, zwei Karten aufgedeckt Spiel beendet, alle Karten aufgedeckt Der letzte Zustand, Spiel beendet, ist für uns allerdings bedeutungslos, da zu diesem Zeitpunkt gar keine Karten-Buttons mehr anklickbar sind und deshalb auch nichts mehr am Zustand des Spiels verändert werden kann. Auch diese Erkenntnisse wollen wir wieder im Code abbilden. Dazu ergänzen wir die type- Deklaration wie folgt um einen Aufzählungstyp: TPlayGround = Array[MIN..MAX] of TPosition; TGameState = ( gsopencards0, // keine Karte offen gsopencards1, // eine Karte offen gsopencards2); // zwei Karten offen TForm1 = class(tform) public Cards: TPlayGround; // unser Spielfeld (im Speicher!) GameState: TGameState; // Spielzustand Move1, Move2: Integer; // vorangegangene Züge Natürlich muss der Spielzustand am Anfang auch gesetzt werden, deshalb ergänzen wir: procedure TForm1.BtnStartClick(Sender: TObject); CardImage.GetBitmap(Cards[i].CardID,Cards[i].Image.Picture.Bitmap); GameState := gsopencards0; // kein Feld offen Den Spielzustand speichern zu können ist ja ganz nett, aber es nutzt uns noch nichts. Wir müssen jetzt an der Stelle ansetzen, wo sich dieser Zustand ändern kann bzw. muss, nämlich in der Ereignisprozedur der Karten-Buttons: procedure TForm1.Button1Click(Sender: TObject); (Sender as TButton).Visible := FALSE; // Button wegnehmen case GameState of gsopencards0: // kein Feld in der "Warteschlange" Move1 := (Sender as TButton).Tag; // Feld als 1. Zug merken Version 2.01 vom Seite 11 von 16

12 GameState := gsopencards1; // jetzt ist ein Feld offen gsopencards1: // ein Feld ist schon offen Move2 := (Sender as TButton).Tag; // 2. Zug vermerken // Pärchen gefunden? if (Cards[Move1].CardID = Cards[Move2].CardID) then GameState := gsopencards0 // ja, dann Karten offen lassen else GameState := gsopencards2; // nein, im nächsten Zug verdecken gsopencards2: // zwei (ungleiche) Felder vom Zug vorher noch offen Cards[Move1].Button.Visible := TRUE; // alte Felder verdecken Cards[Move2].Button.Visible := TRUE; Move1 := (Sender as TButton).Tag; // den neuen Zug vermerken GameState := gsopencards1; Die Grundfunktion, einen angeklickten Button zu verstecken, bleibt gleich. Neu ist jetzt, einen Zusammenhang zwischen den einzelnen Klicks herzustellen. Dazu benötigen wir zum einen die Variable GameState, um auf die Anzahl und Gleichheit der aufgedeckten Karten zu reagieren, und zum anderen die Variablen Move1 und Move2, um die Ansicht wieder in Ordnung zu bringen, wenn die aufgedeckten Karten nicht gleich waren. Wir wollen die neue Funktionalität mit einem Testlauf ( F9) sofort ausprobieren. Wie man sieht, sind die Spielregeln jetzt korrekt umgesetzt. 3.6 Punkte und Züge zählen Es fehlt nur noch eine interessante Funktion: Das Zählen (und Anzeigen!) der Punkte für gefundene Kartenpaare und nicht erfolgreiche Spielzüge (zwei ungleiche Karten). Dafür bietet sich der objektorientierte Ansatz an: Wir deklarieren interne Punktezähler als Eigenschaften der Formularklasse und übernehmen Änderungen der Werte in einer eigenen Methode, die dann auch gleich die Anzeige steuert. Wir ergänzen manuell in der type-deklaration: private FMoves, FPoints: Integer; // die internen Speicher für die Zähler procedure SetMoves(const Value: Integer); procedure SetPoints(const Value: Integer); public Cards: TPlayGround; // unser Spielfeld (im Speicher!) GameState: TGameState; // Spielzustand Move1, Move2: Integer; // vorangegangene Züge property Moves: Integer read FMoves write SetMoves default 0; property Points: Integer read FPoints write SetPoints default 0; Mit dieser Deklaration führen wir die Eigenschaften Moves und Points ein, die direkt gelesen werden können, aber über eine zugehörige Methode beschrieben werden. Die entsprechenden Methoden müssen wir natürlich noch erstellen (falls Strg+Shift+C nicht automatisch die entsprechenden Prozedurrümpfe erstellt [ab den Pro-Versionen der Delphi-IDE], muss man diese manuell eintippen): procedure TForm1.SetMoves(const Value: Integer); FMoves := Value; // Wert übernehmen EMoves.Text := IntToStr(Value); // und ausgeben procedure TForm1.SetPoints(const Value: Integer); FPoints := Value; // Wert übernehmen EPoints.Text := IntToStr(Value); // und ausgeben Version 2.01 vom Seite 12 von 16

13 Auf diese Weise sorgen wir dafür, dass Zuweisungen an die internen Punktezähler auch gleich zur Ausgabe im Formular gebracht werden. Damit haben wir jetzt die Möglichkeit, den Button zum Löschen der Punktezähler mit Leben zu füllen. Nach einem Doppelklick auf den Button Zurücksetzen wird wie gewohnt eine entsprechende Ereignisprozedur angelegt, in die wir folgenden Code einfügen: procedure TForm1.BtnClearClick(Sender: TObject); Moves := 0; Points := 0; Wir starten das Programm mit F9 und testen direkt die neue Funktion. Es fällt natürlich sofort auf, dass genau wie beim Spielstart diese Funktion eigentlich direkt nach dem Programmstart aufgerufen werden müsste, denn sonst sind ja noch die Texte aus der Entwurfsumgebung in den Eingabefeldern. Wir fügen also im Ereignis FormCreate() folgenden Code ein: BtnStartClick(Self); // deshalb auch die Zähler löschen BtnClearClick(Self); Wir müssen jetzt nur noch dafür sorgen, dass die entsprechenden Punkte auch gezählt werden. Deshalb ergänzen wir im Karten-Button-Ereignishandler: gsopencards1: // ein Feld ist schon offen Move2 := (Sender as TButton).Tag; // 2. Zug vermerken // Pärchen gefunden? if (Cards[Move1].CardID = Cards[Move2].CardID) then GameState := gsopencards0; Points := Points +1; // 1 Gummipunkt mehr ;) end else GameState := gsopencards2; Moves := Moves +1; // sonst ein Zug mehr Damit ist das Spiel praktisch fertig. Wir starten das Programm mit F9 und testen erst mal ausgiebig, ob denn auch alles funktioniert! ;-) 3.7 Programm beenden Zum Abschluss fehlt nur noch die Funktion des Buttons Beenden. Mit einem Doppelklick erstellen wir wie gewohnt den Ereignishandler-Rumpf und fügen ein: procedure TForm1.BtnExitClick(Sender: TObject); Application.Terminate; Dieser Befehl sorgt dafür, dass die Anwendung beendet wird. Damit ist das Programm komplett. Version 2.01 vom Seite 13 von 16

14 4 Zusammenfassung 4.1 Schlusswort Ich hoffe, dass dieses Tutorial einen recht brauchbaren Einblick in die Entwicklung einer Anwendung gegeben hat. Normalerweise würde zwar deutlich mehr theoretische Planung in der Vorbereitungsphase anfallen, aber das macht den Stoff zu trocken für Anfänger. 4.2 Vollständiger Quelltext Achtung! Der folgende Quelltext kann nicht einfach in ein leeres Delphi-Projekt eingefügt werden, da sonst die entsprechenden Ereignisprozeduren in den Objekten nicht zugewiesen sind! Bitte dem Ablauf wie im Text beschrieben folgen. unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, StdCtrls, Buttons, ExtCtrls, ImgList; const MIN = 1; // kleinste Spielfeldposition MAX = 18; // größte Spielfeldposition BTN_NAME = 'Button'; // Namenspräfix der Buttons IMG_NAME = 'Image'; // Namenspräfix der Images type TPosition = record CardID: Integer; // Kartennummer zur Identifikation Button: TButton; // zugehöriger Button Image: TImage; // zugehöriges Image TPlayGround = Array[MIN..MAX] of TPosition; TGameState = ( gsopencards0, // keine Karte offen gsopencards1, // eine Karte offen gsopencards2); // zwei Karten offen TForm1 = class(tform) Image1: TImage; Image2: TImage; Image3: TImage; Image4: TImage; Image5: TImage; Image6: TImage; Image7: TImage; Image8: TImage; Image9: TImage; Image10: TImage; Image11: TImage; Image12: TImage; Image13: TImage; Image14: TImage; Image15: TImage; Image16: TImage; Image17: TImage; Image18: TImage; Button1: TButton; Button2: TButton; Button3: TButton; Button4: TButton; Button5: TButton; Button6: TButton; Button7: TButton; Button8: TButton; Button9: TButton; Button10: TButton; Button11: TButton; Button12: TButton; Button13: TButton; Button14: TButton; Button15: TButton; Button16: TButton; Button17: TButton; Button18: TButton; BtnStart: TBitBtn; Version 2.01 vom Seite 14 von 16

15 BtnExit: TBitBtn; BtnClear: TBitBtn; Label1: TLabel; EMoves: TEdit; Label2: TLabel; EPoints: TEdit; CardImage: TImageList; procedure FormCreate(Sender: TObject); procedure Button1Click(Sender: TObject); procedure BtnStartClick(Sender: TObject); procedure BtnClearClick(Sender: TObject); procedure BtnExitClick(Sender: TObject); private FMoves, FPoints: Integer; // die internen Speicher für die Zähler procedure SetMoves(const Value: Integer); procedure SetPoints(const Value: Integer); public Cards: TPlayGround; // unser Spielfeld (im Speicher!) GameState: TGameState; // Spielzustand Move1, Move2: Integer; // vorangegangene Züge property Moves: Integer read FMoves write SetMoves default 0; property Points: Integer read FPoints write SetPoints default 0; var Form1: TForm1; implementation {$R *.dfm} procedure TForm1.FormCreate(Sender: TObject); var i: Integer; procedure CreateCard; // Bildsymbol in zufälliger Farbe erzeugen var OSB: TBitmap; dx,dy: Integer; Symbol: Char; OSB := TBitmap.Create; // OffScreen-Bitmap anlegen OSB.PixelFormat := pf24bit; // truecolor oder 24bit OSB.Width := CardImage.Width; // Größe der Bildgröße in OSB.Height := CardImage.Height; // der ImageList anpassen with OSB.Canvas do Brush.Color := RGB(Random(256), // zufällige Farbe Random(256), // bestimmen und Random(256)); // richtig formatieren FillRect(Rect(0,0,CardImage.Width,CardImage.Height)); // Hintergrund füllen Font.Name := 'Arial'; Font.Size := 72; Font.Style := [fsbold]; Font.Color := Brush.Color xor $00FFFFFF; // Farbe umkehren Symbol := Char(65 +CardImage.Count); // Buchstabe bestimmen dx := OSB.Canvas.TextWidth(Symbol); // Breite des Zeichens dy := OSB.Canvas.TextHeight(Symbol); // und Höhe bestimmen TextOut((CardImage.Width -dx) div 2, // und dann (CardImage.Height -dy) div 2, // mittig ausgeben Symbol); CardImage.Add(OSB,NIL); // Bild in die ImageList aufnehmen OSB.Free; // und OffScreen-Bitmap wieder freigeben Randomize; // wirklich zufällige Zahlen while (CardImage.Count < 9) do // weniger als 9 Bilder? dann -> CreateCard; // ein weiteres Bild erstellen // Komponentenreferenzen ermitteln und eintragen for i := MIN to MAX do Cards[i].Button := TButton(Form1.FindComponent(BTN_NAME+IntToStr(i))); Cards[i].Image := TImage(Form1.FindComponent(IMG_NAME+IntToStr(i))); Cards[i].Button.Tag := i; // Trick zum späteren identifizieren Cards[i].CardID := (i -MIN) div 2; // Karten-ID vorbelegen // jeder Programmstart ist auch ein Spielstart BtnStartClick(Self); // deshalb auch die Zähler löschen BtnClearClick(Self); procedure TForm1.BtnStartClick(Sender: TObject); var Version 2.01 vom Seite 15 von 16

16 i, j, tmp: Integer; // Karten mischen for i := MIN to MAX do j := Random(MAX -MIN +1) +MIN; tmp := Cards[i].CardID; Cards[i].CardID := Cards[j].CardID; Cards[j].CardID := tmp; // Karten "umdrehen" und Vorderseiten passend raussuchen for i := MIN to MAX do Cards[i].Button.Visible := TRUE; // Button anzeigen CardImage.GetBitmap(Cards[i].CardID,Cards[i].Image.Picture.Bitmap); GameState := gsopencards0; // kein Feld offen procedure TForm1.Button1Click(Sender: TObject); (Sender as TButton).Visible := FALSE; // Button wegnehmen case GameState of gsopencards0: // kein Feld in der "Warteschlange" Move1 := (Sender as TButton).Tag; // Feld als 1. Zug merken GameState := gsopencards1; // jetzt ist ein Feld offen gsopencards1: // ein Feld ist schon offen Move2 := (Sender as TButton).Tag; // 2. Zug vermerken // Pärchen gefunden? if (Cards[Move1].CardID = Cards[Move2].CardID) then GameState := gsopencards0; Points := Points +1; // 1 Gummipunkt mehr ;) end else GameState := gsopencards2; Moves := Moves +1; // sonst ein Zug mehr gsopencards2: // zwei (ungleiche) Felder vom Zug vorher noch offen Cards[Move1].Button.Visible := TRUE; // alte Felder verdecken Cards[Move2].Button.Visible := TRUE; Move1 := (Sender as TButton).Tag; // den neuen Zug vermerken GameState := gsopencards1; procedure TForm1.SetMoves(const Value: Integer); FMoves := Value; // Wert übernehmen EMoves.Text := IntToStr(Value); // und ausgeben procedure TForm1.SetPoints(const Value: Integer); FPoints := Value; // Wert übernehmen EPoints.Text := IntToStr(Value); // und ausgeben procedure TForm1.BtnClearClick(Sender: TObject); Moves := 0; Points := 0; procedure TForm1.BtnExitClick(Sender: TObject); Application.Terminate; end. Version 2.01 vom Seite 16 von 16