Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- ksk_ef:web:apps:client [2024-08-11 07:50] – hof
+++ ksk_ef:web:apps:client [2024-08-11 08:14] (aktuell) – hof
@@ Zeile 5: / Zeile 5: @@
 {{: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 22: / Zeile 22: @@
       * 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>