Webbteknik 2

Del 1 (första veckan)

Innehåll i mappen U1a

• 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.

Funktioner, händelselyssnare och globala variabler

• Lägg in deklaration av de funktionerna som anges i nedanstående tabell.
  • Lägg in en utskrift av funktionens namn med hjälp av console.log() i varje funktion. Då kan du sedan kontrollera att man kommer till funktionerna.
• I init-funktionen kopplar du samman elementen och funktionerna med addEventListener() och händelsen click.

Alla tre tärningarna ska alltså kopplas till samma funktion.

• Testa din kod, genom att klicka på knapparna och tärningarna. I konsolen ska du då se utskrifterna från de olika funktionerna.
  • OK-knappen i dialogen kan du dock inte testa, eftersom dialogen är dold.
• I init-funktionen tar du också fram referenser till elementen med id options, die1, die2, die3, rollCounter, result och stopBtn. Spara referenserna i de globala variablerna optionsDialog, die1Elem, die2Elem, die3Elem, rollElem, resElem och stopBtn.

Stoppknappen

• Lägg till kod så att stoppknappen är inaktiv då sidan laddats in. Sedan ska den aktiveras, då man startar spelet och inaktiveras igen, då spelet avslutas.
  • Lägg alltså in aktivering eller inaktivering av knappen i de funktioner som man ska komma till i dessa steg. Använd variabeln stopBtn, för att referera till knappen.

Dialogen

• Lägg till kod i funktionen showOptionsDialog(), så att dialogen visas som en modal dialog.
• Lägg till kod i closeOptionsDialog(), för att dölja dialogen.
• I closeOptionsDialog() lägger du också till kod, för att spara valet i menyn i variabeln maxNrOfRolls.

Del 2 (andra veckan)

Kast av tärningarna

• Lägg till kod så att alla tre tärningarna kastas, då man klickar på knappen för nytt spel. Man ska också kunna kasta om en tärning, då man klickar på tärningen.
  • Se hur du gjorde i övningen i exempel 2-5. Kopiera funktionen throwDie och använd den.

Räknare för antal kast

• I newGame() lägger du till två rader, där du lägger in maxNrOfRolls i nrOfRolls och skriver ut nrOfRolls i elementet rollElem.
• Sist i throwOneDie() lägger du in kod för att minska nrOfRolls med 1 och skriver ut det nya värdet. Då räknaren blir 0, ska funktionen endGame() anropas.
• I början av throwOneDie() lägger du också in en kontroll av nrOfRolls. Är den 0, avbryter du funktionen med return.
  • Man ska ju inte kunna kasta om en tärning, då räknaren kommit ner till 0.
• I endGame() lägger du in 0 i nrOfRolls.
  • Stoppar man med stoppknappen, innan räknaren kommit ner till 0, måste variabeln sättas till 0. Annars kan man fortsätta att kasta tärningar, genom att klicka på dem.
• Testa nu att räknaren visas på sidan och räknar ner, då man klickar på en tärning. Om koden är korrekt ska man endast kunna kasta enskilda tärningar under spelets gång och inte innan det startats eller då det avslutats.

Summa och poäng

• I endGame() lägger du till kod för att beräkna summan av tärningarna.
  • Se övningen i exempel 2-5.
• Lägg också in if-satser för att bestämma poäng. Är summan lika med 15, ska det bli 3 poäng. Är summan lika med 14 eller 16 ska det bli 1 poäng. I övriga fall ska det bli 0 poäng.
• Skriv ut summa och poäng med lämplig text i elementet som resElem refererar till.
• För att ta bort utskriften, då man startar ett nytt spel, lägger du i newGame() in en rad där du skriver en tom textsträng i elementet för resultat.

Test

• Spela några gånger och kontrollera att allting fungerar korrekt.

Kodens stil

• Se över din kod och kontrollera att den är korrekt indenterad.
  • Använd tangenterna shift alt F i Visual Studio Code, för att formatera koden.
• Före varje funktion ska du också ha en kommentar med en kort beskrivning av vad funktionen gör.