Webbteknik 2

Funktionsbeskrivning

Det ska dyka upp vildsvin med slumpmässig placering. Totalt ska det komma fram tio vildsvin, men endast ett i taget. I praktiken finns det endast en img-tagg för vildsvinet och den ska ges en ny slumpmässig placering, då ett nytt vildsvin ska komma fram. Spelaren ska sedan försöka köra på vildsvinet med bilen, men vildsvinet ska endast ligga kvar en viss tid, innan det ges en ny slumpmässig plats, oavsett om man kört på det eller ej.

Det som ska läggas till är funktioner för placering av vildsvinet och krocktest samt räknare för antal vildsvin och antal träffar. Följande instruktioner guidar dig genom de tillägg som du ska göra i koden.

Tillägg i init-funktionen

• Spara referenser till elementen med id "pig", "pigCounter" och "hitCounter" i de globala variablerna pigElem, pigCounterElem och hitCounterElem.

Tillägg i startGame

• Sätt pigCounter och hitCounter till 0 och skriv ut dem på webbsidan.
• Använd setTimeout för att se till att funktionen newPig anropas efter tiden pigDuration. Spara den returnerade referensen i variabeln pigTimer.
  • Vi använder en timer istället för ett intervall, eftersom timern ska stoppas vid en krock och därefter startas om igen med en ny tid.

Tillägg i stopGame

• Stoppa pigTimer på samma sätt som carTimer stoppas..
• Dölj bilden med vildsvinet genom användning av style-egenskap visibility.

Funktionen newPig, för nytt vildsvin

Skapa en ny funktion och kalla den newPig. Lägg sedan in följande i den.

• Om pigCounter är mindre än tio, ska nedanstående punkter utföras. Annars anropas funktionen stopGame.
• Ta fram en ny position för img-taggen med vildsvinet. Positionen ska bestämmas slumpmässigt inom spelplanen, men så att vildsvinet hamnar minst 20 pixlar från kanten.
  • Det blir i stort sett likadan kod som du tog fram i övningen i exempel 5-1.
• Visa img-taggen med vildsvinet, genom att lägga in bilden "pig.png" i den och sätta egenskapen visibility till "visible".
  • Detta behövs eftersom bilden sedan ska bytas ut i en annan funktion, om bilen träffar vildsvinet. Från början är också img-taggen dold.
• Räkna upp räknaren för vildsvinen med 1 och skriv ut den på webbsidan.
• Använd setTimeout för att ange att funktionen newPig ska anropas igen efter den tid som finns i pigDuration.
• Test: Starta spelet och kontrollera att din kod fungerar. Vildsvinet ska dyka upp efter två sekunder och sedan ges en ny position varannan sekund. Räknaren ska räknas upp, och efter tio vildsvin ska spelet stoppas.

Funktion checkHit, för krocktest

Skapa en ny funktion och kalla den checkHit. Kopiera också funktionen elementsOverlap från exempel ex5-1, så att du kan använda den för att kontrollera om bilen och vildsvinet överlappar varandra.

I funktionen checkHit ska följande göras:

• Lägg in en if-sats, där du med elementsOverlap kontrollerar om elementen med bilen och vildsvinet överlappar varandra. I så fall ska följande utföras. I annat fall görs ingenting.
  • Lägg in bilden "smack.png" i elementet för vildsvinet.
  • Räkna upp räknaren för träffar och skriv ut den på webbsidan.

Lägg in ett anrop av checkHit i slutet av funktionen moveCar, så att krocktestet utförs för varje förflyttning av bilen.

• Test: Starta spelet och kontrollera att "smack"-bilden visas, då du kör på ett vildsvin. Räknaren för antal träffar räknas också upp, men visar troligen alldeles för många träffar. Detta pga att elementen för bilen och vildsvinet överlappar varandra tills bilen passerat.

Justering, så att en träff endast räknas en gång

• Den globala variabeln catchedPig ska användas som en s.k. flagga, för att markera att ett träffat vildsvin redan är räknat. Lägg till en rad i funktionen startGame, där du sätter variabeln till true.
  • Detta för att vi inte ska kunna "krocka" med vildsvinet, innan det första visats.
• I funktionen newPig sätter du catchedPig till false, då vildsvinet fått en ny position.
  • Det vildsvinet är ännu inte träffat.
• I början av funktionen checkHit lägger du in en kontroll av catchedPig. Är variabeln true, avbryter du funktionen med return.
  • Då är vildsvinet redan räknat och någont nytt krocktest ska inte utföras.
• I if-satsen där du kontrollerat om elementen överlappar, lägger du till en rad i början, för att stoppa vildsvinets timer.
• Längst ner i if-satsen lägger du in en rad där du sätter catchedPig till true.
  • Detta vildsvin är nu träffat och ska inte räknas fler gånger, då bilen passerar.
• Lägg också in en rad där du startar timern, så att newPig anropas igen efter tiden pigDuration.
  • Då kommer "smack"-bilden ligga kvar tills nästa vildsvin dyker upp.
• Test: Testa igen och kontrollera nu att ett träffat vildsvin inte räknas mer än en gång.

Ljudeffekter i funktionen checkHit

• Då du lagt in "smack"-bilden, spelar du också ljudet punchSound.
• Efter uppräkning av hitCounter, kontrollerar du om variabeln är lika med 5. I så fall spelar du ljudet laughSound.

Test och städning

• Testa alla delar i programmet och kontrollera att de fungerar och att du inte får något felmeddelande i konsolen.
• Se över kodens stil och att programkoden är korrekt indenterad och att du före varje funktion skrivit en kort kommentar som förklarar vad funktionen gör.