Lär dig programmera spel – del 2 – for-loopen

Hej och välkomna till del två i Tomas Heeds programmeringsskola för nybörjare™. Det är här jag försöker lära mina barn hur man programmerar spel i Javascript och HTML. Förra lektionen gick vi igenom allting om hur man gör sprites och gubbar som rör sig. Följ med i veckans lektion där du lär dig programmera spel med for-satser. Vi ska till och med gå så långt att vi gör ett forspel.

Nej, prickarna i url’en har inte trillat bort. Det är ett forspel och inget annat.

For-loopen

Inom programmeringen så finns det ett antal fundamentala byggblock.Idag ska vi prata om ett av de viktigaste – For-loopen.Med en for-loop kan man få programmet att göra en sak flera gånger.

for(var i = 0; i < 5; i++){
   console.log(i + '-ditt namn- är bäst!')
}

Ovanstående snutt kommer att skriva ut att du är bäst 10 gånger i webbläsarens console. Console’n är en litet utrymme i developer tools som man får fram i de flesta webbläsare genom att trycka på knappen F12.

Testa nu vettja! Tryck på F12, leta rätt på tabben Console och kopiera in texten ovan. Tryck på Enter för att köra. Glöm inte att skriva i ditt namn!

Hur fungerar en for-loop?

Om vi tittar lite närmare på for-loopen så har den tre kommandon i sig.

for( Initiering; Villkor för att fortsätta; Uppräkning)

Initiering: Här skapar man upp en tillfällig variabel som har en livslängd som varar så länge for-loopen körs. Det kan vara en sträng eller vad som helst, men i 99 % av fallen är det ett heltal (som kallas int, eller integer på programmeringsspråk). Deklarationen var i exemplet gör att variabeln automatiskt får datatypen int.

Villkor att fortsätta: Här berättar man för for-loopen hur länge den ska köra. Så länge villkoret för att fortsätta är uppfyllt så kommer loopen att snurra. Här gäller det att man skriver rätt, för om villkoret aldrig blir uppfyllt så kommer for-loopen aldrig att sluta snurra.

Uppräkning: Här är ett kommando som körs varje gång for-loopen har kört ett varv. Uppräkningen sker innan man kollar om villkoret att fortsätta är uppfyllt. Oftast räknar man upp värdet som man initierade i Initieringen och som också är en del av villkoret, men uppräkningen kan göra någonting helt annat som till exempel att lägga på utropstecken på slutet av en sträng.

Så vårat exempel ovan:

for(var i = 0; i < 5; i++)

betyder

for (börja räkna från noll, vänta tills vi har räknat till 5, räkna upp);

Vill man skoja till det med for-satsen kan man till exempel skriva såhär. Vi skippar initieringen helt och lägger på utropstecken på en sträng tills den är 30 tecken lång.

var s = '-ditt namn- är bäst';
   for(; s.length < 30; s=s+'!');
console.log(s);

Break och continue

Ibland kan man vilja avbryta en for-loop lite tidigare Då använder man kommandot break. Break gör så att villkoret anses vara uppfyllt fast det inte är det. Följande kod skriver bara ut texten tre gånger.

for(var i = 0; i < 5; i++){ 
   if(i >= 3) break;
   console.log(i + '-ditt namn- är bäst!')
}

Man kan också få loopen att hoppa vidare till nästa iteration genom att skriva continue. (Notera att jag har vänt på logiken här, vi räknar ner från 5 till 0). Följande kod skriver ut texten fyra gånger, Värdet 2 skrivs inte ut.

for(var i = 5; i > 0; i--){
   if(i == 2 ) continue;
   console.log(i + '-ditt namn- är bäst!')
}

Lär dig programmera spel – forspelet

När vi kommit såhär långt brukar ungarna säga till mig att jag ska sluta tjata. Så, låt oss titta på forspelet.

Den som har spelat det fantastiska brädspelet RoboRally kan räkna ut vad forspelet går ut på. Ungarna och jag har ritat varsin Pacman-figur. Ditt jobb är att hjälpa Pacman-figuren att komma fram till pokalen genom att programmera for-loopar. Lyckas du så kommer du att få en visuell överraskning!

Det grå plusset längst till vänster lägger till en ny rad. Tryck på en av pilarna en eller flera gånger för att flytta Pacman-figuren ett visst antal steg. Du kan även ändra hur många steg figuren flyttar sig med plus- och minusknappen längst till höger.

Tryck på Go-knappen för att testa om du har valt rätt väg. Du kan försöka hur många gånger du vill.

Lycka till!