I tema 4, grundlæggende animation, skulle vi designe vores eget spil. Jeg valgte at lave et spil kaldet “Catch the elves”. Spillet går ud på, at julemandens nisser har lavet drillerier, så man skal hjælpe julemanden med at fange dem inden de forsvinder. Man skal undgå at blive fristet af de lækre cookies, for så bliver julemanden træt og mæt.

Vi blev introduceret til, hvordan vi skulle udvikle vores figur-elementer, spil-elementer, baggrundsdesign, UI-elementer, typografi og farver, som skulle tegnes i Adobe Illustrator.

Jeg startede med at finde min stilart, hvor jeg valgte stilen Kawaii. Mine figurer har en smule baby bias. De er symmetriske i ansigterne, men ikke altid på kroppen. Jeg har ikke gjort brug soild drawing, da kawaii er meget flat.

Da jeg havde undersøgt min stil, lavede jeg skitser, hvorefter jeg begyndte at rentegne i Illustrator. Her brugte jeg udelukkende Pen Tool til at tegne mine elementer med, da de skulle bestå af lukkede former.

Vi blev også introduceret til to forskellige diagrammer: aktivitetsdiagram og state machine diagram. Til at planlægge selve spillet, startede jeg med at lave et aktivitetsdiagram for at få et godt overblik over, hvilke elementer jeg skulle have med i mit spil og i hvilken rækkefølge de forskellige ting skulle ske, når brugeren klikkede rundt i spillet.

Efterfølgende lavede jeg et state machine diagram for at få et overblik over min kode i JavaScript. Her kunne jeg skrive mine funktioner/navne ind og på den måde holde overblik over, hvornår de forskellige animationer skulle starte, hvornår man skulle få point og miste liv osv.

Udover alt det designmæssige, lærte vi også at lave animationer i CSS ved at bruge ”@keyframes” og vi lærte Javascript.

Vi lærte bl.a. at lave funktioner, om hvordan documentet lytter efter for eksempel et klik ved at bruge ”addEeventListener”, hvordan man får fat i et ID, en Class eller et HTML tag ved at bruge ”document.querySelector”. Vi lærte også om, hvordan man mister liv og får point, hvor ”++” lægger til og ”- - ” trækker fra, hvordan man laver random positioner med ”Math.random” og indsætter lyd ved at bruge ”.play”, ”.volume” og ”. currentTime”.

Opgaven sluttede med, at vi lavede en fernisering for hinanden i grupper, hvor vi prøvede hinandens spil og fik feedback.