Vier_gewinnt ist ein Spiel mit 6×7 Feldern. Die Spieler:innen werfen abwechslungsweise ein Stein ihrer Farbe in Spalten mit leeren Feldern. Das Spiel ist beendet, wenn ein Spieler vier Felder in horizontaler, vertikaler oder diagonaler Richtung besetzen kann, oder wenn keine freien Felder übrig sind (unentschieden).

Erstelle HTML & CSS, um ein Vier-Gewinnt-Spiel darzustellen:

• Erstelle einen neuen Ordner, in dem die ganze Web-App enthalten sein wird!
• Erstelle erst nur das HTML in connect4.html!
  • Eine gute Möglichkeit wäre ein Element mit 42 <button> Elementen, die mit einem Grid-Layout auf 6×7 Felder formatiert werden können.
  • Eine andere Möglichkeit wäre, die Matrix zu verschachteln mit einem Container, der sechs Zeilen-Elemente mit je sieben Feldern enthält.
• Formatiere anschliessend mit CSS!
  • Muss:
    • Layout des Spielfelds auf 6×7 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!

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

Der Zustand (en. state) des Spiels soll in einem Javascript-Objekt (wie ein Python-Dictionary) gespeichert werden:

game = {
  "state": "playing",  // or "waiting" or "won" or "tie"
  "board": [
    0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0,
  ],
  "next": 1,  // 1 or 2, the player whose turn it is, the winner if state is "won"
}

Alle Änderungen des Spiels sollen zuerst auf diesem Spiel-Modell durchgeführt werden. Anschliessend wird das Spiel vom HTML dargestellt (en. rendering) .

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 (Spalte frei, Spiel noch nicht beendet?)
• findet heraus, welches das unterste leere Feld ist.
• setzt das Feld auf die Farbe des Spielers.
  • 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 = game.next;                     // 1, or 2
    button.innerText = color;                  // remove once CSS formatting works
    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="1"] {  
    background-color: red;
}
button[data-state="2"] {  
    background-color: yellow;
}

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.