Välkommen till vårt IKEA-inspirerade escape room-spel!
Vi som har utvecklat spelet studerar första terminen på utbildningen
Front-End Developer på Medieinstitutet. Utbildningen fokuserar på
modern webbutveckling med särskilt fokus på form, funktion,
tillgänglighet och användarvänlighet.
Målet med utbildningen är att utveckla de tekniska och kreativa
färdigheter som krävs för att kunna arbeta professionellt med
webbutveckling - från idé och koncept till färdiga, interaktiva
webbapplikationer för olika plattformar och enheter.
Detta spel är ett grupprojekt som genomförts inom ramen för kurserna
JavaScript och
Agila Metoder, där fokus har
legat på att utveckla en interaktiv webbapplikation i ett team.
Elena Holmberg, 43
Front-end student med bakgrund inom retail och affärsutveckling.
Under projektet har vi arbetat intensivt tillsammans med att ta fram
både koncept, design och teknisk implementation av spelet. För oss
alla är detta också första gången vi utvecklar ett större projekt
tillsammans i ett team, vilket har gett oss värdefull erfarenhet av
samarbete, kodstruktur och gemensam problemlösning.
Vill du veta mer om oss som individer är du välkommen att klicka på
våra namn för att komma till våra individuella presentationssidor.
Spelet
Spelet vi har utvecklat heter "IKEA
Escape Room". Målet är att ta sig från ingången till utgången i ett
IKEA-varuhus genom att lösa olika
utmaningar längs vägen. Spelet består av fyra olika rum där varje rum
innehåller ett eget spelmoment.
De olika rummen
Varje enskild gruppmedlem fick i huvudansvar i att
komma fram och koda sitt eget rum.
→
Rum 1: Barnavdelningen
Spelaren måste navigera genom barnavdelningen samtidigt som ett barn
försöker övertala dig att köpa saker som inte finns på inköpslistan.
För att komma vidare måste spelaren välja rätt svar och undvika att
utlösa ett utbrott.
Rum 2: Lampavdelningen
I detta rum ska spelaren tända lampor i rätt ordning för att hitta
den specifika lampa som ska läggas i kundkorgen. Om du klickar för många gånger får du game over och måste åka hem.
Rum 3: Ta-själv-lagret
Här måste spelaren lösa en rebus för att hitta rätt hylla och fack i
lagret - ett klassiskt
IKEA-moment där man försöker
minnas exakt vilken produkt man egentligen skulle hämta, var det Pax eller Bily? Tar du fel möbel får du börja om.
Rum 4 - Kassan
I det sista rummet ska spelaren försöka komma ihåg rätt kod till
sitt betalkort inom en begränsad tid.
När spelaren klarar alla rum registreras den totala tiden och sparas
i en highscore-lista.
Vilka tekniker har vi använt?
I detta projekt har vi valt att arbeta med
TypeScript,
CSS/SASS,
HTML och
Vite. Vi har medvetet valt att
bygga spelet utan ramverk, såsom React eller Vue, för att få en
djupare förståelse för hur moderna webbapplikationer fungerar på en
mer grundläggande nivå.
HTML har använts för att
strukturera spelets innehåll och skapa de olika vyerna och
interaktiva elementen i spelet.
CSS och
SASS har använts för styling
och layout. Genom att använda
SASS har vi kunnat organisera
vår styling bättre med variabler och en mer strukturerad kod.
Spelets logik är skriven i
TypeScript.
TypeScript har gjort det
lättare för oss att upptäcka fel redan under utvecklingen, något som
har underlättat för oss då vi arbetat i grupp. Detta har hjälpt oss
att skriva mer säker, tydlig och förutsägbar kod.
Som utvecklingsmiljö har vi använt oss utav
Vite. Det har gett oss en
snabb utvecklingsserver, bundling och smidig hantering av våra
moduler.
Tekniska funktioner
I projektet har vi bland annat implementerat:
flera interaktiva spelmoment byggda med DOM-manipulation
en progress-bar som kommer ihåg vilket rum spelaren senast var i
en speltimer som sparas i webbläsaren med LocalStorage
ett highscore-system baserat på spelarens totala tid
modulär kodstruktur i TypeScript
komponenter och logik för varje spelrum
Arbetsprocess
Projektet genomfördes som ett grupparbete där vi arbetade enligt
agila principer. Arbetet delades upp mellan oss i teamet där varje
person ansvarade för olika delar av spelet, samtidigt som vi
kontinuerligt samarbetade kring integrationen mellan funktionerna.
Vi använde Git för versionshantering, där vi arbetade med branches
och pull requests för att hantera kodändringar och säkerställa att
ny kod granskades innan den integrerades i projektet. Detta gav oss
erfarenhet av hur utvecklingsarbete i team fungerar i praktiken.
Varför detta spel?
När vi började diskutera vilket spel vi ville utveckla ville vi
skapa något som både var igenkännbart och lätt att relatera till.
Idén att skapa ett escape room i ett
IKEA-varuhus uppstod tidigt och
kändes direkt som ett roligt och kreativt koncept. Samtidigt gav det
oss möjlighet att arbeta med en redan etablerad visuell stil och
designprofil, vilket gjorde projektet extra intressant ur ett
design- och frontendperspektiv.
Vad vi har lärt oss
Genom projektet har vi bland annat utvecklat vår förståelse för:
hur man strukturerar ett större frontend-projekt
modulär JavaScript/TypeScript-kod
DOM-manipulation och event-hantering
hur man lagrar data lokalt i webbläsaren med LocalStorage
samarbete i utvecklingsteam och versionshantering med Git
komponenter och logik för varje spelrum
Projektet har gett oss praktisk erfarenhet av att gå från idé till
en fungerande interaktiv webbapplikation.
Introduktion
Det som skulle bli en snabb och harmonisk tur till IKEA har
förvandlats till ett prövningarnas test.
Du har en lista.
Du har en plan.
Du har… en trött och mycket bestämd femåring vid din sida.
Butiken är enorm. Det finns ingen genväg. Ingen återvändo. Bara
avdelning efter avdelning. Försök att ta dig ut, med både ditt och
dotterns humör i behåll.
Är du redo?
Utforska
BARN-AVDELNINGEN
Hämta hjärtlampan!
Ta dig igenom hela barnavdelningen utan att plocka på dig en
massa annat. Obs! Se
till att välja rätt väg.
Utforska
LAMP-AVDELNINGEN
Välj rätt glödlampa.
Fel ljusstyrka kan få konsekvenser!
Utforska TAG-SJÄLV-LAGRET
Lokalisera rätt hyllplats
Varning: Vagnens
svängradie är begränsad. Femåringens tålamod ännu mer.
Utforska KASSAN
Slå in rätt pinkod.
Ett enda feltryck… och dramatiken eskalerar.
Barnavdelningen
Rum 1
Du kliver in på barnavdelningen på IKEA.
Ditt uppdrag är tydligt: Ta dig från ingången till
utgången
Samtidigt finns ett krav: Du måste plocka upp hjärtlampan.
Missar du den måste du börja om. Men vägen är långt ifrån
rak. Och full med prövningar. Femåringen drar. Pekar.
Förhandlar. Hotar med att sätta sig på golvet.
⚠️ Reglerna är enkla men brutala:
Du får inte lägga något extra i vagnen. Du får inte ge med
dig. Du får inte orsaka ett utbrott.
Välj väg med omsorg. Ignorera distraktionerna. Håll
energin uppe.
Lycka till!
Till rum 1
← UTGÅNG
Den söta apan
Ni har knappt hunnit innanför dörren förrän
första hindret dyker upp! Den virala apan Punch! Din dotter drar
fram det tunga artilleriet- lägger huvudet på sned, tittar på
dig med de stora blanka valpögonen och drar till med det mest
bedårande
"Snäääääällla" du någonsin
hört. Hur tusan ska du ta dig ur det här?!
Game over
Du kom inte långt
Åh nej! Dottern gillar inte
ditt svar. Hon får världens utbrott och du får skynda ut till
bistron för att muta henne med en glass innan du kan börja om din
runda.
Men den röda kudden då?
Nästa utmaning blir en
fluffig, röd hjärtkudde. Din dotter trycker den mot bröstet,
tittar på dig med stora ögon och viskar ett utdraget:
"Snääääälla…"
Game over
Nu stirrar alla på er...
"JAG VIIIIIILL HA KUDDEN!!!!!!"
Det blir genast dålig stämning och du funderar på vad du ska
göra. Ska du börja om eller ge upp och åka hem?
Snart där!
Du valde rätt väg! Som tur
var nöjde Emma sig med att provsitta den lurviga stolen så ni kan
fortsätta fram till lampan!
Game over
Fel väg
Oh no! Du glömde att du
skulle plocka upp lampan. Börja om från början och välj rätt väg
Bra jobbat
Grattis! Du lyckades ta dig
till lampan utan att plocka på dig något mer! Gå till utgången för
att ta dig till lampavdelningen där det verkar vara något fel med
lamporna.
Lampavdelningen
Rum 2
Välkommen till rum 2
Åh, sådär, nu har vi äntligen hittat lampavdelningen! Men vad var
det vi skulle ha nu igen? Juste, vi skulle ju testa den nya,
flefärgade, smarta, coola, och trådlösa ljuskällan
KAJPLATS!LED ljuskälla, smart, färgat
och vitt
Men, alla lampor är ju släckta!?
Jag vet vad vi måste göra! Om vi trycker på lampknappen
BILRESA
Fjärrkontroll, vit smart/två knappar
så att alla lampor i slutet lyser samtidigt, så ser vi vilken
hyllaKAJPLATSLED ljuskälla, smart, färgat
och vitt
ligger i och vi kan då lägga den i vår gula påse och gå
vidare!
Men kom ihåg: vi har bara 10 stycken tryck på oss innan tålamodet
går ut och vi måste åka hem!
Till rum 2
Tips:
Alla knappar måste användas för att lösa spelet!
Kortslutning
Tryck på
BILRESAFjärrkontroll, vit smart/två
knappar
för att tända
KAJPLATS!LED ljuskälla, smart, färgat
och vitt
Rummet är klarat när alla lampor lyser samtidigt!
Game over
Du tände inte alla lampor
Åh, nej! Vi lyckades inte tända alla lampor i tid och nu har ditt
barn tröttnat och sprungit iväg.
Det blev ingen handling denna gång, så vi får lämna
IKEA tomhänta.
Bra jobbat
Yes! Vi lyckades tända alla lampor och nu ser vi ju var
KAJPLATSLED ljuskälla, smart färgat
och vitt
ligger någonstans!
Vi tar en
KAJPLATSLED ljuskälla, smart, färgat
och vitt
och lägger den i vår
IKEA-påse, så går kan vi gå
vidare till Ta-själv-lagret?
Tag själv lagret
Rum 3
Välkommen till rum 3
Nu när du har lämnat lampavdelningen
är nästa steg att hitta rätt möbel inne på lagret. Vi ska bara ha en
möbel och första steget är att ta reda på vilken hylla och fack vi
ska till.
Är du redo?
Till rum 3
Tag själv lagret
Rum 3
Vilken hylla och fack?
Puh! Du tog dig ut från
lampavdelningen, du är snart ute.
MEN, nu måste vi hitta den möbel du kom hit för att köpa, utan den
kommer vi inte till kassorna.
Du kommer ihåg lappen du fick
med dig hemifrån och blir lite fundersam över vad som står.
Lös rebusen:
1.
2.
1x Hylla
BILLY
Tag själv lagret
Rum 3
Korrekt
Bra jobbat! Du har hittat rätt hylla och fack.
MEN
någon har lämnat det i totalt kaos och skyltningen är förstörd, nu
måste du hitta rätt möbel.
Var du uppmärksam i förra steget?
000.000.00
Hylla
05
Fack
38
Välj rätt möbel:
Psst! Klicka inte för många
gånger.
Tag själv lagret
Rum 3
Du hittade Billy
Bra jobbat! Du tog dig från
tag själv lagret med bokhyllan Billy. Nu är det dags och ta sig till
kassan för att betala.
Snart ute!
Till rum 4
Game over
Du tog fel möbel!
Tyvärr tog tålamodet slut hos ditt barn och istället för att leta
rätt på möbeln måste du nu leta rätt på ditt barn istället.
När du letat klart, vill du spela igen eller vill du lämna
varuhuset?
⚠
Fel möbel
Var försiktig, du har bara ett försök kvar.
Kassan
Rum 4
Välkommen till rum 4
Äntligen framme vid kassan! Du
har lyckats ta dig genom hela varuhuset med alla varor i vagnen. Nu
återstår bara en sak — att betala.
Men det finns ett problem. Du har glömt din pinkod. Tur i oturen har
du ett minne som kanske räcker — om du kan memorera de gula rutorna
och komma ihåg siffrorna som visas.
Du har 3 försök på memoryt och
3 försök på att slå in rätt
kod. Misslyckas du går larmet och du får börja om.
Till rum 4
Memorera var de gula rutorna är och dess siffror!
00:00
Du är så nära!
Skriv in koden från de gula rutorna för att betala dina varor.
Kommer du ihåg vad som stod på rutorna?
Sammanfattning
BILLY399 kr
KAJPLATS59 kr
UPPLYST149 kr
Totalt607 kr
Pappa är 67 år... nej vänta, 67 år... öh, 6767?
607,00 kr
----
Game over
Köpet gick inte igenom!
Du tog alldeles för många försök på dig och kunde inte genomföra
ditt köp. Din dotter blir jätteledsen och börjar skrika, och du
inser att den enda lösningen är att släppa alla produkter och åka
hem.
Vill du testa igen eller vill du ge upp och åka hem?
Utgången
Grattis, du har lyckats ta dig ut från IKEA!
Efter många om och men har vi tagit oss från barnavdelningen, hela
vägen till utgången, utan att fastna på vägen. Lägg därtill en glad
dotter samt att vi lyckades hitta alla saker som skulle inhandlas,
så får vi säga att det blev en lyckad handling!
Din sluttid på spelet blev . Nedan
kan du se vart det placerar dig på highscore-listan!
