Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung
Nächste Überarbeitung		 Vorherige Überarbeitung
talit:web:webapps:client [2025-02-02 11:01] – [Zustand] hoftalit:web:webapps:client [2025-04-13 10:47] (aktuell) – [Client-Side Vier Gewinnt] hof
Zeile 1: Zeile 1:
 ## Client-Side Vier Gewinnt ## 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).
- +
-{{:ef_informatik:connect4-css.jpg?nolink&300}}+
  
 +{{:talit:web:webapps:client:pasted:20250204-140319.png?nolink&300|Vier Gewinnt}}
  
 ### Auftrag A: Struktur & Formatierung ### Auftrag A: Struktur & Formatierung
Zeile 12: Zeile 11:
   * Erstelle einen neuen Ordner, in dem die ganze Web-App enthalten sein wird!   * Erstelle einen neuen Ordner, in dem die ganze Web-App enthalten sein wird!
   * Erstelle erst nur das HTML in `connect4.html`!   * Erstelle erst nur das HTML in `connect4.html`!
-    * Eine gute Möglichkeit wäre ein Element mit 42 `<button>` Elementen, die mit einem Grid-Layout auf 6x7 Felder formatiert werden können.+    * Eine gute Möglichkeit wäre ein Container-Element mit 42 `<button>` Kind-Elementen, die mit einem Grid-Layout auf 6x7 Felder formatiert werden können.
     * Eine andere Möglichkeit wäre, die Matrix zu verschachteln mit einem Container, der sechs Zeilen-Elemente mit je sieben Feldern enthält.     * Eine andere Möglichkeit wäre, die Matrix zu verschachteln mit einem Container, der sechs Zeilen-Elemente mit je sieben Feldern enthält.
   * Formatiere anschliessend mit CSS!   * Formatiere anschliessend mit CSS!
Zeile 20: Zeile 19:
       * Ansprechende Formatierung (Hintergrundfarbe, Schriftgrösse, Abstände, abgerundete Ecken...)       * Ansprechende Formatierung (Hintergrundfarbe, Schriftgrösse, Abstände, abgerundete Ecken...)
     * Nice-to have:     * Nice-to have:
 +      * Runde Löcher: z.B. mit `border-radius: 50%;`
 +      * 3D-Effekt mit `box-shadow`.
       * Responsive (Spielfeld passt sich der Grösse des Browserfensters an)       * Responsive (Spielfeld passt sich der Grösse des Browserfensters an)
       * Mobile funktioniert gut ([[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Webseiten_responsiv_umbauen|selfhtml]])       * Mobile funktioniert gut ([[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Webseiten_responsiv_umbauen|selfhtml]])
Zeile 28: Zeile 29:
  
 Das Ziel dieses Auftrags ist, dass zu zweit im Browser Vier gewinnt gespielt werden kann. Dazu nutzen wir [[gf_informatik:web:js]]. Das Ziel dieses Auftrags ist, dass zu zweit im Browser Vier gewinnt gespielt werden kann. Dazu nutzen wir [[gf_informatik:web:js]].
 +
 +#### Javascript einbinden
 +
 +Die Javascript-Datei (z.B. `connect4.js`) muss im HTML-Code eingebunden werden. Damit die Datei erst ausgeführt wird, wenn das HTML aufgebaut ist, markieren wir sie mit `async`:
 +
 +<code html>
 +    <script src="connect4.js" async></script>
 +</code>
 +
 #### Zustand #### Zustand
 Der Zustand (en. _state_) des Spiels soll in einem Javascript-Objekt (wie ein Python-Dictionary) gespeichert werden: Der Zustand (en. _state_) des Spiels soll in einem Javascript-Objekt (wie ein Python-Dictionary) gespeichert werden:
