Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- ksk_ef:web:apps:client [2024-08-11 07:44] – hof
+++ ksk_ef:web:apps:client [2024-08-11 08:14] (aktuell) – hof
@@ Zeile 3: / Zeile 3: @@
 [[wpde>Tic-Tac-Toe]] ist ein Spiel mit 3x3 Feldern. Die Spieler:innen setzen abwechslungsweise ein leeres Feld auf `X` bzw. `O`. Das Spiel ist beendet, wenn ein Spieler drei Felder in horizontaler, vertikaler oder diagonaler Reihe besetzen kann, oder wenn keine freien Felder übrig sind (unentschieden).
-{{:ksk_ef:web:apps:client:pasted:20240811-074304.png}}
+{{:ksk_ef:web:apps:client:pasted:20240811-074304.png?nolink&300}}
-### Auftrag Struktur & Formatierung
+### Auftrag A: Struktur & Formatierung
 Erstelle HTML & CSS, um ein TicTacToe-Spiel darzustellen:
@@ Zeile 14: / Zeile 14: @@
     * Eine andere Möglichkeit wäre, die Matrix zu verschachteln mit einem Container, der drei Zeilen-Elemente mit je drei Feldern enthält.
   * Formatiere anschliessend mit CSS!
-    * Layout des Spielfelds auf 3x3 Felder.
+    * Muss:
-    * Ansprechende Formatierung (Hintergrundfarbe, Schriftgrösse, Abstände, abgerundete Ecken...)
+      * Layout des Spielfelds auf 3x3 Felder.
+      * Horizontale Zentrierung des Spielfelds ([[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/Inhalte_zentrieren#horizontale_Zentrierung|selfhtml]])
+      * Ansprechende Formatierung (Hintergrundfarbe, Schriftgrösse, Abstände, abgerundete Ecken...)
+    * Nice-to have:
+      * 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]])
   * Halt, nicht einfach im Internet abschreiben!
+### Auftrag B: Spiel-Logik
+Das Ziel dieses Auftrags ist, dass zu zweit im Browser TicTacToe gespielt werden kann. Dazu nutzen wir [[..:js]].
+Jeder `button` benötigt einen Click-Handler, der ausgeführt wird, wenn die spielende Person darauf klickt.
+Der Click-Handler:
+    * überprüft, ob der Spielzug legal ist (Feld frei, Spiel noch nicht beendet?)
+    * setzt das Feld auf `X` oder `O`
+      * 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
+      * entweder, weil ein Spieler gewonnen hat,
+      * oder weil keine freien Felder übrig sind
+    * ... 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`:
+<code javascript tictactoe.js>
+    let color = 'X'; // or 'O'
+    button.innerText = color;
+    button.setAttribute('data-state', color);
+</code>
+In [[..: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>
+button[data-state="X"] {
+    background-color: red;
+}
+button[data-state="O"] {
+    background-color: blue;
+}
+</code>
+Für Benachrichtigungen (z.B. über das Ende des Spiels) kann man die Funktion `alert(message)` nützen, die ein Browser-Popup anzeigt. Schöner ist es, einen Bereich im HTML zu definieren, der Meldungen anzeigt.
 <nodisp 2>
 ++++Hinweise|
-    * [[ef_informatik:web_app|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]]
 ++++
 </nodisp>