| Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung Nächste Überarbeitung | Vorherige Überarbeitung |
| talit:web:webapps:client [2025-02-09 09:49] – [Verhalten] hof | talit:web:webapps:client [2026-08-10 15:12] (aktuell) – [Darstellung in HTML] hof |
|---|
| ## 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). |
| |
| {{:talit:web:webapps:client:pasted:20250204-140319.png?nolink&300|Vier Gewinnt}} | {{:talit:web:webapps:client:pasted:20250204-140319.png?nolink&300|Vier Gewinnt}} |
| |
| ### Auftrag A: Struktur & Formatierung | ### 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! | * Erstelle einen neuen Ordner, in dem die ganze Web-App enthalten sein wird! |
| } | } |
| </code> | </code> |
| |
| |
| #### Darstellung in HTML | #### Darstellung in HTML |
| |
| 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. | 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 | let color = game.board[cell]; // 1, or 2 |
| button.textContent = color; // remove once CSS formatting works | button.textContent = color; // remove once CSS formatting works |
| 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: | 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"] { | button[data-state="1"] { |
| background-color: red; | background-color: red; |
hof