2 juni 2014

Bygg ett brädspel i Google Apps Script. Del 1: Spelplanen

Kan man använda gamla »tråkiga« kontorsverktyg för spelutveckling? Visst kan man det, speciellt brädspel!

I den här övningen programmerar vi ett enkelt gissningsspel av typen Mastermind i Googles kalkylarksprogram. Vi ska gissa hemligheten och datorn ska rätta våra gissningar. Och inte bara det, vi ska ha roligt när vi programmerar spelet med en metod som kallas testdriven utveckling, på engelska TDD. Det är nästan som ett spel i sig.

Testdriven utveckling är ett sätt att programmera genom att ta många små steg och låta tester styra vad som ska hända med koden härnäst. 
  • Ett traditionellt sätt att tänka sig programmering är att man skriver kod som man sen försöker testa och rätta.
  • Med testdriven utveckling lägger man till ett eller några få testfall i taget, provkör testfallen och ser om de fungerar. Gör det inte det så skriver man enklast möjliga kod för att klara testfallen.
Ett exempel säger mer än tusen ord så nu kör vi igång!

Innehåll

  1. Spelplanen
  2. Spelregler

Vi börjar med spelplanen

Det är lätt att göra spelplanen som ett kalkylark i Google Drive och vi kan då programmera spelreglerna i Google Apps Script, som liknar JavaScript. Det är samma sätt som Microsoft Excel kan programmeras med BASIC-dialekten VBA. En fördel med att bygga spelet i Google Drive direkt på Internet är att vi kan dela det med andra, nästan lika lätt som med Scratch.

Gå till Google Drive och skapa ett tomt kalkylark. Du behöver ha ett gratis Googlekonto för att kunna använda Google Drive.

Ett Mastermindspel av normalstorlek brukar ha sex färger att gissa på och man har tio gissningar på sig att lösa den hemliga koden. Så här ser vårt önskade slutresultat ut. De tio gissningsraderna syns till vänster och till höger visas datorns rättning i form av svarta, vita och grå (tomma) rutor. Gissningarna matas in med siffrorna 1 till 6 och varje siffra har sin färg.



Hur kommer vi dit från ett tomt kalkylark? Vi börjar med att sammanfoga raderna två och två i kolumn A till E. Markera A1 till E2 och välj Format > Sammanfoga celler > Sammanfoga vertikalt. Upprepa samma med A3 till E4 osv. ner till A19 till E20.

Vi gör det enkelt för oss och numrerar färgerna från 1 till 6. Med litet villkorlig formatering kan vi färgsätta arket också utan egentlig programmering. På den här skärmbilden syns inte färgsättningen för färg 6 men det är bara att göra likadant och välja en egen färg. Markera cellerna A1 till D20 och välj Format > Villkorsberoende formatering för att ställa in färgerna.
För att styra inmatningsalternativen i cellerna använder vi menyn Data > Validering. Förutom siffrorna 1 till 6 tillåter vi så klart att en cell är tom, därav första kommatecknet i listan med objekt. Markera A1:D20 igen och lägg in följande valideringsregel:
Varifrån kommer graderingen av ett svar, kolumn F och G längst till höger? Kolumn E ger en ledtråd. I Mastermind är facit för en gissning alltid ett antal svarta, vita och tomma markeringar.


Rättningskolumnerna F och G använder villkorlig formatering beroende på kolumn E. Funktionen MID plockar ut en del av textsträngen; i exemplet ovan är det första tecknet i E1 som avgör vilken färg F1 ska ha. Vi använder regeln att kolumn E innehåller betyget på vår gissning med B för svart, W för vit och blank för tom. Alla B först, alla W sedan och till slut blanka.

Exemplet i bilden visar gissningen 1124 när det rätta svaret är 1234. Därför blir F1 svart, G1 vit och resten gråa med följande villkor. Markera F1:G20 och välj sedan Format > Villkorsberoende formatering:
Så här långt kan vi manuellt testa att vår spelplan fungerar. Det betyder
  • att färgsättningen är rätt beroende på vilka siffror vi väljer i gissningen och
  • att svarskolumnerna F och G får rätt färger beroende på kolumn E, t.ex. blank, W, BB, WWW, BBBB. Testa själv.
I del 2 fortsätter vi med spelreglerna. Ses där!