Tic Tac Tile

So funktioniert das Script

Das Script hat zwei Hauptfunktionen: game() führt einen Zug aus und prüft anschließend, ob damit jemand gewonnen hat, und newgame() räumt das Brett für die nächste Runde ab. Der komplette Spielstand steckt dabei in den Formularfeldern selbst — das Brett ist gleichzeitig Anzeige und Speicher.

const formular = document.getElementById("tt-form");
const felder = formular.elements;   // 0-5 sind die Anzeigen, 6-14 die neun Spielfelder

Ein Formular führt unter elements alle seine Bedienelemente in der Reihenfolge auf, in der sie im HTML stehen. Die sechs Anzeigefelder der Tabelle belegen damit die Plätze 0 bis 5, die neun Knöpfe des Spielbretts die Plätze 6 bis 14. Genau mit diesen Nummern rechnet das Script — jeder Brettknopf trägt sie im HTML als data-feld bei sich.

const linien = [
  [6, 7, 8], [9, 10, 11], [12, 13, 14],
  [6, 10, 14], [8, 10, 12],
  [6, 9, 12], [7, 10, 13], [8, 11, 14]
];

Es gibt genau acht Möglichkeiten, drei Felder in eine Reihe zu bringen: drei waagerechte, drei senkrechte und zwei diagonale. Statt diese acht Fälle als eine riesige Bedingung hinzuschreiben — so machte es das Original —, stehen sie hier als Liste von Feldnummern. gewinnt() geht diese Liste durch und meldet true, sobald in einer der Reihen dreimal dasselbe Zeichen steht.

if (sign === "X") {
  sign = "O";
  felder[i].value = sign;
} else {
  sign = "X";
  felder[i].value = sign;
}

So wechseln sich die Spieler ab: In sign steht das zuletzt gesetzte Zeichen, und vor jedem Zug wird es umgedreht. Weil sign mit "O" startet, ist der erste Zug ein X. Das Zeichen wird als value auf den Knopf geschrieben — bei einem Knopf ist das zugleich seine Aufschrift, deshalb braucht es keinen zweiten Speicher für den Spielstand.

if (felder[i].value === "") {
  zaehlen++;
  ...
}

Der ganze Zug steckt in dieser einen Bedingung: Nur wenn die Aufschrift des angeklickten Knopfes leer ist, ist das Feld noch frei. Ist es bereits mit X oder O beschriftet, passiert schlicht nichts. zaehlen zählt die gesetzten Zeichen mit — bei neun ist das Brett voll und die Partie endet unentschieden.

for (i = 14; !(i === 5); i--) {
  felder[i].value = "";
  sign = "O";
  zaehlen = 0;
}

Das Aufräumen läuft rückwärts von Feld 14 bis Feld 6 und leert jede Aufschrift. Die Schleife endet, sobald die Zählvariable bei 5 angekommen ist, also unterhalb des ersten Spielfelds. Nebenbei werden das Startzeichen und der Zugzähler zurückgesetzt. Vorher tauscht newgame() noch die Zeichen der beiden Spieler und legt fest, wer die neue Runde beginnt.

Zum Anpassen: Die Meldungen in confirm() lassen sich frei umschreiben, ebenso der Smiley ^_^, mit dem angezeigt wird, wer am Zug ist. Eine Eigenheit des Originals haben wir bewusst stehen lassen: Die Prüfung auf einen Sieg von O steht außerhalb der Bedingung für ein freies Feld und läuft deshalb bei jedem Klick — auch bei einem Klick auf ein schon besetztes Feld.