Tic-Tac-Toe ist ein Spiel mit 3×3 Feldern. Die Spieler:innen setzen abwechslungsweise ein leeres Feld auf X bzw. O. Das Spiel ist beendet, wenn ein Spieler drei Felder in horizontaler, vertikaler oder diagonaler Reihe besetzen kann, oder wenn keine freien Felder übrig sind (unentschieden).

Erstelle HTML & CSS, um ein TicTacToe-Spiel darzustellen:

• Erstelle einen neuen Ordner, in dem die ganze Web-App enthalten sein wird!
• Erstelle erst nur das HTML in tictactoe.html!
  • Eine gute Möglichkeit wäre ein Element mit 9 <button> Elementen, die mit einem Grid-Layout auf 3×3 Felder formatiert werden können.
  • Eine andere Möglichkeit wäre, die Matrix zu verschachteln mit einem Container, der drei Zeilen-Elemente mit je drei Feldern enthält.
• Formatiere anschliessend mit CSS!
  • Muss:
    • Layout des Spielfelds auf 3×3 Felder.
    • Horizontale Zentrierung des Spielfelds (selfhtml)
    • Ansprechende Formatierung (Hintergrundfarbe, Schriftgrösse, Abstände, abgerundete Ecken…)
  • Nice-to have:
    • Responsive (Spielfeld passt sich der Grösse des Browserfensters an)
    • Mobile funktioniert gut (selfhtml)
• Halt, nicht einfach im Internet abschreiben!

Eine gute Möglichkeit, um die grossen Blöcke einer Seite zu organisieren, ist das Grid-Layout. Wie der Name schon sagt, wird ein Container-Element mit display: grid in einem Raster aufgeteilt, und dessen Kind-Knoten füllen das Raster aus:

Der Container für das TicTacToe-Spiel könnte zum Beispiel folgendes CSS haben:

ttt-grid {
    display: grid;                          /* Grid-Layout verwenden */
    grid-template-columns: repeat(3, 1fr);  /* Je 3 Spalten & Zeilen. */
    grid-template-rows: repeat(3, 1fr);     /* Jede 1fr = fractional unit, also ein Drittel gross. */
    gap: 1em:                               /* Abstand im Innern des Grid. */
    aspect-ratio: 1 / 1;                    /* Das Element soll quadratisch sein. */   
}

Ohne weitere CSS-Angaben werden die neun Kinder-Knoten (z.B. button Elemente) der Reihe nach in die Felder des Grids eingefügt. Zusammen mit border etc. ergibt sich ein gut aussehendes 3×3 Spielfeld.

Mehr Informationen zum Grid-Layout auf Selfhtml.

Das Ziel dieses Auftrags ist, dass zu zweit im Browser TicTacToe gespielt werden kann. Dazu nutzen wir JavaScript.

Jeder button benötigt einen Click-Handler, der ausgeführt wird, wenn die spielende Person darauf klickt.

Der Click-Handler:

• überprüft, ob der Spielzug legal ist (Feld frei, Spiel noch nicht beendet?)
• setzt das Feld auf X oder O
  • einerseits muss der Inhalt des Buttons gesetzt werden, damit der Wert im HTML angezeigt wird.
  • andererseits setzen wir ein Attribut data-state, das dazu dient, die Spiellogik zu betreiben.
• … überprüft ob das Spiel zu Ende ist
  • entweder, weil ein Spieler gewonnen hat,
  • oder weil keine freien Felder übrig sind
• … schaltet die Farbe des Spielers um.

Um die Darstellung des Spiels zu ändern, setzen wir den Text des Buttons. Um die Spiellogik zu betreiben, speichern wir den Zustand zudem in einem Attribut data-state:

tictactoe.js

    let color = 'X'; // or 'O'
    button.innerText = color;
    button.setAttribute('data-state', color);

In CSS können wir mit einem geeigneten Selektor die Zellen formatieren, die einen bestimmten Attributwert haben:

tictactoe.css

button[data-state="X"] {  
    background-color: red;
}
button[data-state="O"] {  
    background-color: blue;
}

Für Benachrichtigungen (z.B. über das Ende des Spiels) kann man die Funktion alert(message) nützen, die ein Browser-Popup anzeigt. Schöner ist es, einen Bereich im HTML zu definieren, der Meldungen anzeigt.

Hinweise