yab - Spiel Tutorial


System: BeOS, Haiku, Zeta

Dieses Tutorial setzt vorraus das Sie das Einsteigertutorial und das Einsteigertutorial Nr. 2 gelesen und verstanden haben



Inhalt

1. Einführung 6. Die Hightscore
2. Die Spielkarten 7. Menüfunktionen
3. Das Grundgerüst 8. Der komplette Quellkode
4. Das Spielfeld 9. Nachwort
5. Spielkartenfunktion 10. Download



 

1. Wir erstellen ein Spiel

In diesem Tutorial werden wir uns mit dem erstellen eines einfachen Spiels befassen. Hierbei geht es nicht unbedingt nur um das Spiel, sondern um die komplexe Struktur die für so ein Programm erforderlich ist. Natürlich werden wir am Ende ein lauffähiges Spiel haben, jedoch sind nicht alle Aspekte die für die Idee des Spiels interessant sind berücksichtigt. Dies gibt Anreiz sich selber an diesen zu versuchen.

Bei dem Spiel handelt es sich um eine Umsetzung des "Memory" Spiels. Hier gilt es alle zusammengehörigen Spielkarten zu finden, welche verdeckt vor dem Spieler liegen. Gesucht werden Spielkartenpaare, die wenn diese gefunden wurden, aufgedeckt liegen bleiben. Es dürfen immer nur zwei Karten zur selben Zeit aufgedeckt werden. Sind die Karten unterschiedlich, werden diese wieder verdeckt.

Bevor man beginnt ein Spiel zu schreiben, sollte man sich darüber genaue Gedanken machen. Einfach nur das Spiel vor Augen haben reicht nicht immer aus, zumal viele Abhängigkeiten erst beim Ausprobieren wirklich zum tragen kommen. Gedanken darüber, ob es überhaupt möglich ist mit der verwendeten Programmiersprache dieses umzusetzen oder ob die eigene Programmierkenntnis ausreicht ein solches Spiel umzusetzen. Daher kommt es öfters vor das man sich verrennt und dann demotiviert aufgibt.

Auch bei diesem Spiel, welches wir hier für das Tutorial erstellt haben um es anschließend zu beschreiben, hat sich der genaue Umfang der Abläufe erst im Laufe der Programmierung entwickelt. Dies ist ein ganz normaler Vorgang, denn man kann nie von vornherein ganz genau wissen, was man alles beachten muss. Jedoch war uns klar, dass wir dieses Spiel so wie wir es uns gedacht haben, umsetzen können.

