Overlays

START

Tutorial

Was ist Overlays?

Overlays ist ein browserbasiertes Puzzlespiel zum Trainieren der Interpretation von Farben und Strukturen in Bildern, das sich vor allem an Puzzle-Freunde und Casual-Gamer richtet. Hierbei werden dem Nutzer spielerisch die Prinzipien der Farbmischung beigebracht, indem er die richtige Kombination überlagerter Bilder auswählen muss, um ein vorgegebenes Zielbild zu erstellen.

Mit zunehmenden Schwierigkeitsgrad werden mehrere Farben und Formen gleichzeitig überlagert und fordern den Nutzer, die bisher erlernten Fähigkeiten anzuwenden. Anhand der benötigten Versuche zum Zusammensetzen des Bildes und der Zeit wird eine Punktzahl errechnet. Die Bilder, die für die Überlagerung verwendet werden, sind sowohl dynamisch generierte Bilder als auch fotorealistische Aufnahmen.

Autoren: Dennis Loska und Luisa Kurth.

Wie funktioniert's?

Durch Berühren bzw. Anklicken der Gläser leitet man die Lichtstrahlen um. Die richtige Kombination aus den Bildern bzw. Lichtstrahlen ergibt das richtige Ergebnisbild. Sollte man sich verklickt haben oder lag falsch, kann man das entsprechende Glas wieder anklicken bzw. berühren, um den gewünschten Strahl in den Ursprungszustand zurückzuversetzen.

Das ist Overlays.

Kombiniere die richtigen Basisbilder in jeder Reihe, um das korrekte Zielbild zu erhalten!

SCORE: 1000000
TIME: 00:59:00
  • Das sind die Basisbilder, welche kombiniert ein Zielbild ergeben
  • Die Startbilder - auf der rechten Seite soll wieder das selbe Startbild entstehen
  • Pro Reihe lassen sich z.B. 2 Basisbilder auswählen, um ein Zielbild zu erstellen - weiß: ON
  • Man kann z.B. pro Reihe 2 Basisbilder wählen, der rest ist - schwarz: OFF
  • Rechts steht das Ergebnisbild - entspricht es dem Anfaangsbild gibt es Punkte
  • Fehler werden beim Zielbild deutlich und es gibt Punktabzüge

Informationen

Level und Highscore

Der Score wird durch eine Formel berechnet, welche die Anzahl der gebrauchten Versuche und benötigten Zeit berücksichtigt. Hierbei gilt:

Je schneller und fehlerfreier man spielt, desto höher ist auch der Score.

Verwendete Tech­nologien

Für das Frontend haben wir Bootstrap, jQuery und die Canvas-API verwendet. Das gesamte Spiel wird via jQuery dynamisch erstellt, je nachdem wie viele Reihen im aktuellen Level vorliegen. Mit Hilfe von Bootstrap ist das Spiel responsive gestaltet und auch auf mobilen Geräten spielbar. Die Canvas-API wird verwendet, um die Bilder der einzelnen Level zu laden und die berechneten Ergebnis und Basisbilder auszugeben. Zudem werden mit Hilfe der Canvas-API einige Bilder der Level zufällig generiert!

Im Backend wird ein Node.js Server verwendet, welcher allerdings nur dafür benutzt wird, die Spielseite und diese Seite bei entsprechendem Request zu senden. Davon abgesehen wird noch Grunt als Taskrunner verwendet, welcher Aufgaben wie Minifizierung, Bildkompression, Uglifying usw. vornimmt.