HUG – Roll & Win 2016

Integriertes Responsive HTML-Game mit Parallax-Effekten

Losrollen, beschleunigen und Hindernisse überwinden: HUG belohnt deine Treue zu den Original Willisauer Ringli mit attraktiven Preisen im Wert von Total CHF 40'000. Beim ersten Login erhält jeder Teilnehmende automatisch drei Gratisversuche. Danach benötigst du einen Teilnahmecode, welchen du auf den ausgezeichneten Willisauer Ringli Promotions-Verpackungen findest, um unbeschränkt spielen zu können. Dein jeweils persönlich bester Score erscheint in der Rangliste. Je schneller du bist und je mehr Punkte du sammelst, desto besser. Du kannst so oft spielen, wie du möchtest, um dich laufend zu verbessern. Jede Person kann jedoch maximal einmal einen Wochenpreis gewinnen. An der Schlussverlosung nimmst du zudem automatisch teil, wenn du mindestens einmal gespielt hast.

Das Willisauer Ringli Roll n’ Win Gewinnspiel lief vom 10. Februar bis am 30. Oktober 2016.

An diesem Projekt habe ich für meinen ehemaligen Arbeitgeber Responsive AG (Zürich) als Game- & Webdesigner in den hier aufgeführten Bereichen mitgewirkt.

Anforderungen

Integriertes HTML-Game in einer Responsive Website mit Anbindung an den Game-Server

Technik, Administration & CMS2-sprachig, HTML5, CSS3, PHP-CMS Framework, Angular

Browser & DevicesAlle gängigen und modernen Browser bis IE9, Desktop, Laptop, Netbook, Tablets und Smartphones (Swiping) sowie Vermeidung von Flash.

Look & Feel

Übersichtlich, spielerisch lieblich, elegant und modern – auf jedem Medium

Mechanismus Jump & RunDein Willisauer Ringli rollt nach dem Starten des Games automatisch los. Klick mit der linken Maustaste oder Tipp auf den Bildschirm, um über Hindernisse zu springen oder Bubbles einzusammeln. Je weniger Zeit du ins Ziel benötigst, desto mehr Punkte gibt es am Schluss. Der jeweils persönlich beste Score erscheint in der Rangliste. Die 20 besten Spieler der entsprechenden Woche gewinnen den dem Rang zugeordneten Wochenpreis. Bei gleicher Punktzahl gewinnt der Spieler, der zum früheren Zeitpunkt den Score erzielt hat. An der Schlussverlosung nehmen alle automatisch teil, welche bis am 30. Oktober 2016 mindestens einmal gespielt haben.

GewinnspielIntegriertes Responsive HTML-Game als Microsite/Landingpage mit Parallax-Effekten auf HTML/PHP/Angular-Basis.

Parallax EffekteJquery in das CMS integriert: Header-Bereich (auf Mobile deaktiviert)

Anleitung

So einfach geht's

1. Registration und Login Registriere dich einmalig bei Willisauer Ringli Roll n’ Win und logg dich ein. Beim ersten Login erhält jeder Teilnehmende automatisch drei Gratisversuche. Danach benötigst du einen Teilnahmecode, welchen du auf den ausgezeichneten Willisauer Ringli Promotions-Verpackungen findest, um unbeschränkt spielen zu können.

2. Code eingeben und zusätzlich profitieren Wenn du vor dem Start eines neuen Games einen Code eingibst, erhältst du eine Kakaobohne für das entsprechende Spiel, welche dein Original Willisauer Ringli in ein Willisauer Ringli au Chocolat verwandelt. Damit hast du ein Zusatzleben und erhältst 250 Bonuspunkte zum Start. Wenn du das Zusatzleben im Spiel nicht benötigst bleiben dir die 250 Bonuspunkte – brauchst du das Leben aber, so werden die 250 Bonuspunkte direkt wieder abgezogen.

3. Losrollen, beschleunigen und Hindernisse überwinden Dein Willisauer Ringli rollt nach dem Starten des Games automatisch los. Klick mit der linken Maustaste oder Tipp auf den Bildschirm, um über Hindernisse zu springen. Lässt du dein Willisauer Ringli in den Abgrund stürzen oder auf den Stacheln zersplittern, bist du Game over. Herumliegende oder herunterfallende Steine verlangsamen dich, genauso der klebende Honig, bei dem du sogar deine Sprungkraft komplett verlierst. Nutze das Trampolin, um weiter zu springen sowie die Beschleunigungspfeile, um noch schneller ans Ziel zu rollen.

4. Bonus- und Zeitpunkte sammeln Sammle fleissig alle Bubbles, um wertvolle Bonuspunkte zu sammeln. Mit der Kakaobohne verwandelt sich dein Original Willisauer Ringli in ein Willisauer Ringli au Chocolat. Da dies ein bisschen weicher ist, zerbricht es nicht. Damit hast du ein Zusatzleben und erhältst sofort 250 Bonuspunkte. Wenn du das Zusatzleben im Spiel nicht benötigst bleiben dir die 250 Bonuspunkte – brauchst du das Leben aber, so werden die 250 Bonuspunkte direkt wieder abgezogen. Und je weniger Zeit du ins Ziel benötigst, desto mehr Punkte gibt’s.

5. Gewinnen Dein jeweils persönlich bester Score erscheint in der Rangliste. Je schneller du bist und je mehr Punkte du sammelst, desto besser. Du kannst so oft spielen, wie du möchtest, um dich laufend zu verbessern. Jede Person kann jedoch maximal einmal einen Wochenpreis gewinnen. An der Schlussverlosung nimmst du zudem automatisch teil, wenn du mindestens einmal gespielt hast.

Screendesign

Microsite Parallax Desktop-Ansicht

Mobile-Ansicht Gameplay

zurück zu HUG Browser-Games Zur offiziellen Webseite

Mit freundlicher Genehmigung von Agentur Responsive AG (Schweiz), Kunde HUG AG (Schweiz), Designer Mario Farez Lewandowski. Die Rechte liegen bei den jeweiligen Inhabern.