Inleiding

Samen met mijn medestudent Koen hebben we de afgelopen drie weken gewerkt aan het ontwikkelen van Easter eggs en minigames voor de website LeukeTickets.nl. Op deze website kunnen bezoekers voordelig tickets kopen voor diverse evenementen, zoals concerten, festivals, theater- en sportevenementen. Omdat de website verschillende categorieën voor evenementen aanbiedt, vonden wij het een goeie keuze. Hierdoor konden we voor elke categorie unieke en passende Easter eggs creëren.

Sluwe George

Ik kreeg inspiratie voor mijn Sluwe George-Easter egg door een filmpje op TikTok. In het onderstaande filmpje zie je een button die continu van plek verandert wanneer je cursor te dichtbij komt. Ik had al het idee om een Easter egg te maken met apen, en door deze TikTok kreeg ik het idee om een soort minigame te ontwikkelen waarbij je een aap moet vangen door erop te klikken. Wanneer je cursor te dichtbij de aap komt, verandert de aap van positie.

Ik heb de Easter egg verstopt door gebruikers te laten hoveren over de winkelwagenknop gedurende 1,5 seconden. Daarna verschijnt er een sweetalert, die ik heb aangroepen door de script link in de html-bestand te plaatsen en via Javascript aan te roepen met Swal.fire. Ik vond het leuk om voor de eerste keer met libraries te werken, omdat ze veel mogelijkheden bieden en het werk aanzienlijk makkelijker en sneller maken

De belangrijkste functies van deze Easteregg is dat de aapje zich moet verplaatsen naar een random positie op het scherm wanneer de cursor binnen een bepaalde afstand bevind van de aap en dat de afbeelding van de aap elke keer veranderd wanener de positie veranderd

Om het spel moeilijker of makkelijker te maken, heb ik de functie gemaakt dat wanneer de aap van positie veranderd, er een korte tijd is dat de aap niet kan bewegen, zodat de speler meer of minder tijd krijgt om de op de aap te klikken. Wanneer het je lukt om op de aap te klikken, krijg je weer een sweetalert en is de game afgelopen

Hongerige Cheetahs

Deze minigame kwam eerlijk gezegd zomaar in me op, maar hij lijkt op een soort "protect the target" game. Wanneer je op de winkelwagenknop klikt, verschijnt er een stuk vlees en komen cheetahs tevoorschijn die proberen het vlees te pakken. Het doel van het spel is om de cheetahs gedurende een bepaalde tijd weg te houden van het stuk vlees door op de cheetahs te klikken.

Als eerste ben ik begonnen met de logica van het spel. Elke dier krijgt een random positie op het scherm en beginnen te bewegen naar de target. Een timer van 10 seconden die bijhoud of de speler heeft gewonnen wordt gestart en als laatste een interval om de posities van de cheetahs te controleren. Bij de tweede plaatje zien we dat als er op een cheetah wordt geklikt, de positie van de cheetah veranderd en naar een korte pauze weer richting de target beweegt

In de eerste afbeelding hieronder zien we dat voor elke cheetah het pad wordt berekend naar de target op de x- en y-as. Daarna zien we op de afbeelding ernaast dat er een animatie wordt aangemaakt met @keyframes, waarbij elke individuele cheetah van zijn startpositie naar de targetpositie beweegt in 4 seconden tijd.

Als laatste is het belangrijk om met een functie een soort hitbox te maken waar de cheeta's niet binnen mogen komen. Vervolgens moet worden gecontroleerd of een van de cheeta's de hitbox heeft geraakt

Finding Gilbert

Vroeger speelde ik altijd Crossy Road en het leek me leuk om als laatste easter egg een soortgelijk spel te maken, maar dan met een aqua-thema. Het doel van het spel is heel simpel: vermijd de haaien om Gilbert de vis bij zijn familie te herenigen.

