Color Clicker

In dieser Aufgabe planen und implementieren Sie ein einfaches Javascript-Spiel. Dabei handelt es sich um eine Neuimplementierung des Color Picker von Peter Lauris. In diesem Spiel werden dem Spieler mehrere nahezu gleichfarbige Quadrate präsentiert. Der Farbton einer der Flächen unterscheidet sich leicht von den anderen. Der Spieler muss dieses abweichende Quadrat identifizieren. Gelingt ihm dies, wird die nächste Runde gestartet, in der die Menge der Quadrate erhöht und die Farbabweichung verringert wird. Wählt der Spieler ein falsches Quadrat aus, wird das Spiel neugestartet. Farben werden als Pastellwerte im RGB-Raum abgebildet. Farbabweichungen werden durch die Veränderung aller drei Kanäle um den gleichen Wert berechnet. Die einführenden Folien zum Workshop finden Sie hier.

Aufgabenbeschreibung

Versuchen Sie in Teams von maximal drei Studierenden eine funktionierende Lösung für die Spielidee zu implementieren. Planen Sie zuerst Ihr Vorgehen und skizzieren Sie Architektur und Design der Anwendung. Planen Sie den Spielablauf und überlegen Sie, welche Phasen und Ereignisse diesen ausmachen bzw. beeinflussen. Halten Sie die Übereinkünfte bezüglich des Vorgehens in Form eines Planungsdokuments fest. Verwenden Sie auch für diese Aufgabe die vertical slice-Methode und implementieren Sie nach Skizzieren des Vorgehens zuerst die wesentlichen Spielfeatures, bevor Sie diese in der Breite durch Feedback-Funktionen und andere Erweiterungen ergänzen.

Mob programming

Nutzen Sie zur Codierung der Anwendung die mob programming-Methode, eine Abwandlung des pair programming. Beim mob programming arbeitet eine größere Gruppe von Entwicklern und Entwicklerinnen gemeinsam und gleichzeitig am selben Codeabschnitt. Wie beim pair programming bedient dabei nur eine Person die verwendeten Arbeitsgeräte (d.h. Maus und Tastatur des Entwicklungsrechners). Diese Person formuliert auf Basis der Kommentare und Diskussionen der übrigen Beteiligten den eigentlichen Code. Die Rolle wird abwechselnd von allen Teammitgliedern übernommen. Die Intention hinter dieser Praxis ist es, einen wesentlichen Teil der Codebase im wörtlichen Sinne gemeinsam zu entwickeln.

Vorbereitung

Das notwendige Repository können Sie über diesen Link erstellen. Verwenden Sie konsequent git um Ihren Fortschritt zu dokumentieren. Versuchen Sie dabei, Änderungen zuerst lokal zu implementieren und nach erfolgreicher Integration in einen dev-Branch in das Remote-Repository zu überführen. Beim Erreichen größerer Meilensteine können Sie die diesen Branch mit dem master-Branch mergen.

Beginnen Sie erst mit der eigentlichen Codierung der Aufgabe, nachdem Sie alle wesentlichen Komponente der Software festgelegt haben. Für jedes größere Modul sollte eine Datei im Repository angelegt sein, in der Sie Aufgaben, Schnittstellen und Kollaborationspartner festhalten. Legen Sie bereits im Vorfeld wichtige Events und deren Eigenschaften fest.

Anforderungen

Der Spielablauf der fertigen Anwendung setzt diese Anforderungen um:

Video einer einfachen Implementierung des Spiels

Vorgaben im Starterpaket

Das Starterpaket gibt nur die HTML-Struktur bzw. die Benutzeroberfläche vor. Die korrekte Anordnung der Quadrate und etwaige Feedback-Elemente müssen Sie selbstständig ergänzen.

Starterpaket und Lösung

Ein vorbereitetes Starterpaket zur selbständigen Implementierung der Aufgabe sowie einen Lösungsvorschlag finden Sie auf Github. Die Lösung findet sich im master-Branch des verlinkten Repositories. Das Starterpaket im starter-Branch.