Beskrivning av Gesällprov. Fia Med Knuff. Mikael Rydmark.

Transkript

1 Beskrivning av Gesällprov Fia Med Knuff Mikael Rydmark Mikael Rydmark 1(11)

2 Innehållsförteckning Inledning...3 Nytt spel...4 Regler... 6 Om Spelet... 7 Brädet... 7 Tärningen...8 Implementation...8 Möjliga Drag...8 Utföra drag...8 Dator...8 Människa... 9 Slå Igen...10 Spelets Slutfas...10 Avslutning...11 Mikael Rydmark 2(11)

3 Inledning Jag har som gesällprov valt at skapa en webbversion av det gamla klassiska brädspelet Fia Med Knuf. Spelet är et så kallat DHTML-spel. Det vill säga, det bygger på teknikerna (X)HTML, CSS och Javascript. Dessutom är brädet och tärningen skapade som SVG-objekt. Sidan följer standarderna XHTML 1.1, CSS 2.1 och SVG 1.1, validerade med W3C-valideringstjänst. Deta visas längst ner på sidan (se Bild 1). Genom at klicka på bilderna kommer man till de tillhörande valideringsresultaten. Bild 1: W3C-validering På sidan visas konstant brädet till vänster och till höger om brädet är en yta där olika information kan visas (se Bild 2). I grundutförande visas spelinformation, dvs kontinuerlig uppdatering om vad som sker i spelet under spelets gång. Om man klickar på någon av länkarna i menyn öppnas et nyt fönster över ytan där spelinformationen visas. Fönstren kan bytas genom at klicka på en annan länk eller stängas genom at klicka på krysset längst upp till höger i fönstret. Bild 2: Spelet i grundutförande De olika fönstren är Nyt Spel där man kan välja spelinställningar och sedan starta et nyt spel, Regler där reglerna för spelet förklaras samt Om Spelet där det står lite om hur spelet har skapats. Mikael Rydmark 3(11)

4 Nytt spel Bild 3: Nytt Spel När man klickar på länken Nyt Spel öppnas et fönster där man kan välja spelinställningar för et nyt spel som visas i Bild 3. Där får man ställa in vilka deltagare som ska vara med och om en användare ska vara styrd av en människa eller av datorn. Sedan får man välja spelhastighet. Alternativen är Långsam, Normal och Snabb. Spelhastigheten reglerar hur snabbt drag animeras och hur länge spelinformation visas. Sist men inte minst får man välja spelform. Man får välja på om man vill spela med eller utan knuf. Om man spelar med knuf kan man genom at hamna på samma ruta som en motståndares pjäs knufa den pjäsen. Då får den pjäsen börja om i sit bo. Mikael Rydmark 4(11)

5 När man är nöjd med inställningarna klickar man på Starta Nyt Spel för at starta en ny omgång Fia. Man får då upp en konfrmationsfönster där de inställningar man valt visas. Man kan då välja at trycka OK eller Avbryt. Fönstret visas i Bild 4. Bild 4: Konfirmera spelinställningar Man måste naturligtvis se till at det är minst två lag som deltar. Annars får man upp popupfönstret som visas i Bild 5 och man får se till at ändra sina inställningar. Bild 5: För få lag deltar Mikael Rydmark 5(11)

6 Regler Bild 6: Regler Klickar man på länken Regler får man upp et fönster som förklarar reglerna för spelet. Här nedan följer en genomgång av reglerna för den som inte känner till dem: Varje deltagare har fyra pjäser. När spelet börjar återfnns alla pjäser i respektive bo. Spelet går ut på at fyta alla pjäser et varv runt planen och sedan in i mål. Den deltagare som först lyckas ta alla pjäser i mål vinner! För at få fyta ut en spelare på spelplanen måste deltagaren slå en eta eller en sexa. Lyckas man med deta får man fyta ut en pjäs ur boet till startpositionen. Slår en deltagare en sexa får han/hon slå en gång till. Man fytar sedan sina pjäser medsols runt planen. Om man hamnar på samma ruta som en motståndares pjäs knufas denna tillbaka till sit bo, förutsat at man spelar med knuf. Man får ej stå med fera pjäser på samma ruta. När man når slutrakan gäller det at med jämnt antal steg gå in i mål. Mikael Rydmark 6(11)

