Skip to content
Kursen webtec

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

  1. Innan spelet startar ska man kunna välja vilken bakgrundsbild man vill ha samt ha möjlighet att slumpa fram en. Använd fetch för att hämta bilden.

  2. Använd fetch för att hämta ankan.

  3. Man ska kunna välja hur länge spelet håller på: 10, 30 eller 60 sekunder.

  4. 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().

För att använda länkarna med fetch behöver vi “raw” content. 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. Ankans position ska slumpas fram med 1 sekunds interval. Hela ankan ska vara innanför skärmens fönster.

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

  4. 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 hastighet
  • ankans storlek
  • poängen
  1. Kan man få ankan att röra sig i olika riktningar och inte slumpas fram?

Validering

Avslutningsvis

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