Webbteknik 2

I denna uppgift ska du skapa spelet "Hänga gubbe", där ett ord väljs slumpmässigt. Därefter går det gissa bokstäver, genom att trycka på bokstavsknappar. Följande film demonstrerar hur det färdiga programmet ska fungera:

4 min.

Du arbetar med uppgiften under två veckor. Utgå från filerna i mappen U1b, där det finns filer med HTML- och CSS-kod. Dessa filer får inte förändras, utan de ska vara som de är. 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örsta veckan)

Innehåll i mappen U1b

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.

Funtionen init

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.

Funtionen startGame

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

Funtionen selectRandomWord

Här ska du sedan slumpmässigt välja ett ord, men medan du utvecklar och testar programmet, kan det vara bra att veta vilket ord det är. Så lägg nu in ordet "BLOMMA" (eller annat valfritt ord) i den globala variabeln randomWord. Använd endast versaler i ordet.
- I del 2, då vi tittat lite mer på hantering av slumptal och slumpmässiga val, kommer du byta ut det till kod för det slumpmässiga valet.
Gå igenom alla bokstäver i ordet i en loop. För varje bokstav lägger du in ett tomt span-element, <span></span>, i elementet med id "boxes".
- En liknande funktionalitet finns i ett av delexemplen i exempel 2-12, där bokstäverna läggs in i olika li-element. I detta fall ska du istället ha ett tomt span-element. Bokstäverna ska alltså inte finnas med.
- I CSS-koden finns redan kod som stilsätter span-elementen, så att de visas som vita rutor.
Ta fram en array med alla span-element och spara i variabeln boxElems.
- Använd querySelectorAll och en selektor som väljer ut alla span-element i elementet med id "boxes".
Test: Lägg till en utskrift av variabeln boxElems med console.log. Testa sedan programmet och kontrollera att du får en vit ruta för varje bokstav och att boxElems innehåller en lista med span-element.

Funtionen guessLetter

Flera av nedanstående punkter liknar det som du gjort i övningarna i exempel 2-13, så du bör med lite modifieringar kunna använda den koden.

Inaktivera den knapp användaren tryckt på.
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 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 kan använda klassen marked för kontrollen, se övningen i exempel 2-13.
Test: Kontrollera att bokstäver skrivs ut i rutorna vid rätt gissning, och att bilden byts ut vid fel gissning.

Funtionen endGame

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 (andra veckan)

Du gör nu en del tillägg i funktionerna, 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.