DynHTML: Memory Setup - JirkaDellOro/EIA2 GitHub Wiki

Aufgabe

Entwerfen Sie ein TypeScript-Programm, welches den Aufbau eines einfachen Memory-Spiels erzeugt.

Beim Programmstart gibt der Nutzer die gewünschte Anzahl der Kartenpaare (von 5 bis ?) und die Anzahl der Spieler (von 1 bis 4) ein. In einem dafür vorgesehenen Bereich auf der zugehörigen HTML-Seite wird dann die bezüglich der Kartenpaaranzahl doppelte Menge kleiner Quadrate dynamisch erzeugt. Sie stellen die Karten des Memoryspiels dar. Die meisten davon zeigen den Kartenrücken, im einfachsten Fall schlicht eine Farbe. Manche zufällig gewählten liegen offen und zeigen einen Buchstaben oder ein kurzes Wort, wieder andere sind gar nicht sichtbar und stellen somit eine Lücke im Spiel dar die zeigt, wo bereits Karten genommen wurden.

In einem anderen Bereich erscheint für jeden Spieler eine Identifikation (z.B. "Spieler 1") und dazu eine Punktezahl, welche sich im späteren Verlauf des Spieles ändern kann.

Die Inhalte der Karten können einfach Zahlen, Buchstaben oder Begriffe sein, die im Programm in einem Array hinterlegt sind. Damit werden die Paare gebildet, jedes Paar darf aber nur einmal im Spiel auftauchen. Die Karten werden wie beim richtigen Memory zufällig verteilt.

Die aufzurufende HTML-Datei enthält nur einen Header mit dem Verweis auf ihr Skript, sowie die beiden Bereiche für die Karten und die Spielerinformation. Die Stil-Informationen zur Anzeige des aufgebauten DOM sind vollständig in der CSS-Datei hinterlegt, also auch für die Erscheinungen der Karten in den Zuständen verdeckt, offen und genommen (hidden, open, taken). Zur entsprechenden Anzeige muss also nur ein Attribut des Kartenelements geändert werden.

Die aufgebaute Seite soll sowohl auf Smartphones, wie auf Tablets und Desktop-Geräten vernünftig dargestellt werden.

Konzeption

Entwerfen Sie zunächst eine Skizze, welche die Darstellung der Seite im vollständig aufgebauten Zustand darstellt. Weisen Sie dort bereits auf die zu verwendenden HTML-Elemente hin. Stellen Sie dann für die Elemente Stilvorgaben zusammen. Erstellen Sie schließlich ein oder mehrer Aktivitätsdiagramm für das TypeScript-Programm.

Programmierung

Setzen Sie Ihr Konzept syntaktisch korrekt und mit Hilfe des vorgegebenen Coding-Styleguides um.

Recherche

Es könnte sehr hilfreich sein, wenn Sie folgende Methoden und Attribute einiger Javascript-Objekte bzw. Klassen näher untersuchen:

• Math.random()
• Array.splice(...)
• Document.querySelector(...)
• Element.setAttribute(...)
• Element.className