Prototyp Tictactoe

Tic-Tac-Toe ist ein einfaches Zweipersonen-Strategiespiel, bei dem abwechselnd auf einem quadratischen 3x3 Felder großen Spielfeld, Zeichen von zwei Spielern (üblicherweise Kreuz und Kreis) gesetzt werden. Wenn ein Spieler zuerst 3 Zeichen in einer Reihe hat, so hat dieser gewonnen. Sollten in allen Felder voll sein, ohne dass 3 Zeichen in einer Reihe sind, so ist Unentschieden.

Folgende Bedingungen müssen eingehalten werden:

1. Es gibt 9 Felder angeordnet in einem 3x3-Gitter, welche am Anfang leer sind.
2. Wenn auf ein leeres Feld geklickt wird, dann wird das Zeichen des Spielers, der momentan an der Reihe ist, in das Feld gesetzt.
3. Es wird angezeigt, welcher Spieler gerade an der Reihe ist.
4. Wenn auf ein volles Feld geklickt wird, dann passiert nichts.
5. Nach einem Spielzug ist der andere Spieler an der Reihe.
6. Wenn 3 gleiche Zeichen in einer Reihe (horizontal, vertikal oder diagonal) sind, hat der Spieler des letzten Zugs gewonnen. Dieser Spieler wird angezeigt und das Spiel ist vorbei.
7. Wenn alle Felder besetzt sind, ohne dass 3 Zeichen in einer Reihe sind, so wird ein Unentschieden angezeigt und das Spiel ist vorbei.
8. Wenn das Spiel vorbei ist, dann kann kein Zeichen mehr auf ein Feld gesetzt werden
9. Wenn das Spiel vorbei ist, kann es über die Spieloberfläche neu gestartet werden.

Zunächst einmal, identifizieren wir die Bausteine, die für das Spiel benötigt werden. Es wird ein Baustein vom Typ Text als Anzeige benötigt. Schließlich wird ein Baustein vom Typ Bild für ein Feld benötigt. Dieses beinhaltet dann zwei weitere Bilder: Ein Kreuz und ein Kreis.

Das Kreuz und der Kreis sind dann zunächst unsichtbar und werden dann beim Klicken auf die Felder sichtbar. Außerdem wir pro Feld ein Baustein vom Typ Bool benötigt, welches angibt, ob das Feld schon angeklickt wurden ist oder nicht. Unten die Abbildung demonstriert, wie das Spiel aufgebaut ist.

Nun werden die Schritte beschrieben, die der Nutzer macht, um das Spiel zu erstellen:

1. Platziere einen Baustein vom Typ Text in die Welt, passe die Eigenschaften an, benenne ihn in Anzeige und gebe als Text an "Spieler X ist dran!".
2. Erstelle den Baustein Feld
   • Füge einen Baustein Bild hinzu und wähle das Bild eines Quadrats aus. Benenne das Quadrat in Feld um.
   • Füge einen Baustein Bild hinzu und zeichne ein rotes Kreuz. Benenne das Kreuz in Kreuz um. Lasse das Kreuz auf das Quadrat fallen, sodass dieser ein Teil des Quadrats wird. Setze die Sichtbarkeit des Kreuzes auf unsichtbar.
   • Füge einen Baustein Bild hinzu und zeichne einen blauen Kreis. Benenne den Kreis in Kreis um. Lasse den Kreis auf das Quadrat fallen, sodass dieser ein Teil des Quadrats wird. Setze die Sichtbarkeit des Kreises auf unsichtbar.
   • Füge einen Baustein Bool hinzu und benenne ihn in Gesetzt. Ziehe in auf das Feld, sodass er Teil dieses wird und verstecke ihn.
   • Füge einen Baustein Symbol hinzu und benenne ihn in in Symbol. Ziehe in auf das Feld, sodass er Teil dieses wird und verstecke ihn.
   • Speicher das Objekt mit dem Namen Feld als Eigenen Baustein ab, indem du es in das Eigene-Baustein-Panel ziehst.
3. Erstelle die 9 Felder
   • Platziere 3 Felder nebeneinander und gruppiere sie in eine Liste. Richte diese Liste horizontal aus.
   • Kopiere diese Liste und Füge sie zwei mal ein.
   • Wähle nun die 3 Listen aus und gruppiere sie erneut in eine Liste. Richte diese Liste vertikal aus. Nenne diese Liste Felder.
   • Die 9 Felder sollten nun erstellt sein und als verschachtelte Liste vom Typ Liste<Liste<Feld>> über den Namen Felder zugreifbar sein.
4. Erstelle den Code für den Baustein Feld:

Aktions-Editor

setze Symbol (Text S):
    ? Gesetzt = nein:
        Symbol <- S;
        ? S = "X": 
            Kreuz: zeige dich!
        ? S = "O":
            Kreis: zeige dich!
        .
    .
.

Ereignis-Editor

Start:
   Kreis: verstecke dich!
   Kreuz: verstecke dich!
   Geklickt <- nein;
   Symbol <- "";
.

6. Füge der Welt einen Baustein vom Typ Bool hinzu, nenne ihn GameOver und verstecke ihn.
7. Füge der Welt einen Baustein vom Typ Text hinzu, nenne ihn Spieler, setze den Text auf "X" und verstecke ihn.
8. Erstelle den Code für die Welt:

Aktions-Editor

überprüfe Gewinner:
    überprüfe Reihen!
    überprüfe Spalten!
    überprüfe Diagonalen!
.

überprüfe Reihen:
    [y <- 0; #Felder]:
        Bool gewonnen <- ja;
        [x <- 0; #Felder]:
            ? Felder_(y)_(x)->Symbol /= Spieler:
                gewonnenX <- nein;
                \;
            .
        .
        ? gewonnen: zeige Gewinner!     
    .
.

überprüfe Spalten mit (Text Symbol):
    [y <- 0; #Felder]:
        Bool gewonnen <- ja;
        [x <- 0; #Felder]:
            ? Felder_(y)_(x)->Symbol /= Spieler:
                gewonnenX <- nein;
                \;
            .
        .
        ? gewonnen: zeige Gewinner!     
    .
.

überprüfe Diagonalen mit (Text Symbol):
    [i <- 0; #Felder]:
        ? Felder_(i)_(i)->Symbol /= Spieler:
            <-;
        .
    .
    zeige Gewinner!
.

zeige Gewinner:
    beende Spiel mit ("Spieler " + Spieler + " hat gewonnen!")!
.

überprüfe Unentschieden:
    [y <- 0; #Felder]:
        [x <- 0; #Felder]:
            ? Felder_(y)_(x)->Gesetzt = nein: <-;
        .
    .
    beende Spiel mit ("Unentschieden!")! 
.

beende Spiel mit (Text T):
   Anzeige: setze Text auf (T)!
   GameOver <- ja;
   +-; § stoppe die Ausführung des Codes §
.

wechsel Spieler:
    ? Spieler = "X": Spieler <- "O";
    ? Spieler = "O": Spieler <- "X";

    Anzeige: setze Text auf ("Spieler " + Spieler + " ist dran!")!
.

Ereignis-Editor

Start:
    GameOver <- nein;
    wechsel Spieler!
.

Klick auf (Feld F):
   ? ~GameOver & ~F->Gesetzt:
       F: setze Symbol (Spieler)!
       überprüfe Gewinner!
       überprüfe Unentschieden!
       wechsel Spieler!
   .
.