Inspireret af Candy Crush Saga byggede jeg interfacet til et lille spil: flere scener, liv der lades op over tid, et memory-spil og pop-up-vinduer, der giver spilleren feedback. Fokus var UI, interaktion og state i ren JavaScript.
Min problemformulering var, hvordan et brugervenligt og dynamisk spilinterface kan designes og bygges i JavaScript, så det understøtter en engagerende oplevelse.
Jeg delte det op i tre spørgsmål: Hvordan holder flere scener et samlet design? Hvordan opdateres liv, træk og pop-ups, så interfacet føles responsivt? Og hvordan giver notifikationer klar og øjeblikkelig feedback?
02
Det gjorde jeg
Uden frameworks: HTML og CSS til scenerne, JavaScript til alt, der reagerer.
Scener
Fire skærme
Startskærm, splash screen, hovedmenu og spilscene med pausemenu. Hver scene har sin egen CSS, men samme farver og knapper, så det hænger sammen.
State
Liv og træk
Spilleren har fem liv. Et forkert par i memory-spillet koster et liv, og træk tælles. Liv og træk gemmes i localStorage, så de overlever, når man skifter side.
Feedback
Pop-up-vinduer
Score, indstillinger, profil, venner og pause åbner som vinduer oven på spillet. Musik kan slås til og fra, og valget bliver husket.
03
Resultatet
Et sammenhængende flow fra start til spil.
Spilleren klikker Start, ser splash screen, lander i hovedmenuen og kan derfra starte et niveau. Interfacet opdaterer sig selv, når liv, træk og indstillinger ændrer sig.
Start
Splash
Hovedmenu
Spil
Det tager jeg med: Små detaljer som en nedtælling eller et pop-up-vindue gør meget for, at et interface føles levende. Næste skridt ville være animationer, der gør feedbacken endnu tydeligere.
Interaktiv frontend