L02_Sequenzmemory

Aufgabe

Konzipiere eine kleine Variante des Spiels "Memory" als Web-App für Desktoprechner, Tablets und Smartphones, bei dem sich ein Spieleri die zufällige Position von Zeichen merken und diese in einer bestimmten Reihenfolge aufdecken muss, nachdem sie verdeckt wurden.

Zu Beginn wird per prompt eine Sequenz erfragt, die das Spieleri selbst frei wählt und eingibt. Eine solche Sequenz könnte beispielsweise die Zeichenkette "EIA2-Inverted" sein. Dann startet das Spiel und es wird für kurze Zeit die Zeichenfolge angezeigt, die Buchstaben sind aber zufällig durchmischt. Im Beispiel könnte diese durchmischte Folge derart aussehen: "vAntIde-2IEre". Eine Interaktion ist in dieser Zeit nicht möglich. Nach Ablauf der Zeit werden die Zeichen, an gleicher Position verharrend, verdeckt. An ihrer Stelle sind nun gleichfarbige und gleichförmige Flächen zu sehen, die per Klick oder Touch aufgedeckt werden können. Aufgabe des Spieleris ist es nun, die Zeichen in der korrekten Reihenfolge der Ausgangssequenz aufzudecken. Im Beispiel muss es also zuerst die Fläche an der Position des "E" aufdecken, dann eines der großen "I"s, dann das "A" usw. Verlässt das Spieleri die korrekte Sequenz indem es ein falsches Zeichen aufdeckt, erhält es für zwei Sekunden ein sinnvolles Feedback, danach werden alle Flächen wieder verdeckt. Innerhalb einer vorgegebenen Zeit muss die Sequenz vollständig aufgedeckt werden, sonst gilt das Spiel als verloren. Im Erfolgsfall wird dagegen positives Feedback gegeben. Während des Spiels werden die Zeiten, rückwärts laufend, in Sekunden auf dem Bildschirm angezeigt.

Konzeption

Halte dich strikt an die in der Lektion geübte Reihenfolge und Syntax der Konzeption, also

1. Anwendungsfalldiagramm, welches einen Überblick über alle Interaktionen mit dem User und die wesentlichsten Vorgänge innerhalb des Systems darstellt,
2. UI-Skizze mit Angaben zu HTML-Tags, CSS-Selektoren, Signalen und Listeners,
3. Aktivitätsdiagramme, mit Datenstrukturen, den wesentlichsten Algorithmen, Listener-Registrierungen, Signalverarbeitungen und Subaktivitäten.

Achte sehr darauf, dass Du nicht lediglich die Aufgabenstellung in anderer Form wiederholst, sondern dass Du eine klare und mit der bislang in dieser Modulreihe geübten Technik durchführbare Lösung konzipierst. Eine andere mit der Technik vertraute Person muss anhand deiner Konzeption das Programm kodieren können, ohne über viel mehr als die reine Umsetzung in Code nachzudenken.

Implementation/Prüfung

Suche dir eine Person im Kurs, mit der Du Konzepte tauschst. Jedes von euch versucht nun das Konzept der anderen Person in Code zu übersetzen. Bleibt miteinander in regem Kontakt um euch Rückmeldung zu der Qualität des Konzepts geben zu können. Schlüpft dabei in die Rolle eines Programmiereris, das die Aufgabenstellung nicht kennt und daran auch nicht interessiert ist, sondern eine gute Konzeption erwartet, die es einfach "heruntercoden" kann. Das bedeutet, dass ihr Lücken im Konzept nicht durch eigene Lösungsfindung stopft, sondern das Konzepteri um entsprechende Ergänzung und Korrektur bittet. Diese muss dann tatsächlich im Konzept umgesetzt werden, nicht nur mündlich überliefert. Am Ende sollen alle Datenstrukturen und Algorithmen auch im Konzept ausreichend weit herunter gebrochen sein.

Abgabe

Gebt beide Konzepte ab, das ursprüngliche und das korrigierte, bitte in einem PDF zusammengefasst. Vermerkt in dem Dokument auch, mit wem ihr getauscht hattet und welche Probleme bei der Prüfung vordringlich deutlich wurden. Wenn ihr möchtet, könnt ihr auch gerne eure Implementationen abgeben, im Vordergrund steht aber ganz klar die gute Konzeption. Sie wird in der Folge noch erweitert und Du kannst dann dein eigenes Konzept selbst unter Beweis stellen und implementieren.

Recherche

Es könnte sehr hilfreich sein, wenn Du folgende Methoden und Attribute einiger Javascript-Objekte näher untersuchst:

• prompt
• TouchEvent und PointerEvent
• "Accept Time Event" im Booklet unter 1.2.5
• Date-Objekt von Javascript und/oder Performance
• setTimeout
• setInterval
• Math.random()
• Array.splice(...)
• Element.className
• String.split oder Klammersyntax bei String