Javascript
OPGAVER TIL HTML & CSS – JS – SPIL – PUZZLESPIL
Opgave 4 - SPIL
Opgave 4 – Del 1
Først skal vi igennem disse trin
- Lav en ny pen i codepen.io
- Vi starter med at bygge startskærmen i HTML delen.
Således her:
< body onload=”init();” >
< canvas id=”canvas” >< /canvas >
< /body >
Opgave 4 – Del 2
Gå nu ned i JS delen og start med at skrive variablerne ind:
Man kan justere på sværhedsgraden ved at øge tallet 4. 4 er det antal brikker der er vandret.
Opgave 4 – Del 3
Nu skal vi have bygget funktionen der kører spillet. Vælg her et billede link fra pixabay at sætte ind.
Opgave 4 – Del 4
Det næste vi skal kode er funktionen onImage. Denne laver brikkernes størrelser ud fra billedets størrelse.
Opgave 4 – Del 5
I denne del laver vi funktionen der sætter bla sætter rammen for puzzle spillet og brikkerne.
Opgave 4 – Del 6
Denne funktion viser vores forside med overlayet.
Opgave 4 – Del 7
Denne funktion bygger overlayet.
Opgave 4 – Del 8
Her skal vi bygge prikkerne som er antallet fra variablen(4) vandret og lodret.
Opgave 4 – Del 9
Denne gang skal vi lave funktionen blander brikkerne, når puzzle spillet starter.
Opgave 4 – Del 10
Denne funktion sørger for at vi kan flytte på brikkerne.
Opgave 4 – Del 11
Med denne funktion tjekker vi om den en brik er løftet. Hvis ikke den lander på en anden brik, skal den tilbage på sin plads.
Opgave 4 – Del 12
Denne funktion opdaterer puzzlespillet, og er lidt længere.
Opgave 4 – Del 13
Vi er nået til der, hvor vi skal lave funktionen for når en brik slippes.
Opgave 4 – Del 14
Nu vores næst sidste funktion, som er vores reset funktion.
Opgave 4 – Del 15
Vi er nået i mål og skal nu blot lave vores Game Over funktion! 
