Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- talit:web:webapps:client [2025-02-05 06:36] – hof
+++ talit:web:webapps:client [2025-04-13 10:47] (aktuell) – [Client-Side Vier Gewinnt] hof
@@ Zeile 1: / Zeile 1: @@
 ## Client-Side Vier Gewinnt
-[[wpde>Vier_gewinnt]] ist ein Spiel mit 6x7 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).
+[[wpde>Vier_gewinnt|Vier gewinnt]] ist ein Spiel mit 6x7 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).
 {{:talit:web:webapps:client:pasted:20250204-140319.png?nolink&300|Vier Gewinnt}}
@@ Zeile 78: / Zeile 78: @@
       * oder weil keine freien Felder übrig sind
     * ... schaltet die Farbe des Spielers um.
+Um den Code etwas zu strukturieren, hilft es, die obigen Aufgaben als _Funktionsaufrufe_ hinzuschreiben, und diese erst anschliessend zu implementieren. Die `dropPiece` Funktion könnte also so aussehen:
+<code javascript>
+/** Drops a piece in the given column and updates the game state accordingly. */
+function dropPiece(grid, status, game, column) {
+  // Check if move is valid.
+  if (game.state != "playing") {
+    return;  // or throw new Error("can't play in this game")
+  }
+  // Compute the lowest empty row in the selected column.
+  let row = computeEmptyRow(game, column);
+  let cell = row * 7 + column;
+  // Update game state.
+  game.board[cell] = game.next;
+  // Check for winner / tie, will set game.state if game ended.
+  checkWinner(game, cell);
+  // Swap active player
+  if (game.state == "playing") {
+    togglePlayer(game);
+  }
+  // Update the HTML view.
+  updateHtml(grid, game);
+  // Update game status area to reflect active player / winner / tie
+  updateStatus(status, game);
+}
+</code>