7 Om Spelet Bild 7: Om Spelet Om man klickar på länken Om Spelet får man upp et fönster som beskriver hur spelet är skapat. Brädet Bild 8: Brädet Brädet är skapat som et SVG-objekt. De olika pjäserna kan sedan manipuleras från javacriptkoden. En annan fördel med SVG är at flen är enbart text och blir därmed liten i storlek. Det som dock krävs är stöd Mikael Rydmark 7(11)

8 för SVG 1.1. Det har alla stora webbläsare idag utan Internet Explorer som dock verkar ha stöd för SVG från och med version 9. Tärningen Tärningen är också skapad som et SVG-objekt. De olika prickarna som visas på tärningen kan fytas från javacriptkoden så at den kan visa de olika sidorna av tärningen. Bild 9: Tärningen Implementation Här tänkte jag förklara lite grann om hur jag har implementerat spelet och då främst hur det går till när man ska göra et drag och hur datorn väljer drag. Möjliga Drag Varje gång det är en deltagares tur slås tärningen. Sedan körs en metod som kollar vilka pjäser, om några, som går at fyta. Beroende på vad det är för drag som man kan genomföra säts en prioritet hos den pjäsen. Utföra drag Et drag kan antingen genomföras av en människa eller av en dator. Nedan beskrivs de två fallen. Dator När det är en dators tur at genomföra et drag så undersöker den vilken av dess pjäser som har fåt högst prioritet och väljer den pjäsen. Om det fnns fera pjäser med samma prioritet så väljer den en av pjäserna slumpmässigt. Låt mig förklara med et exempel. Låt säga at vi slog en femma. Låt säga at två pjäser står i boet. Dessa kan därmed inte fytas då man enbart får fyta ut en pjäs på spelplanen om man slår en eta eller en sexa. Därmed får dessa två pjäser lägsta prioritet. Låt säga at en tredje pjäs kan fyta fem steg på brädet, då får den högre prioritet. Den sista pjäsen kan också fyta fem steg på brädet men dessutom kommer den då at knufa en av motståndarens pjäser från spelplanen vilket är fördelaktigt. Därmed får den pjäsen högst prioritet och datorn kommer välja at fyta den pjäsen. Deta var bara et exempel. Jag har implementerat sju olika grader av prioritet. Om ingen pjäs kan fytas, dvs alla har prioritet noll, kan inget drag genomföras och det blir nästa deltagares tur. Mikael Rydmark 8(11)

9 Människa När det är en mänsklig användares tur at göra sit drag behöver vi inte använda oss av prioritet. Det är ju upp till den mänskliga användaren at avgöra. Istället vitmarkeras alla pjäser som är möjliga at fyta (se Bild 10 och Bild 11). Spelet väntar sedan på at användaren ska klicka på en pjäs som man väljer at fyta. När man klickar på en vitmarkerad pjäs, svartmarkeras alla pjäser igen och draget genomförs. Bild 10: Vitmarkerad pjäs I Bild 10 ovan ser vi at den blå pjäsen som är på brädet är vitmarkerad. De övriga pjäserna i boet är markerade med svart efersom de inte går at fyta ut ur boet (efersom det krävs en eta eller sexa för at göra det). Däremot i Bild 11 nedan ser vi at vi har slagit en sexa och därmed har möjlighet at välja bland samtliga pjäser vilken vi vill fyta. Bild 11: Flera vitmarkerade pjäser Mikael Rydmark 9(11)

10 Slå Igen När en deltagare slår en sexa får man förmånen at slå en gång till som visas nedan i Bild 12. Bild 12: Slå igen Spelets Slutfas När en deltagare lyckas ta sin sista pjäs i mål får man upp et popupfönster som meddelar deta (se Bild 13). Bild 13: Målgång Sedan när alla deltagare har lyckats gå i mål får man en summering av omgången som visas nedan i Bild 14. Det enda som då återstår är at starta et nyt parti och spela igen! Mikael Rydmark 10(11)

11 Bild 14: Slutsummering Avslutning Det har varit kul at försöka sig på at göra et DHTML-spel! At lära sig javascript är något jag har velat et tag nu och at göra et spel är et bra sät at lära sig mycket av språkets fnesser. Vissa avvikelser från andra språk är det givetvis men jag tycker det gick ganska bra at skriva logiken för spelet i javascript. Det som var lite problematiskt var kopplingen mellan SVG och javascript samt at lösa småskillnader och egenheter hos de olika vanliga webbläsarna. Men på det stora hela har det gåt bra och det har varit en rolig process! Mikael Rydmark 11(11)