Webbteknik 2

Uppgiften är ursprungligen utformad för att arbetas med under två veckor. Utgå från filerna i arbetsmaterialet. Där det finns filer med HTML- och CSS-kod. Dessa filer behöver inte förändras, utan de kan vara som de är. MEN: Du behöver lägga in ditt namn i footern i html-filen. Det finns också en JS-fil med lite inledande kod. Det är i den filen du ska lägga till din JavaScript-kod.

Del 1 - Få spelet att fungera

Innehåll i mappen u1

• Se över de filer som finns i mappen. Gå igenom HTML- och CSS-kod, så du förstår hur det är uppbyggt. Kontrollera också vilka bildfiler som finns i mappen img.
• Se också över programmets struktur med de funktioner och globala variabler som finns i JS-filen.
• OBS: Lägg in ditt namn i footern i HTML-filen.

Global setup

Här behöver du skriva kod som körs när sidan laddas. Det är kod som sätter upp spelet första gången.

Vad du behöver göra är:

• Lägg en händelselyssnare på startknappen, så att funktionen startGame anropas vid händelsen click.
• Alla bokstavsknappar ska ha en händelselyssnare, så att guessLetter anropas vid click.
• Aktivera startknappen och inaktivera alla bokstavsknappar (se sidopanelen gällande aktivering och avaktivering av knappar).

Funtionen startGame

Det här är funktionen som startar ett nytt spel. Här initierar du en spelomgång genom att återställa relevanta variabler och användargränssnittet till ett startläge.

Vad du behöver göra är:

• Visa första bilden, h0.png, och sätt räknaren guessNr till 0.
• Inaktivera startknappen och aktivera alla bokstavsknappar.
• Anropa selectRandomWord, för att välja ett ord.

Funtionen selectRandomWord

Den här skall välja det ord som användaren ska gissa på. Den behöver också uppdatera gränssnittet, så att rätt antal rutor visas för bokstäverna i ordet.

Vad du behöver göra är:

• Tidsnog skall du välja ett slumpmässigt ord ur listan med ord. Men medan du utvecklar och testar programmet, kan det vara bra att veta vilket ord det är. Så börja med att lägga in ett valfritt ord i den globala variabeln randomWord. Använd endast versaler i ordet. I slutet av arbetet med uppgiften byter du ut ordet mot kod för att slumpmässigt välja ett ord.

• Skapa ett tomt span-element för varje bokstav i ordet, och lägg in dessa i elementet med id “boxes”.

  • I CSS-koden finns redan kod som stilsätter span-elementen, så att de visas som vita rutor.

• Hämta en lista med alla span-element i #boxes och spara i variabeln boxElements.

• Test: Lägg till en utskrift av variabeln boxElements med console.log. Testa sedan programmet och kontrollera att du får lika många vita rutor som det är bokstäver i ordet.

Funtionen guessLetter

I den här funktionen hanterar du när användaren klickar på en bokstavsknapp för att gissa en bokstav i ordet.

Vad du behöver göra är:

• Hämta det knapp-element som användaren klickat på från event-objektet som kommer in som argument till funktionen.

• Inaktivera knappen så att spelaren inte råkar gissa på samma bokstav igen.

• Ta fram vald bokstav ur knappen och gå igenom alla boksäver i randomWord. Kontrollera om det är den valda bokstaven. I så fall skriver du bokstaven i span-elementet med samma position som bokstaven har i ordet. Lägg också in klassen marked i span-elementet.

  • Om bokstaven förekommer flera gånger i ordet, ska alla dessa läggas in i deras span-element.
  • Med klassen marked får rutan en gul bakgrund.

• Om bokstaven inte fanns i ordet, ska nästa bild för gubben visas.

• Om sista bilden visas, avslutas spelet genom att du anropar endGame med parametern true.

• Om alla boksäver i ordet är funna, avslutas spelet genom att du anropar endGame med parametern false.

  • Du får själv hitta på ett sätt att kontrollera detta. Du kan antingen använda information från DOM, eller så kan du exempelvis ha en räknare som räknar hur många bokstäver som är funna.

• Test: Kontrollera att bokstäver skrivs ut i rutorna vid rätt gissning, och att bilden byts ut vid fel gissning.

Funtionen endGame

Den här koden körs när spelet är slut. Beroende på om gubben blev hängd eller ej visar du olika information till användaren. Men oavsett vilket så behöver du möjliggöra att starta ett nytt spel.

Vad du behöver göra är:

• Om parametern manHanged är true, skriver du ut att gubben blev hängd samt det rätta ordet. Annars skriver du en gratulation.
• Aktivera startknappen och inaktivera alla bokstavsknappar.
• Test: Kontrollera att du får ut rätt meddelande, då spelet avslutas.

Del 2 - Fixa detaljerna

Du kommer nu göra en del tillägg i de olika funktionerna. Exempelvis för att “städa upp” vid nytt spel, välja ord slumpmässigt och mäta hur lång tid det tar att spela.

Funtionen startGame

• Töm elementet för meddelandet, så att inte föregående spels slutmeddelande ligger kvar, då man spelar flera gånger.
• Ta fram ett Date-objekt och spara tiden du får med getTime.

Funtionen selectRandomWord

• Ersätt tilldelningen av randomWord med kod, där du slumpmässigt väljer ett ord ur wordList. Det ska inte vara samma ord som i föregående spelomgång. Ordet ska dock kunna väljas igen vid ett senare tillfälle.

Funtionen guessLetter

Här behövs inga tillägg.

Funtionen endGame

• Ta fram aktuell tid och beräkna skillnaden mot starttiden. Omvanda till sekunder och skriv ut hur lång tid det tog att spela spelet.
  • Obs! Tiden ska skrivas ut oavsett om gubben blev hängd eller ej.

Test och kodens stil

• 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 samt att de lokala variabler du infört har relevanta namn på engelska.