HTML-spel

Spela spelet genom att klicka på bilden ovan (syns bäst i Google Chrome).

Denna uppgift gick ut på att implementera en egen spelidé med hjälp av HTML och JavaScript. Detta har varit den mest givande uppgiften hittills i kursen, vilket kändes lite otippat. Jag har lärt mig väldigt mycket om Javascript och det tror jag främst beror på att jag testade spelet iterativt som jag kodade fram det och på så sätt fick se med egna ögon vad koden gjorde och också vilka fel som kunde uppstå när jag skrev en viss kod. För att genomföra denna uppgift fick jag inspiration från denna sida och gjorde sedan om och utökade koden så att den passade min spelidé.

I spelet jag skapat är spelarens uppgift att mätta den glupska golden retrievern Alfons inom loppet av sjuttiofem sekunder. Användaren uppmanas också komma ihåg att hundar inte tål choklad. Jag började med att skapa en canvas på samma sätt som jag gjorde i uppgift fem. Jag skapade sedan en bakgrund i photoshop som jag ritade ut i canvasen. I photoshop ritade jag också hunden och hundbenet. Sedan såg jag till att hunden och hundbenet också ritades upp canvasen och gjorde det möjligt att manövrera hunden med piltangenterna och att benet antog slumpvisa x och y-värden efter att hunden nuddat vid det. I det ovan nämnda exemplet återgår spelaren till mitten av canvasen efter att spelaren nuddat det jagade objektet. Jag ville dock att hunden skulle stanna kvar på samma ställe och gjorde därför en resetbone-funktion där endast benets x och y-värde ändras medan hundens inte ändras. Jag visste att jag ville att man skulle samla poäng i spelet och skapade därför variabeln bonesCaught som ökar med ett varje gång hunden nuddar benet. Jag ville också ha en räknare som visar antalet insamlade poäng. Den skapade jag på samma sätt som i exemplet jag utgick från men ändrade värden och placering så att den skulle passa mina önskemål. På sida på w3schools lärde jag mig mer hur man placerar ut text i canvasen, det gjorde att jag lättare kunde ange rätt värden för att få texten där jag ville ha den. Jag insåg ganska snart att jag ville utöka spelet eftersom det blev lite tråkigt efter en stund. Därför lade jag till en hundmatskål och en cupcake som användaren också kan fånga. För att kunna göra detta lade jag till if-satser i updatefunktionen och skapade egna resetfunktioner för skålen och cupcaken. Hundmatskålen ritas ut (bowlReady = true) när bonesCaught antar värdet 20 och ger två poäng vid fångst. Cupcaken ritas ut (cupcakeReady=true) när bonesCaught antar värdet 30 eller 31. Anledningen till att jag angav både trettio och trettioett och inte bara ett av värdena är att jag vill att cupcaken ska ritas ut vid varje spelomgång, hade tex. bonesCaught haft värdet 29 och användaren tagit en matskål och bonesCaught antagit värdet 31 när cupcaken endast ritas ut vid bonesCaught=30 så hade cupcaken inte ritats ut vid den spelomgången. Jag ville också försvåra spelandet lite och kom med idén att eftersom många hundar inte tål choklad så borde jag ha med en chokladkaka som ritas ut på canvasen. Detta möjliggjorde jag på samma sätt som med de andra objekten i spelet. Chokladkakan ritas upp när bonesCaught antar värdena 20, 30, 40 osv. Om spelaren fångar en choklad ges en alert och spelaren har förlorat. Jag insåg också att jag ville att hunden inte skulle kunna flyta utanför canvasen och kom därför på att jag med hjälp av en if-sats kunde ställa om hundens x och y-värde om de överskred canvasens höjd och bredd (minus hundens bredd respektive höjd). För att göra spelet mer spännande skapade jag en timer som jag ritade upp på samma sätt som poängräknaren. Hur jag skapar en timer hittade jag i spelexemplet och ändrade så att den skulle passa mitt spel. Till sist lade jag till ljudeffekter (från denna sida) för att göra spelet mer intressant. När jag testkörde spelet på några av mina vänner insåg jag att ett det uppstod stora irritationsmoment de gånger chokladen ritades ut på samma x och y-värde som hunden befann sig på, eftersom det medförde att spelaren förlorade. Därför lade jag till en if-sats i resetchocolate-funktionen som gör att om chokladen får ett x och y-värde som krockar med hunden så får chokladen nya slumpade x och y-värden.

Spela spelet här.