DynHTML: Uno

Aufgabenstellung

Bereiten Sie ein browserbasiertes Online-Unospiel vor. In dieser ersten Aufgabe sollen die Spielfläche mit Ablage- und Nachziehstapel, sowie die Handkarten eines Spielers dynamisch generiert und dargestellt werden.

Nach Aufruf der Webseite gibt der Spieler die Anzahl der Handkarten ein, die ein Spieler zu Spielbeginn erhalten soll. Nach Bestätigung wird das Bild aufgebaut und der Nachziehstapel so wie die Handkarten dargestellt. Die Handkarten werden dabei zufällig aus der Gesamtmenge der Unokarten (nach den offiziellen Spielregeln) ausgewählt. Die visuelle Gestaltung der Karten ist äußerst schlicht und besteht nur aus der Kartenfarbe im Hintergrund und einem Text, im einfachsten Fall der Ziffer mit dem Kartenwert.

Bezüglich der Umsetzung ist zu beachten, dass der HTML-Code im Wesentlichen nur einen Aufruf eines Scripts enthalten soll, welches dann die Seite aufbaut. Auch eine grundsätzliche Aufteilung von Spielbereichen für Handkarten, Ablage- und Nachziehstapel können in der HTML-Datei definiert sein.

Vorgehensweise

Skizzieren Sie zunächst das fertig aufgebaute Spielfenster. Notieren sie daran sogleich die Typen der erforderlichen HTML-Elemente und deren Attribute. Notieren Sie ebenfalls bereits Formateigenschaften, die später in zugehörigen Stylesheets definiert sein können.
Konzipieren Sie das Programm mit Hilfe vollständiger und aussagekräftiger Aktivitätsdiagramme.
- Überlegen Sie dabei, in welcher Form Sie die Information zu den existierenden Karten bereit stellen können, wie daraus zufällig Karten gezogen werden können und dabei keine Karte mehrfach gezogen wird.
- Beginnen Sie zunächst mit einem groben Ablauf der wenige, übergeordnete Aktivitäten enthält. Schlüsseln Sie dann die Aktivitäten in eigenen Diagrammen auf.
- Beachten Sie, dass ein Konzept sicher nicht im ersten Wurf gelingt, sondern es einige Iterationen brauchen wird, um zu einem tragfähigen Plan zu kommen. Jede Version kann dabei die Grundlage für die nächste, verbesserte Version darstellen.
- Konzept inklusive Skizze müssen zum Praktikum vorliegen. Lassen Sie ihr Konzept von den Betreuern prüfen und stellen Sie qualifizierte Fragen dazu.
Beginnen Sie dann mit der Implementation. Halten Sie HTML, JS und CSS weitestgehend getrennt in eigenen Dateien. Beachten Sie den Ast "Coding Style" der EIA2-Mindmap. Eine strikte Einhaltung der dort angeführten Regeln ist erforderlich.