Duckhunt (kmom06)

I den här uppgiften ska vi skapa en variant av det gamla spelet Duckhunt. Många av er har säkert spelat det. Det går ut att pricka ankor som rör sig över skärmen. Vi kommer jobba med positionering, events, randomisering, fetch med mera för att få ihop det. Det finns gott om utrymme för att göra lite extra i uppgiften. Om du inte vill använda ankan kan du skapa en egen bild eller form istället.

Förutsättning

Det förutsätts att du gått igenom artiklarna för kursmomentet samt är det en fördel om du gjort tidigare kursmoment. De ger dig koll på hur vi börjar jobba med JavaScript och webbläsaren.

Krav

Generell struktur

Du jobbar i mappen public/.

1. Skapa filen public/duckhunt.html och lägg till menyvalet i navbaren likt tidigare.

2. Skapa filen public/js/duckhunt.js och läs in den i duckhunt.html. Det är “startfilen” för din JavaScript.

3. Skapa filen public/css/duckhunt.css som sköter stylen för uppgiften.

När du är klar bör du ha följande filer, tillsammans med dina tidigare:

• Directorypublic

  • Directoryjs

    • duckhunt.js
  • Directorycss

    • duckhunt.css
  • duckhunt.html

1. Setup (Innan spelet startar)

1. Använd input element för att välja vilken bakgrundsbild man vill ha samt ha möjlighet att slumpa fram en. Det finns 5 bilder (1-5) så 0 kan användas för att slumpa.

2. Använd input element för att välja hur länge spelet håller på: 10, 20 eller 30 sekunder.

3. Använd input element för att välja i vilken hastighet ankan ska förflytta sig: 1, 2 eller 3 sekunders intervall.

4. Se till att spärra möjligheterna att välja något annat.

5. Visa att datan laddas medan bilderna hämtas. Här kan du välja själv hur du vill att det ska se ut.

6. Utfrån valen man gör ska det skapas ett globalt objekt som håller informationen spelet behöver för att starta och fungera. Sätt alla värden via funktionen setupGame().

7. Använd fetch för att hämta ankan och den valda bakgrundsbilden.

• Ankan (Den bilden kommer från rawpixel.com)
• Bakgrundsbilderna

För att använda länkarna med fetch behöver vi “raw” content från GitHub. Du kan se URL:en här. Bara byt siffran i slutet. Detsamma gäller för ankan.

2. Spelet

1. Starta spelet via en knapp och funktionen startGame().

2. Placera rimlig logik i ditt objekt. Fundera på vad som passar där och vad som passar ligga utanför.

3. Ankans position ska slumpas fram med det valda intervallet. Hela ankan ska alltid vara innanför skärmens fönster.

4. Om man klickar på ankan får man 1 poäng.

5. När tiden är slut presenteras poängen via funktionen endGame() och spelet är över. Man ska få möjlighet att starta ett nytt spel.

Extra uppgifter (optionellt)

1. Se till så man kan välja svårighetsgrad som påverkar till exempel:

• ankans storlek
• poängen

2. Kan man få ankan att röra sig i olika riktningar och inte slumpas fram?

Hur kan det bli när du är klar?

Play

Exempel på hur det kan se ut när du är klar.

Validering

1. Dina webbsidor skall validera i W3C HTML validator.

2. Dina webbsidor skall validera i W3C CSS validator.

3. Din webbplats skall passera npx eslint public.

4. Din webbplats skall gå att starta via npx http-server.

Krav inlämning

1. Skriv all din kod i din branch main.

2. Dina webbsidor skall validera i W3C HTML validator.

3. Dina webbsidor skall validera i W3C CSS validator (när det är rimligt).

4. Din webbplats skall passera npx eslint.

5. Din webbplats skall gå att starta via npx http-server.

6. När du är klar så taggar du ditt repo och pushar till GitHub.

7. Din webbplats skall vara tillgänglig via en privat länk på GitHub Pages.

8. När allt är klart och fungerar så gör du en pullrequest (PR) mot branchen bth/submit/kmom06. Läs om hur du gör en PR för kmom06”.

Avslutningsvis

Lycka till och hör av dig om du kör fast eller har några funderingar.