Programmet kan sättas samman på många olika sätt. Här ges några tips som kan vara användbara för en del moment i konstruktion av programmet.
Studera HTML- och CSS-koden
Börja med att studera HTML- och CSS-koden noga, så att du förstår hur gränssnittet för programmet är uppbyggt.
Planera och strukturera programmet
Innan du börjar skriva kod, bör du planera programmet, så noggrant som möjligt. Utgå från beskrivningen av flödet i programmet och filmen där det demonstreras.
- Identifiera de olika händelser som finns och sätt ihop beskrivningar i punktform som beskriver vad som ska ske då händelserna inträffar. T.ex. vad ska ske då användaren klickar på knappen Nytt spel, vad ska ske då användaren drar en bricka, etc.? Gå på så sätt igenom alla händelser.
- Skapa sedan skalet till programmet, genom att införa en funktion för varje händelse. Skriv deklarationerna med
function name() {}
, men ingen annan kod. För istället in dina beskrivningar som kommentarer i funktionerna. - Fundera sedan på vilken data som behövs och vad du kan skicka som parametrar till funktionerna och vad du behöver spara i globala variabler.
- Därefter kan du börja översätta dina beskrivningar till programkod. Eventuellt får du då dela upp det i flera funktioner.
Konstruktion av programmet
Skapa programmet stegvis och lägg till lite kod i taget. Testa efter varje steg. Använd console.log()
, för att se att du kommer framåt i programmet och har föväntat innehåll i variablerna.
Gå inte vidare med nästa steg, förrän du löst föregående steg. Annars är det risk att du för in fler och fler fel och det kan sedan bli svårt att rätta till.
Selektorer
Studera CSS-koden noga, speciellt hur selektorerna skrivs för att välja ut olika rutor. Liknande selektorer kan du behöva skriva i querySelectorAll()
, för att i JavaScript välja ut olika rutor.
Klasserna tile
och mark
I HTML-koden är alla div-element som kan vara rutor där en bricka kan läggas, markerade med klassen tile
. Detta används både i spelplanen och i de fyra rutorna för nya brickor. Ibland kan du behöva komma åt alla rutor och kan då använda .tile
som selektor. I en del andra fall vill du kanske endast komma åt rutorna på spelplanen eller rutorna för de nya brickorna. Då kombinerar du id:t i de omgivande elementen med .tile
.
På samma sätt kan du komma åt alla element med klassen mark
.
Tomma och fyllda rutor
För att ge tomma rutor en stil används selektorn .tile:empty
i CSS-koden. Detta väljer ut alla element med klassen .tile
som inte har något innehåll. För de rutor där man lagt in en brickas nummer, används istället selektorn .tile:not(:empty)
. Dessa selektorer kan du också kombinera med id för de omgivande elementen för spelplanen eller de nya rutorna, för att välja ut tomma rutor eller rutor med brickor i dessa element.
Detta kan vara användbart dels i samband med drag-and-drop och dels för att avgöra om alla nya brickor är dragna och för att avgöra om spelplanen är fylld med brickor.
Klassen hiliteDropZone
För att markera att man drar över en ruta, där man får släppa en brikcka, kan du använda klassen hiliteDropZone
. Denna klass lägger du då till eller tar bort ur elementets classList
, så som det visats i exemplen för drag-and-drop.
Klasserna s1
till s8
I HTML-koden är alla rutor i spelplanen markerade med två av klasserna s1
till s8
. Dessa används för att markera vilka serier rutan ingår i — en för raden och en för kolumnen. Även elementen som ska användas för markeringar med bock eller kryss har en klass s1
till s8
.
Du kan få fram alla rutor i en serie genom att använda klassens namn i querySelectorAll()
. Använder du t.ex. .s1
, får du fem element, där de fyra första är rutorna med brickor och den sista är rutan för markeringen. Det är alltså de fyra första du ska jämföra och i den sista ska det läggas in en bock eller ett kryss.
Klasserna check
och cross
För att lägga in en grön bock eller ett rött kryss, behöver du endast lägga till klassen check
eller cross
i elementet för markeringen. Koden i CSS-koden sköter då resten.
Konvertera till Number
I beräkningar av poäng och jämförelser av brickor behöver datatypen vara Number
, för att få en korrekt beräkning eller jämförelse. Men då talen sparas i ett element samt i localStorage eller cookie, blir det datatypen String
. Då du tar ut ett värde som du ska ha i beräkning eller jämförelse, måste du därför konvertera till Number
.
Cookie eller localStorage
Total poäng samt antal gånger som spelats ska sparas i en cookie eller en variabel i localStorage. Detta ska sedan läsas in igen, då sidan läses in igen. Observera att båda värdena ska sparas i samma cookie eller samma variabel i localStorage, så värdena måste sättas samman då du sparar och delas upp då du läser in dem.
Tips för VG-delen
Här är tips för den kod du behöver skriva för VG-delen.
Två funktioner
Dela upp det i två funktioner. Den första funktionen anropas av timern för att ta fram spöket. I den funktionen ska du dels visa bilden med spöket (ändra visibility
) och dels slumpmässigt välja fyra (eller så många som det finns) brickor (dvs rutor med innehåll) och markera dessa. De markeras genom att du lägger till klassen ghostTile
.
Den andra funktionen ska anropas efter två sekunder. I den ska du ta bort de markerade brickorna och ta bort klassen ghostTile
. Du ska också dölja bilden med spöket. Därefter initierar du timern för att visa ett nytt spöke, dvs du väljer slumpmässigt en ny tid för när den första funktionen ska anropas igen.
NodeList och Array
Tar man fram en lista av element med querySelectorAll
, får man en lista som är av typen NodeList
. Denna fungerar ungefär som en Array
och har en del egenskaper och metoder som är lika, t.ex. length
, men alla metoder som finns för en Array
fungerar inte på en NodeList
. Vill man använda dem, får man konvertera listan till en Array
med metoden Array.from
, t.ex. Array.from(querySelectorAll("..."))
.