Für die Masterklasse „Mobiles Internet“ des Masterstudienganges Digitale Medientechnologien sollen wir eine mobile Webapplikation unter dem Motto „Print-To-Mobile-Social“ designen und umsetzen.  Dabei sollte man ein oder mehrere Printprodukte wie zum Beispiel einen Flyer oder ein T-Shirt designen, um möglichst viele Personen zur mobilen Applikation zu führen. Ziel dabei war es, dass die Personen ohne Tippen zur Applikation gelangen.

Als Printprodukt habe ich ein T-Shirt gewählt. Als Aufdruck wurde ein Memory-Spiel kreiert, bei dem die einzig aufgedeckte Karte der QR-Code ist, der zur mobilen Applikation führt. Die mobile Applikation ist ein kleines Memory Spiel.

 

Design

Als Deckblatt wurde eine Bild, das einen Haufen voller Würfel –  betitelt mit „Memory“ – verwendet. Die Motive für das Spiel selbst haben alle etwas mit dem Thema Mobile zu tun. Daher wurden folgende Bilder zu folgenden Themen ausgewählt: Android, Apple, Games, Usability Testing, Responsive Design, Navigation und der Übertragungsstandard NFC.

 

Technologien

Das Memory Spiel wurde mittels HTML5, CSS3 und jQuery erstellt. In der index.html wurden nur zwei Container erstellt, in denen später die durch jQuery erstellten Bild-Container, hineingesetzt werden.

In der JavaScript Datei wurde ein Array mit allen möglichen Bildern erstellt, das durch eine Funktion bei jedem Start des Spieles random durgemischt wird. Beim Klick auf die Karte wurde die Klasse der Karte ausgelesen. Wurde zwei Karten umgedreht wurde gleichzeitig überprüft, ob es sich um die gleichen Klassen handelt. Waren es unterschiedliche Klassen wurden beide Bilder wieder zurückgedreht. Handelte es sich um zwei gleiche Klassen, sprich um dieselben Bilder blieben diese offen. Sobald man alle sieben Paare aufgedeckt hat, kam die Meldung „Super, du hast gewonnen“.

 

Fazit

Das Spiel diente hauptsächlich zur Auffrischung meiner jQuery Kenntnissen. Während der Entwicklung ärgerte ich mich hauptsächlich über die Verfügbarkeit und Erreichung von Variablen, die den aktuellen Spielstand speichert. Gelernt habe ich außerdem, dass man niemals ein Tester der eigenen Applikation sein darf, da man als Entwicklerin genau weiß, wie das Programm ablaufen soll. Bei der Präsentation der Applikation haben weitere Tester Bugs, die mir während dem Testen nicht aufgefallen sind, sofort gefunden.

Link zum Projekt:

http://dm141530.students.fhstp.ac.at/Mobile/memory/