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 kända spelat fyra-i-rad.

Uppgift

Du ska implementera fyra-i-rad på en 10 x 8 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 storlek av spelplan och antal vinnar i rad ska kunna ändras till annat än 10x8 och 4 via användargränssnittet i direkt efter att spelsidan visas på webbläsaren. (Läs specifika krav nr 8 nedan)

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 10 x 8 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 horisontellt, 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. Läs mer om godkänd layout i HTML Links to an external site..  (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.

8. Spelarna ska via användargränssnittet kunna ange vilken storlek på spelplan de önskar först efter när den default spelplan med storlek 10x8 visas (minst 3 x 3 för att spelet ska vara meningsfullt). Vidare så ska spelarna också kunna välja hur många markerade rutor i rad som krävs för att vinna. Antal rader och kolumner ska kunna väljas oberoende från varandra men antal rutor i rad för att vinna spelet är beroende av storlek på spelplanen T.ex om man har valt en 4 x 6 spelplan så vinnar rad kan inte vara större än 4. Antal rutor i rad för att vinna spelet kan minst vara 3 oavsett storlek på spelplan, annars vem som vinner spelet bestäms av vem som börjar lägga första draget och inte vem som tänker bättre.

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.

Denna labb har ingen bonusuppgift