Om de Easteregg te vinden, moet de speler op elke hoek van het scherm klikken. Hierna komt er een Sweetalert en begint het spel die moet worden gespeeld met de pijltoetsen. Wanneer de game start, zien we bij het tweede plaatje dat 2 belangrijke functies worden aangroepen. Deze zorgen ervoor dat de haaien functioneren en de speler de vis kan besturen

In de eerste afbeelding zien we de logica voor het bewegen van de vis. Met een switch-statement wordt gekeken welke pijltoets is ingedrukt en vervolgens wordt, samen met een zelfgekozen snelheid, berekend hoe ver en hoe snel de vis zich moet verplaatsen. Op de achtergrond wordt met twee functies gecontroleerd of de speler een haai heeft geraakt en of de speler de eindtarget heeft bereikt.

Bij de haaien-functie wordt voor elke haai een willekeurige richting en startpositie op de y-as gegenereerd. In de geneste functie genaamd move wordt gecontroleerd of de haai de boven- of onderkant van de pagina heeft bereikt; als dat het geval is, wordt de richting omgekeerd. Een interessante methode genaamd requestAnimationFrame(move) zorgt ervoor dat de animatie van de haaien vloeiend en continu verloopt.

Elke haai heeft zijn eigen hitbox, en als de hitbox van de vis een haai raakt, eindigt het spel. Ditzelfde principe wordt gebruikt om te controleren of de hitbox van de vis de eindbestemming heeft bereikt.

EasterEggBord designen

Koen en ik bedachten in de tweede week om een 'Easter Egg'-bord te maken, waarmee bezoekers op een leuke en overzichtelijke manier kunnen bijhouden welke Easter Eggs ze al gevonden hebben en welke ze nog moeten zoeken. We dachten dat dit een leuke uitdaging zou zijn voor de bezoekers van de website, omdat ze hiermee gestimuleerd worden om alle Easter Eggs te vinden, wat leuke prijzen kan opleveren. Bovendien sluit het Easter Egg-bord goed aan bij het doel van de opdracht; het bevordert de samenhang tussen de verschillende Easter Eggs en moedigt mensen aan om de website vaker te bezoeken

Koen en ik besloten elk een eigen ontwerp voor het bord te maken. Vervolgens hebben we de beste elementen uit onze ontwerpen samengevoegd, nadat we feedback hadden verzameld van studenten en docenten door hen onze ontwerpen te laten zien

Voor het definitieve ontwerp kozen we voor de lay-out van Koen, omdat de testpersonen deze als overzichtelijker en esthetisch aantrekkelijker beoordeelden. Uit mijn ontwerp hebben we de functies overgenomen die rechtsboven een teller weergeven met het aantal gevonden Easter Eggs, en een 'Hint'-knop die gebruikers kunnen gebruiken om een hint te krijgen als ze moeite hebben met zoeken

EasterEggBord coderen

Allereerst heb ik een array gemaakt die alle Easter eggs bevat, inclusief belangrijke informatie die geupdate moet worden op de Eastereggbord zoals een ID, titel en afbeelding. Door gebruik te maken van een array blijft de code overzichtelijk, waardoor gegevens eenvoudig kunnen worden gegroepeerd en gebruikt

Bij elke Easteregg wordt de waarde 'true' gegeven aan de minigame-id als de speler de game heeft gehaald en deze waarde word opgeslagen in localStorage. Tenslotte wordt met de functie 'updateEasterEggBoard()' de bord geupdate voor de nieuwe voltooide Easteregg

Vervolgens wordt er gecontroleerd welke minigames voltooid zijn door de waardes op te halen uit localStorage. Ook worden de kaarten opgehaald met desbetreffende design (witte of roze design)

Aan de hand van string interpolatie en innerHTML wordt voor elke kaart de juiste informatie en design weergegeven

Als laatste wordt er gecheckt hoeveel minigames de waarde 'true' hebben en wordt de counter rechtsboven bij de Eastereggbord geupdate

Afsluiting

Ik vond deze Development opdracht de leukste opdracht van het hele semester, omdat we tijdens deze opdracht dieper ingingen op JavaScript en het leuk was om in duo's te werken

Terug naar begin