Webbens språk överblick

Målet med denna labb är ni ska bli bekväma med webbens fundamentala språk, HTML Links to an external site., JavaScript Links to an external site. och CSS Links to an external site.. För att göra det så ska ni i denna labb implementera fyra-i-rad.

Bas uppgift

Du ska implementera fyra-i-rad på en 10x10 rutor stor spelplan. Ni får anta att de två spelarna sitter vid samma dator.

Spelregler

Spelet är snarlikt tre-i-rad, med skillnaden att raden som man ska skapa är fyra och inte tre rutor lång, samt att spelplanen är 10x10 rutor stor och inte 3x3.

Spelet spelas av två spelare. Vem som är den förste kan bestämmas på ett godtyckligt sätt. De två spelarna har två olika markörer för var de spelat, t.ex. X och O.

Det betyder att spelet börjar med en tom 10x10 rutor stor spelplan. Spelarna tar därefter turer där de markerar en ruta på spelplanen.

Den spelare som lyckats markerat fyra rutor i rad (antingen horisontellt, vertikalt eller diagonalt) har vunnit. Om hela spelplanen fyllts upp utan att någon har vunnit så är spelet oavgjort.

Vidare så får en spelare endast markera rutor som är horisontallt, vertikallt eller diagonalt bredvid rutor som redan är markerade. Undantaget är den första markeringen, som får spelas var som helst.

Specifika krav

1. "use strict"; Links to an external site. ska användas i hela koden.

2. Er kod får inte ha några linter-varningar eller fel vid redovisningen. Ni måste använda det medföljande linting Links to an external site.-verktyget samt de medföljande linting Links to an external site.-reglerna utan modifkation.

3. HTML ska beskriva innehållet på webbsidan, CSS ska beskriva innehållets layout och stil. Dvs. missbruka ej HTML såsom <table> för att skapa layouten av spelplanen. (Tabeller används för tabulering av data, ej layout Links to an external site..)

4. HTML, CSS och JS måste ligga i seperata filer.

5. Ni måste använda flera CSS attribut (minst 5).

6. Webbsidan ska fungera korrekt i moderna webbläsare. Att sidan fungerar korrekt i Chrome och Firefox är ett minimum-krav.

7. Alla HTML-element som används för att bygga upp rutorna av spelplanen måste vara dynamiskt genererade utav Javascripten.

Er sida behöver inte vara den finaste, men den måste demonstrera att ni förstår hur HTML, CSS och JS fungerar och sammanverkar. Er hemsida ska även demonstrerar att ni förstår hur en hemsida ska struktureras.

Bonus uppgift

Modifiera din kod så att spelplanen kan anta vilken dimension som helst. Spelarna ska kunna ange hur stor eller liten spelplan de vill ha när spelet börjar. Vidare så ska spelarna också kunna välja hur många markerade rutor i rad som krävs för att vinna.

Tips

Alla webbläsare har utvecklarverktyg. Dessa tillåter att inspektera vad som händer bakom kulisserna. Man kan inspektera den nuvarande DOM Links to an external site.:en, det finns en console man kan läsa utskrifter till console.log, man kan se vilka CSS regler som påverkar vilka element, och mycket mer. Ni kan läsa här Links to an external site., hur ni öppnar utvecklarverktygen.