Zeile 34: Zeile 44:
 game = { game = {
   "state": "playing",  // or "waiting" or "won" or "tie"   "state": "playing",  // or "waiting" or "won" or "tie"
-  "board": [+  "board": [           // game board, 0 for empty cells, 1 or 2 for filled cells.
     0, 0, 0, 0, 0, 0, 0,     0, 0, 0, 0, 0, 0, 0,
     0, 0, 0, 0, 0, 0, 0,     0, 0, 0, 0, 0, 0, 0,
Zeile 46: Zeile 56:
 </code> </code>
  
-Alle Änderungen des Spiels sollen zuerst auf diesem Spiel-Modell durchgeführt werden. Anschliessend wird das Spiel vom HTML dargestellt (en. _rendering_) +Alle Änderungen des Spiels sollen zuerst auf diesem Spiel-Modell durchgeführt werden. Anschliessend wird das Spiel vom HTML dargestellt (en. _rendering_).
-.+
 #### Verhalten #### Verhalten
  
-Jeder `button` benötigt einen Click-Handler, der ausgeführt wird, wenn die spielende Person darauf klickt.+Jeder `button` benötigt einen Click-Handler, der ausgeführt wird, wenn die spielende Person darauf klickt. Mit Code ähnlich dem Folgenden kann jedem Button ein Handler zugewiesen werden: 
 + 
 +<code javascript> 
 +  let index = 0 
 +  for (let button of document.getElementsByTagName("button")) { 
 +    const column = index % 7; 
 +    button.addEventListener("click", () => dropPiece(game, column)); // TODO: write a dropPiece function 
 +    index++; 
 +  } 
 +</code>
  
 Der Click-Handler: Der Click-Handler:
 +    * findet heraus, welches das unterste leere Feld in der Spalte ist.
     * überprüft, ob der Spielzug legal ist (Spalte frei, Spiel noch nicht beendet?)     * überprüft, ob der Spielzug legal ist (Spalte frei, Spiel noch nicht beendet?)
-    * findet heraus, welches das unterste leere Feld ist. 
     * setzt das Feld auf die Farbe des Spielers.     * setzt das Feld auf die Farbe des Spielers.
-      * einerseits muss der Inhalt des Buttons gesetzt werden, damit der Wert im HTML angezeigt wird. 
-      * andererseits setzen wir ein Attribut `data-state`, das dazu dient, die Spiellogik zu betreiben. 
     * ... überprüft ob das Spiel zu Ende ist     * ... überprüft ob das Spiel zu Ende ist
       * entweder, weil ein Spieler gewonnen hat,       * entweder, weil ein Spieler gewonnen hat,
Zeile 63: Zeile 79:
     * ... schaltet die Farbe des Spielers um.     * ... schaltet die Farbe des Spielers um.
  
-Um die Darstellung des Spiels zu ändern, setzen wir den Text des Buttons. Um die Spiellogik zu betreiben, speichern wir den Zustand zudem in einem Attribut `data-state`:+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 
 + 
 +Wenn der Spielzustand geändert worden ist, wird das HTML (genauer: das HTML _Document Object Model_ (DOM)) entsprechend angepasst: 
 + 
 +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 tictactoe.js>
-    let color = game.next;                     // 1, or 2 +    let color = game.board[cell];              // 1, or 2 
-    button.innerText = color;                  // remove once CSS formatting works+    button.textContent = color;                // remove once CSS formatting works
     button.setAttribute('data-state', color);     button.setAttribute('data-state', color);
 </code> </code>
Zeile 84: Zeile 133:
  
 <nodisp 2> <nodisp 2>
-++++Hinweise|+++++Hinweise (LP)|
     * [[ef_informatik:web_app|Vier Gewinnt im KSR-Ergänzungsfach]]     * [[ef_informatik:web_app|Vier Gewinnt im KSR-Ergänzungsfach]]
     * [[https://github.com/tkilla77/ksr_tictactoe/tree/client_only/static|TicTacToe auf Github]]     * [[https://github.com/tkilla77/ksr_tictactoe/tree/client_only/static|TicTacToe auf Github]]
 +    * [[https://github.com/tkilla77/ksr_talit_connect4/tree/html_css|Connect4 auf Github]]
 ++++ ++++
 </nodisp> </nodisp>
  • talit/web/webapps/client.1738494072.txt.gz
  • Zuletzt geändert: 2025-02-02 11:01
  • von hof