Was immer hilfreich ist, ist sich die Abläufe einmal grafisch aufzumalen. Das gibt im Laufe der Entwicklung immer die Möglichkeit seine Arbeitsschritte zu kontrollieren und etappenweise abzuhaken.



  • Darstellung des Programmfensters mit den Spielkarten

  • Auswahl zweier Spielkarten und dessen Überprüfung.

  • Sind die Karten identisch werden diese dauerhaft aufgedeckt dargestellt.

  • Sind die Karten unterschiedlich werden diese wieder verdeckt.

  • Sind alle Spielkarten aufgedeckt, werden die Spieler Informationen abgefragt.

  • Die Spielerdaten werden gespeichert.

  • Darstellung der Hightscore

  • Wird im Spielmenü die Option "Neues Spiel" aufgerufen, werden alle gespeicherten Informationen zurückgesetzt und das Programmfenster mit Spielkarten wieder angezeigt.

  • Wird gleich nach dem Programmstart im Spielmenü die Option "Hightscore" ausgewählt, wird diese dargestellt.
    •

    Wenn Sie genau hingucken, werden sie sehen, dass es keine Option gibt für das aufrufen der Hightscore aus der Hightscore Darstellung. Dies ist zum Beispiel einer der Abhängigkeiten, die oben erwähnt wurden. Außerdem enthält diese Darstellung keine Informationen über die weiteren Abhängigkeiten, wie zum Beispiel die Anzahl der Spielzüge, die wiederum in die Hightscore einfließen werden.

    Aber wir wollen Sie jetzt nicht mit diesen eventuell auftretenden Problemen demotivieren oder abschrecken, sondern im Allgemeinen einfach darauf hinweisen, dass das entwickeln eines Spiel doch aufwendiger sein kann als man es sich vielleicht vorgestellt hat.

    zurück zur Übersicht
     



    2. Die Spielkarten

    Bevor wir mit der Programmierung anfangen, beschäftigen wir uns mit dem Erstellen der Spielkarten. Es ist immer einfacher bei einem Spiel wie diesem zuerst die Spielkarten zu erstellen, da man sich nicht unbedingt immer die wirkliche Größe dieser vor Augen halten kann. Es kommt dabei natürlich auch immer auf die Motive an, welche man darstellen möchte. Sind es zum Beispiel Landschaften, die man auf den Spielkarten zeigen möchte, sollten diese größer sein, damit diese auch richtig zur Geltung kommen.

    Die richtigen Grafiken für ein solches Spiel zu wählen ist auch nicht immer einfach, zumal wir für dieses Tutorial acht verschiedene Motive benötigen, die themenbezogen zueinander passen sollten. Dazu kann man sich auch nicht einfach irgendwelche Grafiken nehmen, die man zum Beispiel im Internet gefunden hat, weil diese oftmals mit einem Kopierrecht (Copyright) versehen sind. Diese sieht man in vielen Fällen nicht einmal, da diese durch Wasserzeichen gekennzeichnet sind, welche man auch nicht mit jedem Grafikprogramm sehen kann.

    Um solchen Schwierigkeiten aus dem Weg zu gehen, haben wir für dieses Tutorial Bilder aus unserem privaten Fotoalbum verwendet. Für die Spielkarten brauchen wir jeweils zwei Motive, eines für die die Rückseite und eines für die Vorderseite. Die Vorderseite sollte bei allen gleich sein, damit ein finden der richtigen Motive am Ende nicht zu einfach wird. Wir haben uns für Spielkarten mit Tiermotiven in einer Größe von 100 mal 100 Pixeln entschieden:

        


    Für die Bilder haben wir ein Verzeichnis im Programmordner angelegt mit dem Namen gfx. In diesem Ordner werden alle Bilder abgelegt und von 0 bis 8 nummerriert. Dabei ist Bild0 die Vorderseite der Spielkarte und Bild1 bis Bild8 die Rückseiten.

    zurück zur Übersicht
     



    3. Das Grundgerüst

    Wir beginnen mit dem Grundgerüst für unser Spiel. Folgender Soucecode beinhaltet einige Dunkelrote markierungen, diese dienen dazu das einfügen von Programmkodes im laufe des Tutorials zu erleichtern. Kommt zum Beispiel im laufe des Tutorials die Aufforderung, einen case Eintrag zu tätigen, fügen Sie diesen einfach unterhalb der //cases Markierung ein. Dies erleichtert mir das Erklären und Ihnen das Verstehen.

    #!/boot/home/config/bin/yab

    //get infos
    B_Breite = peek("desktopwidth")
    B_Hoehe = peek("desktopheight")

    //yab info
    if (peek("isbound")) then
       Programmordner$ = peek$("directory")
    else
       Programmordner$=system$("pwd")
       Programmordner$ = left$(Programmordner$, len(Programmordner$)-1)
    fi

    //variable
    Grafikordner$=Programmordner$+"/gfx/"
    klicks=0
    spielzug=0
    status=0

    //program window

    WINDOW OPEN B_Breite/2-250,B_Hoehe/2-250 to B_Breite/2+250,B_Hoehe/2+250, "Hauptfenster", "Memory Game"
       WINDOW SET "Hauptfenster", "Flags", "Not-Resizable,Not-Zoomable"
          MENU "File", "Quit", "Q", "Hauptfenster"
          MENU "Game", "New Game", "N", "Hauptfenster"
          MENU "Game", "Hightscore", "H", "Hauptfenster"

    //call function

    //main loop
    dim part$(1)
    inloop = true
    while(inloop)
       msg$ = message$
       if (split(msg$, part$(), ":|") > 2) then
          PartOne$=part$(1)
          PartTwo$ = part$(2)
          PartThree$ = part$(3)
       fi
       if (msg$ <> "") print msg$
       switch msg$

       //cases

       default:
       end switch
       if(window count<1) inloop = false
       sleep 0.1
    wend

    //sub routines


    Wie Sie sehen können, beinhaltet dieses Sourcecode im Grunde genommen für sie nichts neues, denn gleiches haben wir bereits in den beiden ersten Einsteigertutorials kennen gelernt.

  • Wir ermitteln im Bereich //get infos die Größe der Bildschirmauflösung des Rechners auf dem das Spiel ausgefürt wird (B_Breite$ = Bildschirm Breite und B_Hoehe = Bildschirm Höhe).

  • Dann folgt die bekannte Abfrage bei //yab info, welche ermittelt, ob das Programm gebunden ist oder nicht.

  • Danach werden bestimmte im Programm vorkommende Variablen vordifiniert bei //variable.

  • Dann wird im Bereich //program window das Programmfenster angegeben. Dabei werden die Werte der Bildschirmgröße durch zwei geteilt und die jeweiligen Werte angegeben, um das Fenster in einer Größe von 500 Pixeln in der Breite und 500 Pixeln in der Höhe anzugeben.

  • Wir addieren drei Menüoptionen, dies ist einmal das Schließen ("Quit") des Programms im Menübereich "File", die Auswahloption eines neuen Spiels (New Game) im Breich "Game" und die Auswahloption zur Darstellung der Hightscore, ebenfalls im Bereich "Game".

  • Darauf folgt der Mainloop mit den Splitoptionen für das ermitteln von Programmaufrufen.
    •

    zurück zur Übersicht
     



    4. Das Spielfeld

    Da dies ein einfaches Spiel werden soll, bedienen wir uns einer einfacher Methode, die Spielkarten darzustellen. Die einfachste Methode die Spielkarten darzustellen ist das Verwenden des Button Befehls von yab.

    Fügen Sie folgenden Kode im Bereich //sub routines ein:

    sub Program_Window()
       View$="GameTable"
       VIEW 0,15 TO 500, 495, "GameTable", "Hauptfenster"
       VIEW 10,10 TO 120,120, "Button1", "GameTable"
       BUTTON IMAGE 5,5, "B_1", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button1"
       VIEW 130,10 TO 240,120, "Button2", "GameTable"
       BUTTON IMAGE 5,5, "B_2", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button2"
       VIEW 250,10 TO 360,120, "Button3", "GameTable"
       BUTTON IMAGE 5,5, "B_3", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button3"
       VIEW 370,10 TO 480,120, "Button4", "GameTable"
       BUTTON IMAGE 5,5, "B_4", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button4"
       VIEW 10,130 TO 120,240, "Button5", "GameTable"
       BUTTON IMAGE 5,5, "B_5", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button5"
       VIEW 130,130 TO 240,240, "Button6", "GameTable"
       BUTTON IMAGE 5,5, "B_6", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button6"
       VIEW 250,130 TO 360,240, "Button7", "GameTable"
       BUTTON IMAGE 5,5, "B_7", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button7"
       VIEW 370,130 TO 480,240, "Button8", "GameTable"
       BUTTON IMAGE 5,5, "B_8", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button8"
       VIEW 10,250 TO 120,360, "Button9", "GameTable"
       BUTTON IMAGE 5,5, "B_9", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button9"
       VIEW 130,250 TO 240,360, "Button10", "GameTable"
       BUTTON IMAGE 5,5, "B_10", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button10"
       VIEW 250,250 TO 360,360, "Button11", "GameTable"
       BUTTON IMAGE 5,5, "B_11", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button11"
       VIEW 370,250 TO 480,360, "Button12", "GameTable"
       BUTTON IMAGE 5,5, "B_12", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button12"
       VIEW 10,370 TO 120,480, "Button13", "GameTable"
       BUTTON IMAGE 5,5, "B_13", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button13"
       VIEW 130,370 TO 240,480, "Button14", "GameTable"
       BUTTON IMAGE 5,5, "B_14", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button14"
       VIEW 250,370 TO 360,480, "Button15", "GameTable"
       BUTTON IMAGE 5,5, "B_15", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button15"
       VIEW 370,370 TO 480,480, "Button16", "GameTable"
       BUTTON IMAGE 5,5, "B_16", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button16"
    end sub


  • Wir erstellen eine Variable View$ und speichern in Ihr den Names des Views, welcher angezeigt werden soll ("GameTable"). Näheres dazu später.

  • Wir erstellen einen View "GameTable", welchen wir auf das Hauptfenster platzieren.

  • Auf dem View "GameTable" erstellen wir weitere Views, für jede Spielkarte einen. Wir verwenden für dieses Tutorial 2 x 8 Spielkarten mit der Größe von 100 x 100 Pixeln. Weil es schöner aussieht, wenn die Spielkarten einwenig Abstand zueinander haben, erstellen wir die Views 10 Pixel größer als die Spielkarten.

  • In jeden der Views erstellen wir einen Image Button und geben bei beiden Grafiken (eine für den unbetätigten und einer für den betätigten Zustand) die selbe Grafik an. Das wir hier beide Grafiken gleich wählen liegt daran, daß beim Programmieren dieses Tutorials, dieses die schönere Variante ist. Zuerst hatte das Bild für den gedrückten Button das Aussehen der aufgedeckten Spielkarte, dabei entstand aber ein unschöner Nebeneffekt, denn immer wenn man diesen gedrückt hatte und danach die aufgedeckte Spielkarte dargestellt wurde, sah es so aus als wenn diese zweimal kurz hintereinander angezeigt wird.
    •

    Damit das Spielfeld nun angezeigt wird, müssen wir im oberen Bereich bei //call function die Subroutine aufrufen. Dazu geben Sie einfach den namen der Subroutine Program_Window() an.



    zurück zur Übersicht
     



    5. Spielkartenfunktion

    Nun kommen wir zum eigentlich interessanten Teil des Spielablaufes. Hier gilt es nicht nur das vergleichen zweier aufgedeckter Spielkarten zu tätigen, sondern auch diverse dazu benötigter Daten zu ermitteln, bzw. an zu geben. Es werden mehrere Daten benötigt. Zum einen den Namen des Views sowie des Buttons, die Position des Views und die Nummer des jeweiligen Bildes.

    Fügen Sie folgenden Code in den Bereich //cases ein:

    case "B_1|"
       BuView$="Button1"
       Button$="B_1"
       horizontal1=10
       vertikal1=10
       horizontal2=120
       vertikal2=120
       BildNr=1
       BildAuswahl()
    break


  • BuView$="Button1": In dieser Variable wird der Name des Button Views angegeben, also der Name des Views, auf welchen wir den ersten Button geleht haben

  • Button$="B_1": In dieser Variable wird der Name des Buttons angegeben.

  • horizontal1=10: In horizontal1 geben wir die linke Position des Buttons an.

  • horizontal2=120: In horizontal2 geben wir die rechte Position des Buttons an.

  • vertikal1=10: Mit vertikal1 geben wir die obere Position des Buttons an.

  • vertikal2=120: Mit vertikal2 geben wir die untere Position des Buttons an.

  • BildNr=1: In BildNr speichern wir die Nummer des Bildes (Bild1 - Bild8)

  • BildAuswahl(): Am Ende wird die Subroutine BildAuswahl() aufgerufen, in welcher wir alle Daten verarbeiten.
    •

    Dies ist der erste von 16 Buttons, diese Angabe müssen nun anschließend für alle weiteren 15 Buttons erstellt werden. Alle Informationen, über die Buttons, müssen Sie dabei von dem beim Spielfeld angegebenen nehmen (horizontale und vertikale Position, Name von View und Button, Bild Nummer)

    Kommen wir nun zur Subroutine. Fügen Sie dazu folgenden Code in den Bereich //sub routines ein:

    sub BildAuswahl()
       VIEW REMOVE BuView$
       VIEW horizontal1,vertikal1 TO horizontal2,vertikal2, BuView$, "GameTable"
       err = DRAW IMAGE 5,5 TO 105,105, Grafikordner$+"bild"+str$(BildNr)+".png", BuView$
       klicks=klicks+1
       if(klicks=1)then
          Karte1$="bild"+str$(BildNr)+".png"
          Karte_Button1$=Button$
          Karte_horizontal1=horizontal1
          Karte_vertikal1=vertikal1
          Karte_horizontal2=horizontal2
          Karte_vertikal2=vertikal2
          KarteView1$=BuView$
       elseif(klicks=2)then
          Karte2$="bild"+str$(BildNr)+".png"
          Karte_Button2$=Button$
          Karte_horizontal3=horizontal1
          Karte_vertikal3=vertikal1
          Karte_horizontal4=horizontal2
          Karte_vertikal4=vertikal2
          KarteView2$=BuView$
       fi
       if(klicks=2)then
          if(Karte1$=Karte2$)then
             status=status+1
             spielzug=spielzug+1
             if(status=8)then
                window open B_Breite/2-120,B_Hoehe/2-70 to B_Breite/2+120,B_Hoehe/2+70, "Status", "Gewonnen"
                WINDOW SET "Status", "Look", "Modal"
                WINDOW SET "Status", "Flags", "Not-Resizable,Not-Zoomable"
                DRAW SET "system-bold", "Status"
                DRAW TEXT 10,15, "Sie haben gewonnen!!!", "Status"
                DRAW SET "system-plain", "Status"
                DRAW TEXT 10,45, "Runden: "+str$(spielzug), "Status"
                TEXTCONTROL 10,50 TO 230,40, "Spieler_Name", "Enter Name:", "", "Status"
                BUTTON 60,100 TO 180,110, "Speichern", "Speichern", "Status"
             fi
          else
             spielzug=spielzug+1
             wait 0.5
             VIEW REMOVE KarteView1$
             VIEW REMOVE KarteView2$
             VIEW Karte_horizontal1,Karte_vertikal1 TO Karte_horizontal2,Karte_vertikal2, KarteView1$, "GameTable"
             BUTTON IMAGE 5,5, Karte_Button1$, Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, KarteView1$
             VIEW Karte_horizontal3,Karte_vertikal3 TO Karte_horizontal4,Karte_vertikal4, KarteView2$, "GameTable"
             BUTTON IMAGE 5,5, Karte_Button2$, Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, KarteView2$
          fi
          klicks=0
       fi
    end sub


    Die Daten die wir vorher beim Button definiert haben, werden in der Subroutine verarbeitet. Dadurch das wir bei allen Buttons die selben Variablennamen verwenden, können wir diese auch für alle gemeinsam nutzen. Dies spart eine Menge Zeilen, was wiederum eine bessere Übersicht des Sourcecodes ergibt. Daher sollte man immer versuchen so viele Zeilen wie möglich zu sparen.

  • Mit VIEW REMOVE BuView$ wird zuerst der View entfernt, auf dem der angeklickte Button sitzt.

  • Danach wird mit VIEW... der View neu erstellt. Dabei bekommt er durch die vorher definierten Variablen genau den selben Namen und Position wie der View der entfernt wurde.

  • Mit err = DRAW IMAGE... wird das Bild welches sich hinter dem Button verbirgt angezeigt. Auch hier verwenden wir die vorher definierten Variablen indem wir bei Grafikordner$+"bild"+str$(BildNr)+".png" nicht nur einfach das Bild angeben, sondern auch den im Vorfeld angegebenen Grafikordner. Der Name des Bildes setzt sich aus dem Wort "bild" und der Nummer des Bildes BildNr zusammen. Da BildNr eine Zahlenvariable ist, und wir sie so nicht an ein Wort anhängen können, müssen wir diese vorher in eine Textvariable umwandeln. Dazu benutzen wir den String str$(). Am Ende fügen wir dann noch den Suffix für die Grafik an (hier .png)

  • Mit klicks=klicks+1 zählen wir die Anzahl der vom Spieler durchgeführten Klicks auf die Spielkarten. Dies ist wichtig, da wir nur so erfahren, wann dieser zwei Buttons gedrückt hat und wir die aufgedeckten Bilder mit einander vergleichen müssen.

  • Mit der IF-Abfrage if(klicks=1)then wird die Zahlenvariable klicks überprüft. Ist deren Zahl 1 wird diese IF-Abfrage ausgeführt. Daraufhin werden verschiedene Variablen definiert.
    -In Karte1$ wird der Pfad und das Bild gespeichert welches beim ersten Klick dargestellt wird.
    -In Karte_Button1$ wird der Button gespeichert, welcher beim ersten Klick verwendet wurde.
    -Mit Karte_horizontal1, Karte_vertikal1 und Karte_horizontal2, Karte_vertikal2 werden die Angaben für den Button, später das Bild, gespeichert.
    -In KarteView1$ wird der Name des Views gespeichert auf welchen der als erstes geklickte Button liegt.

  • Mit der ELSEIF Abfrage elseif(klicks=2)then fügen wir innerhalb der IF-Schleife eine weitere Ausführmöglichkeit ein. Ist hier der Wert klicks = 2 werden auch die gleichen Informationen gespeichert wie beim Wert 1, nur daß diesmal die Informationen für den zweiten angeklickten Button gespeichert werden.

  • Die IF Abfrage wird mit fi (man kann hier auch endif benutzen) beendet.
    •
    Durch die erste IF Abfrage werden alle zum Vergleich benötigten Angaben ermittelt. Die darauf folgende IF Abfrage wird dazu verwendet, entweder die Karten, sollten diese gleich sein, aufgedeckt zu lassen, oder aber diese wieder zu verdecken.

  • Die IF Abfrage wird ausgeführt, sobald die Variable klicks den Wert 2 hat (if(klicks=2)then).

  • Innerhalb dieser IF Abfrage beginnt eine weitere IF Abfrage: if(klicks=2)then. Hier werden die beiden Kartenvariablen miteinander verglichen. Stimmen die beiden Variablen überein, wird diese ausgeführt.

  • Die Zahlenvariable status wird mit status=status+1 erhöht, sobald zwei gleiche Karten gefunden wurden.

  • Mit spielzug=spielzug+1 zählen wir die Anzahl der Spielzüge (für die Hightscore).

  • Es folgt wiederum eine weitere IF Abfrage welche die Variable status überprüft. Ist der Wert der Variable if(status=8)then sind alle Spielkartenpaare aufgedeckt und das Spiel damit gewonnen. In der If Abfrage wird dann ein neues Fenster geöffnet, in welchen der Spieler aufgefordert wird seinen Namen einzutragen (für die Hightscore). Aber dazu später mehr. Auch diese Abfrage wird mit fi beendet.

  • Kommen wir erst einmal zurück zur If Abfrage if(Karte1$=Karte2$)then. Stimmen die beiden Variablen nicht überein, wird eine else aufgerufen.

  • In der else wird auch der Spielzug gezählt. Dann werden beide Views entfernt und neu erstellt. Auf diesen Views werden dann die beiden Buttons wieder erstellt und mit der Vorderseite angezeigt, also die Spielkarten wieder verdeckt dargestellt. Auch diese Abfrage wird mit fi beendet.

  • Da wir nie mehr als 2 Klicks haben dürfen, wird mit klicks=0 der Wert der Variablen klicks wieder auf 0 gesetzt.

  • Anschließend wird auch die IF Abfrage if(klicks=2)then mit fi beendet.

  • Wir schließen die Subroutine mit end sub.
    •

    zurück zur Übersicht
     



    6. Die Hightscore

    Kommen wir zurück zu der kurz angsprochenen IF Abfrage bei der Spielkartenfunktion. Hier wurde die Abfrage begonnen, wenn die Variable status eine Größe von 8 hat:

    if(status=8)then
       window open B_Breite/2-120,B_Hoehe/2-70 to B_Breite/2+120,B_Hoehe/2+70, "Status", "Gewonnen"
       WINDOW SET "Status", "Look", "Modal"
       WINDOW SET "Status", "Flags", "Not-Resizable,Not-Zoomable"
       DRAW SET "system-bold", "Status"
       DRAW TEXT 10,15, "Sie haben gewonnen!!!", "Status"
       DRAW SET "system-plain", "Status"
       DRAW TEXT 10,45, "Runden: "+str$(spielzug), "Status"
       TEXTCONTROL 10,50 TO 230,40, "Spieler_Name", "Enter Name:", "", "Status"
       BUTTON 60,100 TO 180,110, "Speichern", "Speichern", "Status"
    fi


    Ist dies der Fall, wird ein neues Fenster in der mitte des Bildschirms geöffnet, hierbei werden wieder die beiden Variablen B_Breite und B_Hoehe verwendet wie beim Programmfenster. Dazu kommt eine Textausgabe im Fenster, sowie eine Textcontrol und ein Button. Hier wird der Spieler aufgefordert, seinen Namen in die Textcontrol zu schreiben um durch drücken des "Speichern" Buttons, diesen in die Hightscore einzutragen. Dies kennen Sie aus dem zweiten Einsteigertutorial vom BFS Imagecreator.

    Damit der Button funktionieren kann, fügen Sie folgenden Kode in den Bereich //cases ein:

    case "Speichern|"
       Spieler_Name$ = TEXTCONTROL GET$ "Spieler_Name"
       anlegen=open(Programmordner$+"/Hightscore.data", "a")
          print #anlegen str$(spielzug)+";"+Spieler_Name$
       close(anlegen)
       Output$=System$("sort -g "+Programmordner$+"/Hightscore.data > "+Programmordner$+"/Hightscore.temp")
       Output$=System$("rm "+Programmordner$+"/Hightscore.data")
       Output$=system$("cp "+Programmordner$+"/Hightscore.temp "+Programmordner$+"/Hightscore.data")
       Output$=System$("rm "+Programmordner$+"/Hightscore.temp")
       WINDOW CLOSE "Status"
       VIEW REMOVE "GameTable"
       Hightscore()
    break


  • Mit Spieler_Name$ = TEXTCONTROL GET$ "Spieler_Name" lesen wir die Textcontrol "Spieler Name" aus und speichern den eingegebenen Namen des Spieler in die Variable Spieler_Name$.

  • Danach wir mit anlegen=open(Programmordner$+"/Hightscore.data", "a") eine Textdatei zum speichern geöffnet (sollte dieser nicht existieren, wird dieser erstellt). Die Datei heißt "Hightscore.data" und liegt im Programmordner$ vom Spiel. Das "a" steht dafür, daß nachträglich in die Datei geschreiben werden soll und diese nicht neu geschrieben werden soll. Der Name der Zahlenvariable "anlegen" kann frei gewählt werden, es handelt sich dabei nicht um eine Systemvariable.

  • Mit print #anlegen str$(spielzug)+";"+Spieler_Name$ schreiben wir den Inhalt der beiden Variablen spielzug und Spieler_Name$ in die Datei Hightscore.data. Dafür muß die Zahlenvariable in eine Textvariable geändert werden, wofür wir wieder den String str$() verwenden. Wir tragen die Dasteien hintereinader in die Datei ein und trennen diese mit einem ; Zeichen.

  • Mit close(anlegen) schließen wir den Speichervorgang.
    •
    Wenn man auf diese Weise die Daten speichert, werden einfach alle neu eingetragenen Spielerdaten hinten angefügt. Wir wollen aber das der Inhalt der Datei nachher in der Hightscore in alphabetischer Reihenfolge angezeigt wird. Dazu muss man den Inhalt sortieren. Eine der einfachsten Methoden dieses zu machen ist, den Shell Befehl sort zu nutzen.

  • Der sort Befehl benötigt folgende Angaben: sort -g /Pfad/zur/Quelldatei > /Pfad/zur/Ausgabedatei.
    Für den "/Pfad/zur/Quelldatei" verwenden wir die für den "/Pfad/zum/Programmordner" angelegten Variable Programmordner$. An diese fügen wir die beim Spielabschluß erstellte Hightscore.data Datei an: Programmordner$+"/Hightscore.data".
    Danach folgte das vom sort Befehl verwendete Zeichen für die Ausgabedatei: ">" und die Pfadangabe mit Ausgabedatei Hightscore.temp.
    Danach verwenden wir das Shell Befehl rm (remove) und entfernen damit die Hightscore.data Datei: "rm /Pfad/zur/Zieldatei".
    Dann wird die "Hightscore.temp" Datei mit Hilfe des Shell Befehls cp (copy) kopiert und als "Hightscore.data" gespeichert: "cp /Pfad/zur/Quelldatei /Pfad/zur/Zieldatei".
    Im Anschluß entfernen wir die Datei "Hightscore.temp".

  • Daraufhin schließen wir das Fenster "Status" und entfernen den View "GameTable".

  • Am Ende wird die Subroutine Hightscore() aufgerufen. Fügen sie folgenden Kode im Bereich //sub routines ein:
    •

    sub Hightscore()
       View$="Hightscore"
       MENU SET "Game", "Hightscore", "Disable", "Hauptfenster"
       VIEW 0,15 TO 500, 495, "Hightscore", "Hauptfenster"
       DRAW SET "system-bold", "Hightscore"
       DRAW TEXT 20,50, "Hightscore", "Hightscore"
       DRAW SET "system-plain", "Hightscore"
       Spielstaende$=Programmordner$+"/Hightscore.data"
       x=0
       auslesen=open(Spielstaende$, "r")
       while (not EOF(auslesen))
          line input #auslesen b$
          dim elements$(1)
          numElements = split(b$, elements$(), ";")
          for i = 1 to numElements
             x=x+1
             dim d$(x)
             d$(x) = elements$(i)
          next i
       wend
       close(auslesen)
       height=100
       aa=1
       for a = 1 to x/2
          DRAW TEXT 20,height, d$(aa), "Hightscore"
          aa=aa+2
          height=height+20
       next a
       height=100
       bb=2
       for b = 1 to x/2
          DRAW TEXT 120,height, d$(bb), "Hightscore"
          bb=bb+2
       height=height+20
       next b
    end sub


  • Wir speichern wieder den derzeit in gebrauch befindenen Namen des Views welcher dargestellt wird in der Variable View$ (View$="Hightscore").

  • Mit MENU SET "Game", "Hightscore", "Disable", "Hauptfenster" deaktivieren wir den Menüpunkt "Hightscore". Diese Funktion ist deshalb Sinnvoll, da wir uns bereits in dieser befinden.

  • Dann erstellen wir einen neuen View mit dem Namen "Highscore" auf dem "Hauptfenster". Die Informationen der Highscore sollen auf diesem View mit dem Befehl DRAW TEXT dargestellt werden. Um bestimmte Textbereiche hervorzuheben, werden diese in "Fett Schrift" (Bold) geschrieben. Um dies zu machen, müssen Sie dieses vorher angeben. Dies gibt man mit dem Befehl DRAW SET an und für nachher den DRAW TEXT Befehl aus. Die DRAW SET Angabe ist so lange aktiv, bis diese wieder geändert wird. Dies machen wir hier, indem wir zuerst die Überschriften für die Ausgabe in "system-bold" schreiben und dann die Schrift wieder auf das Standard- Format "system-plain" ändern.

  • Mit Spielstaende$=Programmordner$+"/Hightscore.data" erstellen wir eine Variable, in der die Hightscoredatei mit Dateipfad enthalten ist. Dies erleichtert das spätere Verwenden dieser Angabe, da hier nur die Variable angegeben werden muss.

  • Wir setzen eine im folgenden Ablauf verwendeten Zahlenvariable auf 0 (x=0). Dies machen wir, damit beim wiederholten Aufruf der Hightscore keine falschen Werte verwendet werden.

  • Ähnlich wie beim schreiben einer Datei, lesen wir diese im System ein. Dies machen wir hier mit auslesen=open(Spielstaende$, "r"). Der Name der Zahlenvariable "auslesen" kann frei gewählt werden, es handelt sich dabei nicht um eine Systemvariable.

  • Wir starten eine WHILE Schleife, welche solange läuft, bis das Auslesen von der Variable Spielstaende$ beendet ist. Daher ist in while (not EOF(auslesen))
    • das EOF() angegeben, was bedeutet "End of File".
  • Mit line input #auslesen b$ wird bei jedem Schleifendurchgang der Inhalt der jeweiligen Zeile in der Variable b$ gespeichert.

  • Da wir nicht mehrere Zeilen in einer Variable speichern können, erstellen wir einen Array mit dim elements$(1).

  • Anschließend splitten wir die Varialble b$ bei jedem ; Zeichen und fügen die Elemente in den Array elements$() ein (numElements = split(b$, elements$(), ";"). Mit numElements zählen wir die Anzahl der Zeilen, welche wir in den Array speichern.

  • Dann starten wir eine FOR Schleife mit for i = 1 to numElements. Die Schleife läuft solange, bis der Wert der Zahlenvariable i gleich der Zahlenvariable numElemtens entspricht.

  • Mit der Zahlenvariable x=x+1 zählen wir die durchläufe der for Schleife. Da wir hier immer mit dem Wert 0 anfangen möchten, haben wir vorher die Varialbe auf 0 gesetzt.

  • Wir erstellen einen weiteren Array mit dem Namen d$ und dimensionieren Ihn mit Hilfe der Zahlenvariable x (dim d$(x)). Man kann am dieser Stelle sicherlich einen Sinnvolleren Namen wählen als d$, aber wer längere Zeit programmiert bedient sich gerne kurzer Namen.

  • Mit d$(x) = elements$(i) fügt man den Inhalt des Arrays d$(x) in den Array elements$(i) ein.

  • Mit next i wird der Schleifenvorgang der for Schleife fortgesetzt.

  • Die WHILE Schleife wird anschließend mit wend zurückgesetzt.

  • Wir schließen den Auslesevorgang mit close(auslesen).
    •
    Damit ist der erste Schritt zum Darstellen der Hightscore getan. Anschließend geht es darum den Inhalt des Arrays elements$() auf dem View "Hightscore" darzustellen. Die Wichtigste Information die wir dafür benötigen, sind die Position des Textes auf dem View. Hier muss natürlich etwas probiert werden, bis man die geeignete Darstellung bekommt:

  • Mit height=100 legen wir die Texthöhe der ersten Zeile fest.

  • Mit einer neuen Zahlenvariable mit dem Namen aa (nicht grad kreativ) und einer Größe von 1 (aa=1) zählen wir die von uns eingefügten Zeilen. Dabei geht es darum immer die Ungerade Zeilenzahl zu bekommen.

  • Wir verwenden eine FOR Schleife zum einfügen der Daten (for a = 1 to x/2). Dazu erstellen wir eine Zahlenvarialbe a und lassen die Schleife solange laufen, bis der Wert a gleich x geteilt durch 2 ergibt.

  • Wir schreiben den Inhalt des Arrays d$() mit dem Befehl DRAW TEXT 20,height, d$(aa), "Hightscore" auf den View "Heightscore". Dabei geben wir die Position des Textes mit den Werten 20 (Abstand vom linken Viewrand) und der Zahlenvariable height an. Der Text der eingefügt werden soll, wird dem Array d$(aa) entnommen. Um die richtige Zeile im Array zu bekommen verwenden wir nun die Zahlenvarialbe aa.

  • Da der Eintag im Array so aussieht, daß sich Heightscore Zahl und Name des Spielers immer abwechseln (Zahl;Name Spieler), müssen wir nun die nächste Zeile überspringen, da wir zuerst alle Heightscore Zahlen eintragen. Dies mache wir mit aa=aa+2.

  • Auch die Höhe muss automatisch erweitert werden, da sonst die Zahlen übereinander stehen. Daher erhöhen wir die Höhe immer um 20 Pixel (height=height+20).

  • Mit next a beenden wir den Schleifendurchgang.

  • Nun müssen wir die Zahlenvarialbe height erneut auf 100 zurücksetzten, da wir sonst unterschiedliche Höhlen bekommen, wenn wir nun hinter die Heightscore Zahlen die Namen eintragen.

  • Mit einer neuen Zahlenvariable mit dem Namen bb (immer noch nicht gerade kreativ) und einer Größe von 2 (bb=2) zählen wir die von uns eingefügten Zeilen. Dabei geht es darum immer die gerade Zeilenzahl zu bekommen.

  • Wir verwenden erneut eine FOR Schleife zum einfügen der Daten (for b = 2 to x/2). Dazu erstellen wir eine Zahlenvarialbe b und lassen die Schleife solange laufen, bis der Wert b gleich x geteilt durch 2 ergibt.

  • Wir schreiben erneut den Inhalt des Arrays d$() mit dem Befehl DRAW TEXT 20,height, d$(bb), "Hightscore" auf den View "Heightscore". Diesmal geben wir aber die Position des Textes mit den Werten 120 (Abstand vom linken Viewrand) und der Zahlenvariable height an. Der Text der eingefügt werden soll, wird dem Array d$(bb) entnommen. Um die richtige Zeile im Array zu bekommen verwenden wir nun die Zahlenvarialbe bb
    • .
  • Auch diesmal müssen wir auf Grund des Array Aufbaus (Zahl;Name Spieler), jede zweite Zeile überspringen, da wir nun alle Spieler Namen eintragen möchten. Dies mache wir mit bb=bb+2.

  • Auch diesmal muss die Höhe automatisch erweitert werden, da sonst die Namen übereinander stehen. Daher erhöhen wir die Höhe wieder um 20 Pixel (height=height+20). Im Grunde genommen kann man dies auch nur einmal ausführen, ist aber für das bessere Verstäntnis bei beiden Schleifen eingebaut.

  • Mit next b beenden wir den Schleifendurchgang.

  • Am Ende wir die Subroutine mit end sub beendet.
    •

    zurück zur Übersicht
     



    7. Menüfunktionen

    Nun geht es noch darum, die Menüoptionen ausführbar zu machen. Fügen Sie dazu folgenden Kode im Bereich //cases ein:

    case "Hauptfenster:Game:Hightscore|"
       VIEW REMOVE "GameTable"
       Hightscore()
    break

    case "Hauptfenster:Game:New Game|"
       MENU SET "Game", "Hightscore", "Enable", "Hauptfenster"
       VIEW REMOVE View$
       klicks=0
       spielzug=0
       status=0
       Programm_Fenster()
    break


    Wir haben hier zwei Cases, eine für das Aufrufen der Heightscore und eine für das Starten eines neuen Spiels.

  • Das Aufrufen der Heightscore ist einfach. Hier muss nur der aktuelle View mit VIEW REMOVE "GameTable" entfernt werden und die Subroutine Hightscore() aufgerufen werden.
    •
    Bei dem Aufruf des neuen Spiels müssen einige Zahlenvariable zurückgesetzt werden und auch vorher deaktivierte Menübereiche wieder aktiviert werden:

  • Wir aktivieren den Menüpunkt Heightscore mit MENU SET "Game", "Hightscore", "Enable", "Hauptfenster".

  • Dann werden alle Zahlenvariablen wieder auf 0 gesetzt, die für das Erfassen des Spielablaufes nötig sind. Dies sind die klicks, die Spielzüge (spielzug) und der status

  • Am Ende wir die Subroutine Programm_Fenster() aufgerufen.
    •

    zurück zur Übersicht
     



    8. Der komplette Quellkode

    #!/boot/home/config/bin/yab

    B_Breite = peek("desktopwidth")
    B_Hoehe = peek("desktopheight")

    if (peek("isbound")) then
       Programmordner$ = peek$("directory")
    else
       Programmordner$=system$("pwd")
       Programmordner$ = left$(Programmordner$, len(Programmordner$)-1)
    fi

    Grafikordner$=Programmordner$+"/gfx/"

    klicks=0
    spielzug=0
    status=0

    WINDOW OPEN B_Breite/2-250,B_Hoehe/2-250 to B_Breite/2+250,B_Hoehe/2+250, "Hauptfenster", "Memory Game"
       WINDOW SET "Hauptfenster", "Flags", "Not-Resizable,Not-Zoomable"
          MENU "File", "Quit", "Q", "Hauptfenster"
          MENU "Game", "New Game", "N", "Hauptfenster"
          MENU "Game", "Hightscore", "H", "Hauptfenster"

    Programm_Fenster()

    dim part$(1)
    inloop = true
    while(inloop)
       msg$ = message$
       if (split(msg$, part$(), ":|") > 2) then
          PartOne$=part$(1)
          PartTwo$ = part$(2)
          PartThree$ = part$(3)
       fi
       if (msg$ <> "") print msg$
       switch msg$

    case "Hauptfenster:File:Quit|"
       WINDOW CLOSE "Hauptfenster"
    break

    case "Hauptfenster:_QuitRequested|"
       WINDOW CLOSE "Hauptfenster"
    break

    case "B_1|"
       BuView$="Button1"
       Button$="B_1"
       horizontal1=10
       vertikal1=10
       horizontal2=120
       vertikal2=120
       BildNr=1
       BildAuswahl()
    break
    case "B_2|"
       BuView$="Button2"
       Button$="B_2"
       horizontal1=130
       vertikal1=10
       horizontal2=240
       vertikal2=120
       BildNr=2
       BildAuswahl()
    break
    case "B_3|"
       BuView$="Button3"
       Button$="B_3"
       horizontal1=250
       vertikal1=10
       horizontal2=360
       vertikal2=120
       BildNr=3
       BildAuswahl()
    break
    case "B_4|"
       BuView$="Button4"
       Button$="B_4"
       horizontal1=370
       vertikal1=10
       horizontal2=480
       vertikal2=120
       BildNr=4
       BildAuswahl()
    break
    case "B_5|"
       BuView$="Button5"
       Button$="B_5"
       horizontal1=10
       vertikal1=130
       horizontal2=120
       vertikal2=240
       BildNr=5
       BildAuswahl()
    break
    case "B_6|"
       BuView$="Button6"
       Button$="B_6"
       horizontal1=130
       vertikal1=130
       horizontal2=240
       vertikal2=240
       BildNr=6
       BildAuswahl()
    break
    case "B_7|"
       BuView$="Button7"
       Button$="B_7"
       horizontal1=250
       vertikal1=130
       horizontal2=360
       vertikal2=240
       BildNr=7
       BildAuswahl()
    break
    case "B_8|"
       BuView$="Button8"
       Button$="B_8"
       horizontal1=370
       vertikal1=130
       horizontal2=480
       vertikal2=240
       BildNr=8
       BildAuswahl()
    break
    case "B_9|"
       BuView$="Button9"
       Button$="B_9"
       horizontal1=10
       vertikal1=250
       horizontal2=120
       vertikal2=360
       BildNr=9
       BildAuswahl()
    break
    case "B_10|"
       BuView$="Button10"
       Button$="B_10"
       horizontal1=130
       vertikal1=250
       horizontal2=240
       vertikal2=360
       BildNr=10
       BildAuswahl()
    break
    case "B_11|"
       BuView$="Button11"
       Button$="B_11"
       horizontal1=250
       vertikal1=250
       horizontal2=360
       vertikal2=360
       BildNr=11
       BildAuswahl()
    break
    case "B_12|"
       BuView$="Button12"
       Button$="B_12"
       horizontal1=370
       vertikal1=250
       horizontal2=480
       vertikal2=360
       BildNr=12
       BildAuswahl()
    break
    case "B_13|"
       BuView$="Button13"
       Button$="B_13"
       horizontal1=10
       vertikal1=370
       horizontal2=120
       vertikal2=480
       BildNr=13
       BildAuswahl()
    break
    case "B_14|"
       BuView$="Button14"
       Button$="B_14"
       horizontal1=130
       vertikal1=370
       horizontal2=240
       vertikal2=480
       BildNr=14
       BildAuswahl()
    break
    case "B_15|"
       BuView$="Button15"
       Button$="B_15"
       horizontal1=250
       vertikal1=370
       horizontal2=360
       vertikal2=480
       BildNr=15
       BildAuswahl()
    break
    case "B_16|"
       BuView$="Button16"
       Button$="B_16"
       horizontal1=370
       vertikal1=370
       horizontal2=480
       vertikal2=480
       BildNr=16
       BildAuswahl()
    break

    case "Speichern|"
       Spieler_Name$ = TEXTCONTROL GET$ "Spieler_Name"
       anlegen=open(Programmordner$+"/Hightscore.data", "a")
          print #anlegen str$(spielzug)+";"+Spieler_Name$
       close(anlegen)
       Output$=System$("sort -g "+Programmordner$+"/Hightscore.data > "+Programmordner$+"/Hightscore.temp")
       Output$=System$("rm "+Programmordner$+"/Hightscore.data")
       Output$=system$("cp "+Programmordner$+"/Hightscore.temp "+Programmordner$+"/Hightscore.data")
       Output$=System$("rm "+Programmordner$+"/Hightscore.temp")
       WINDOW CLOSE "Status"
       VIEW REMOVE "GameTable"
       Hightscore()
    break

    case "Hauptfenster:Game:Hightscore|"
       VIEW REMOVE "GameTable"
       Hightscore()
    break

    case "Hauptfenster:Game:New Game|"
       MENU SET "Game", "Hightscore", "Enable", "Hauptfenster"
       VIEW REMOVE View$
       klicks=0
       spielzug=0
       status=0
       Programm_Fenster()
    break

       default:
       end switch
       if(window count<1) inloop = false
       sleep 0.1
    wend

    sub Program_Window()
       View$="GameTable"
       VIEW 0,15 TO 500, 495, "GameTable", "Hauptfenster"
       VIEW 10,10 TO 120,120, "Button1", "GameTable"
       BUTTON IMAGE 5,5, "B_1", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button1"
       VIEW 130,10 TO 240,120, "Button2", "GameTable"
       BUTTON IMAGE 5,5, "B_2", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button2"
       VIEW 250,10 TO 360,120, "Button3", "GameTable"
       BUTTON IMAGE 5,5, "B_3", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button3"
       VIEW 370,10 TO 480,120, "Button4", "GameTable"
       BUTTON IMAGE 5,5, "B_4", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button4"
       VIEW 10,130 TO 120,240, "Button5", "GameTable"
       BUTTON IMAGE 5,5, "B_5", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button5"
       VIEW 130,130 TO 240,240, "Button6", "GameTable"
       BUTTON IMAGE 5,5, "B_6", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button6"
       VIEW 250,130 TO 360,240, "Button7", "GameTable"
       BUTTON IMAGE 5,5, "B_7", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button7"
       VIEW 370,130 TO 480,240, "Button8", "GameTable"
       BUTTON IMAGE 5,5, "B_8", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button8"
       VIEW 10,250 TO 120,360, "Button9", "GameTable"
       BUTTON IMAGE 5,5, "B_9", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button9"
       VIEW 130,250 TO 240,360, "Button10", "GameTable"
       BUTTON IMAGE 5,5, "B_10", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button10"
       VIEW 250,250 TO 360,360, "Button11", "GameTable"
       BUTTON IMAGE 5,5, "B_11", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button11"
       VIEW 370,250 TO 480,360, "Button12", "GameTable"
       BUTTON IMAGE 5,5, "B_12", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button12"
       VIEW 10,370 TO 120,480, "Button13", "GameTable"
       BUTTON IMAGE 5,5, "B_13", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button13"
       VIEW 130,370 TO 240,480, "Button14", "GameTable"
       BUTTON IMAGE 5,5, "B_14", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button14"
       VIEW 250,370 TO 360,480, "Button15", "GameTable"
       BUTTON IMAGE 5,5, "B_15", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button15"
       VIEW 370,370 TO 480,480, "Button16", "GameTable"
       BUTTON IMAGE 5,5, "B_16", Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, "Button16"
    end sub

    sub BildAuswahl()
       VIEW REMOVE BuView$
       VIEW horizontal1,vertikal1 TO horizontal2,vertikal2, BuView$, "GameTable"
       err = DRAW IMAGE 5,5 TO 105,105, Grafikordner$+"bild"+str$(BildNr)+".png", BuView$
       klicks=klicks+1
       if(klicks=1)then
          Karte1$="bild"+str$(BildNr)+".png"
          Karte_Button1$=Button$
          Karte_horizontal1=horizontal1
          Karte_vertikal1=vertikal1
          Karte_horizontal2=horizontal2
          Karte_vertikal2=vertikal2
          KarteView1$=BuView$
       elseif(klicks=2)then
          Karte2$="bild"+str$(BildNr)+".png"
          Karte_Button2$=Button$
          Karte_horizontal3=horizontal1
          Karte_vertikal3=vertikal1
          Karte_horizontal4=horizontal2
          Karte_vertikal4=vertikal2
          KarteView2$=BuView$
       fi
       if(klicks=2)then
          if(Karte1$=Karte2$)then
             status=status+1
             spielzug=spielzug+1
             if(status=8)then
                window open B_Breite/2-120,B_Hoehe/2-70 to B_Breite/2+120,B_Hoehe/2+70, "Status", "Gewonnen"
                WINDOW SET "Status", "Look", "Modal"
                WINDOW SET "Status", "Flags", "Not-Resizable,Not-Zoomable"
                DRAW SET "system-bold", "Status"
                DRAW TEXT 10,15, "Sie haben gewonnen!!!", "Status"
                DRAW SET "system-plain", "Status"
                DRAW TEXT 10,45, "Runden: "+str$(spielzug), "Status"
                TEXTCONTROL 10,50 TO 230,40, "Spieler_Name", "Enter Name:", "", "Status"
                BUTTON 60,100 TO 180,110, "Speichern", "Speichern", "Status"
             fi
          else
             spielzug=spielzug+1
             wait 0.5
             VIEW REMOVE KarteView1$
             VIEW REMOVE KarteView2$
             VIEW Karte_horizontal1,Karte_vertikal1 TO Karte_horizontal2,Karte_vertikal2, KarteView1$, "GameTable"
             BUTTON IMAGE 5,5, Karte_Button1$, Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, KarteView1$
             VIEW Karte_horizontal3,Karte_vertikal3 TO Karte_horizontal4,Karte_vertikal4, KarteView2$, "GameTable"
             BUTTON IMAGE 5,5, Karte_Button2$, Grafikordner$+"bild0.png", Grafikordner$+"bild0.png", Disabled$, KarteView2$
          fi
          klicks=0
       fi
    end sub

    sub Hightscore()
       View$="Hightscore"
       MENU SET "Game", "Hightscore", "Disable", "Hauptfenster"
       VIEW 0,15 TO 500, 495, "Hightscore", "Hauptfenster"
       DRAW SET "system-bold", "Hightscore"
       DRAW TEXT 20,50, "Hightscore", "Hightscore"
       DRAW SET "system-plain", "Hightscore"
       Spielstaende$=Programmordner$+"/Hightscore.data"
       x=0
       auslesen=open(Spielstaende$, "r")
       while (not EOF(auslesen))
          line input #auslesen b$
          dim elements$(1)
          numElements = split(b$, elements$(), ";")
          for i = 1 to numElements
             x=x+1
             dim d$(x)
             d$(x) = elements$(i)
          next i
       wend
       close(auslesen)
       height=100
       aa=1
       for a = 1 to x/2
          DRAW TEXT 20,height, d$(aa), "Hightscore"
          aa=aa+2
          height=height+20
       next a
       height=100
       bb=2
       for b = 1 to x/2
          DRAW TEXT 120,height, d$(bb), "Hightscore"
          bb=bb+2
       height=height+20
       next b
    end sub



    zurück zur Übersicht
     



    9. Nachwort

    Damit haben wir ein vollständig funktionierendes Memory Spiel. Jedoch ist noch ein grober Fehler enthalten. Keine Fehler, der den Ablauf des Spiels verhindert, aber Etwas was weiter ausgearbeitet werden muß.

    Die Spielkarten werden zwar verdeckt dargestellt, dies aber immer an den selben Stellen. Hier müssten die Spielkarten mit einem Random System bei jedem Laden oder neu Starten des Spiels auf die Button Views verteilt werden.

    Wie man dies macht ist nicht Teil dieses Tutorials. Vielleicht wird es eine Erweiterung für dieses Tutorial geben, wo wir einen Lösungsweg anbieten. Bis dahin jedoch sollte dies eine Aufgabenstellung sein, die dem jenigen Kopfzerbrechen bereiten wird, der sich daran macht, dieses Spiel zu vollenden *Smile*.

    zurück zur Übersicht
     



    10. Download

    Hier könnt Ihr das Spiel mit Sourcecode in compilierten Zustand herunterladen und austesten.

    zurück zur Übersicht
     



    Anleitung erstellt durch Christian Albrecht (Lelldorin) Dezember 2007
    Bereitgestellt durch BeSly, der BeOS & Zeta Wissensbasis.