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!