| Nächste Überarbeitung | Vorherige Überarbeitung |
| ef_informatik:webapps:client [2024-09-18 14:56] – angelegt hof | ef_informatik:webapps:client [2024-09-20 06:16] (aktuell) – hof |
|---|
| ===== Client-Side TicTacToe ===== | ===== Client-Side TicTacToe ===== |
| |
| {{ :course:efif:apps:webappintro.pdf | Slides}} | |
| |
| [[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). | [[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). |
| |
| {{:course:efif:apps:pasted:20240813-204955.png?nolink}} | {{:ef_informatik:webapps:client:pasted:20240920-061215.png?nolink&400}} |
| |
| ==== Auftrag A: Struktur & Formatierung ==== | ==== Auftrag A: Struktur & Formatierung ==== |
| Eine gute Möglichkeit, um die grossen Blöcke einer Seite zu organisieren, ist das Grid-Layout. Wie der Name schon sagt, wird ein Container-Element mit ''display: grid'' in einem Raster aufgeteilt, und dessen Kind-Knoten füllen das Raster aus: | Eine gute Möglichkeit, um die grossen Blöcke einer Seite zu organisieren, ist das Grid-Layout. Wie der Name schon sagt, wird ein Container-Element mit ''display: grid'' in einem Raster aufgeteilt, und dessen Kind-Knoten füllen das Raster aus: |
| |
| {{:course:efif:apps:pasted:20240827-141913.png?nolink&600}} | {{:gf_informatik:web_sca:grid_layout.svg?nolink&600}} |
| |
| Der Container für das TicTacToe-Spiel könnte zum Beispiel folgendes CSS haben: | Der Container für das TicTacToe-Spiel könnte zum Beispiel folgendes CSS haben: |
hof