4. Bots 🤖

Letztes Kapitel, dieselbe Datei (rechts): Wir geben dem Spiel einen Computer-Gegner. Wir müssen dem Bot nur sagen, welche Spielzüge überhaupt möglich sind — den Rest erledigt das Framework: Es sucht Züge, die zu einem Sieg führen.

Dafür ist beim Wechsel in dieses Kapitel der ai-Abschnitt mit einer enumerate-Funktion in deiner Datei dazugekommen.

ai.enumerate — welche Züge sind möglich?

enumerate bekommt den Spielzustand G und soll ein Array aller möglichen Spielzüge zurückgeben. Jeder Zug ist ein Objekt mit dem Namen des Moves (move) und seinen Argumenten (args):

{ move: 'clickCell', args: [0] }   // bedeutet: clickCell(0)

📌 So spielt der Bot — boardgame.io durchsucht mit einem Verfahren namens MCTS den Spielbaum und wählt gute Züge. Standardmäßig macht er 1000 Iterationen pro Zug; das lässt sich anpassen, um die Spielstärke zu ändern. Aber er kann nur Züge wählen, die enumerate zurückgibt! Gibt deine Funktion nur ein Feld zurück, kann der Bot auch nur dieses eine Feld spielen.

Im Moment macht enumerate genau das: Es gibt immer nur die Zelle oben links (0) zurück. Drücke ▶ Ausführen und klick im Bot-Bereich auf play — der Bot spielt nur Feld 0 und kommt dann nicht weiter. Das beheben wir jetzt.

👉 Deine Aufgabe: Fülle das TODO Kapitel 4 in enumerate aus.

play und simulate

Sobald enumerate funktioniert, erscheinen über dem Spielfeld (in der Spiel-Sektion) zwei Bot-Knöpfe — wie der KI-Bereich im echten Debug Panel:

  • 🤖 play — der Bot berechnet einen Zug und führt ihn aus.
  • ⏩ simulate — der Bot spielt das ganze Spiel allein zu Ende.

Mit play kannst du selbst Züge machen und den Bot antworten lassen. Versuch mal, zwei in eine Reihe zu legen, und schau, ob der Bot blockt!

Übung 🎯

Die Auswertung (in der Spiel-Sektion) prüft, ob enumerate für jede leere Zelle genau einen clickCell-Zug zurückgibt.

Geschafft — und was jetzt? 🎓

Herzlichen Glückwunsch! Du hast mit boardgame.io ein vollständiges Tic-Tac-Toe gebaut, die du Kapitel für Kapitel selbst geschrieben hast. Damit kennst du die Kernkonzepte des Frameworks:

  • setup & G — der Spielzustand
  • moves — wie Spieler den Zustand verändern
  • INVALID_MOVE & turn — Regeln und Zugverwaltung
  • endIf — wann das Spiel endet
  • ai.enumerate — ein Computer-Gegner

🧐 Das Einzige, was wir dir hier abgenommen haben, ist das Zeichnen des Spielfelds. Im echten Projekt machst du das selbst — und genau das holst du im großen Finale nach, sobald du den Canvas-Kurs durch hast.

Spiel ruhig noch weiter herum und überleg dir, wie sich andere Spiele auf diese Konzepte übertragen lassen. 🚀

Als Nächstes geht’s in den Canvas-Kurs — dort lernst du zu zeichnen und auf Klicks zu reagieren. Danach führt das Finale Das Spielbrett zeichnen 🎮 beide Hälften zusammen: dann renderst du dieses Tic-Tac-Toe selbst.

← Zurück zur Übersicht