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 [2026-08-10 15:12] (aktuell) – [Darstellung in HTML] 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}}
 ### Auftrag A: Struktur & Formatierung
-Erstelle HTML & CSS, um ein Vier-Gewinnt-Spiel darzustellen:
+Erstelle [[gf_informatik:web:start|HTML & CSS]], um ein Vier-Gewinnt-Spiel darzustellen:
   * Erstelle einen neuen Ordner, in dem die ganze Web-App enthalten sein wird!
@@ Zeile 79: / Zeile 78: @@
     * ... 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>
 #### Darstellung in HTML
@@ Zeile 86: / Zeile 110: @@
 Um die Darstellung des Spiels zu ändern, setzen wir den Text des Buttons mit der [[https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent|textContent]] Eigenschaft. Für die Formatierung mit CSS speichern wir den Zustand zudem in einem Attribut `data-state`. Sobald die Formatierung funktioniert, können wir den Text auch wieder entfernen.
-<code javascript tictactoe.js>
+<code javascript connect4.js>
     let color = game.board[cell];              // 1, or 2
     button.textContent = color;                // remove once CSS formatting works
@@ Zeile 94: / Zeile 118: @@
 In [[gf_informatik:web:css|CSS]] können wir mit einem [[https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors|geeigneten Selektor]] die Zellen formatieren, die einen bestimmten Attributwert haben:
-<code css tictactoe.css>
+<code css connect4.css>
 button[data-state="1"] {
     background-color: red;