2. Spielverbesserungen 🛠️

Wir arbeiten in weiter wie in Kapitel 1 (rechts). Unser Spiel hat noch zwei Macken, die wir jetzt beheben:

  1. Man kann in ein bereits belegtes Feld klicken und es überschreiben.
  2. Der Zug wird nie automatisch an den nächsten Spieler übergeben.

Spielzüge validieren — INVALID_MOVE

Ein Move kann dem Framework mitteilen, dass er ungültig ist, indem er die spezielle Konstante INVALID_MOVE zurückgibt. boardgame.io verwirft den Zug dann komplett — G bleibt unverändert.

INVALID_MOVE kommt aus boardgame.io und wird oben in der Datei importiert (die import-Zeile ist beim Wechsel in dieses Kapitel automatisch dazugekommen):

import { INVALID_MOVE } from 'boardgame.io/core';

Für clickCell heißt das: Bevor wir die Markierung setzen, prüfen wir, ob das Feld schon belegt ist (also nicht null). Wenn ja, geben wir INVALID_MOVE zurück und setzen nichts.

👉 Deine Aufgabe: Ergänze clickCell — gib vor dem Setzen der Markierung INVALID_MOVE zurück, wenn move.G.cells[cellIndex] nicht null ist.

Züge verwalten — das turn-Objekt

Bisher mussten wir im Debug Panel von Hand auf endTurn klicken. In Tic-Tac-Toe soll der Zug aber immer enden, sobald ein Move gemacht wurde. Dafür gibt es das turn-Objekt:

  • minMoves: 1 — ein Spieler muss einen Move machen (kann nicht einfach endTurn aufrufen).
  • maxMoves: 1 — der Zug endet automatisch nach einem Move.
turn: {
  minMoves: 1,
  maxMoves: 1,
},

👉 Deine Aufgabe: In deiner Datei ist ein leeres turn-Objekt dazugekommen. Trag dort minMoves: 1 und maxMoves: 1 ein.

💡 Es gibt in boardgame.io noch viele weitere Möglichkeiten, Züge zu steuern — etwa die Zugreihenfolge, Phasen und Ereignisse. Für Tic-Tac-Toe reichen uns minMoves und maxMoves.

Übung 🎯

Die Auswertung (in der Spiel-Sektion) prüft beide Verbesserungen:

  1. Ein Klick auf ein belegtes Feld wird abgelehnt (INVALID_MOVE).
  2. Nach einem Zug ist automatisch der nächste Spieler dran (turn).

Geschafft! 🚀

Neu in diesem Kapitel:

  • INVALID_MOVE — ein Move erklärt sich selbst für ungültig; G bleibt unverändert.
  • turn: { minMoves, maxMoves } — steuert die Züge und beendet sie automatisch.

Trotzdem endet unser Spiel noch nie — selbst bei drei in einer Reihe läuft es weiter. Das ist das nächste (und kniffligste) Kapitel.

3. Siegbedingung →

← Zurück zur Übersicht