Första spelet - TRON

Vi ska nu försöka programmera vårt första spel. Spelideen grundar sig på filmen TRON (1982) i en förenklad form. Man har ett litet rektangel som rör sig hela tiden och drar ett spår bakom sig. Som spelare kan man endasy bestämma riktningen. Utmaningen är att inte korsa sitt spår eller köra in i väggen. Vinnaren är vem som håller ut längst. Här ett exempel hu det kan se ut. Men det är fritt fram ge spelet din egel prägel eller länger till en twist. Förslag på det finns längst ner på sidan.

Utgångspunkten är det som ni skulle laborera fram i kapitlet interaktion laboration 1.3

EXEMPEL TRON


Innan man börja koda är bra att sätta sig med pen och papper och fundera över alla delar som ingår i spelet. Spelet har tre block och behöver ett antal variabler. Försök at beskriva med vanliga meningar vad som pågår i den olika block. Enklast är förmodligen att fundera över händelser i draw()-blocket dvs loopen som utförs c:a 60 gånger per sekund:

Ta den här tabellen till hjälp. Vi har redan lagt in ett par uppenbar nödvändiga saker:

Variabler setup() draw() keyPressed()
x, y, points



fönsterstorlek rita rektangel (5x5) beroende på x och y

Läsa färgen på skärmen

Ett litet exempelprogram som visa hur färgen läsas på en viss koordinat. Färgläsningen händer i exemplet direkt när musen rör sig, se void mousMoved(){ , det krävs inga musklick. Det gör vi genom instruktionen frgTal = get( mouseX, mouseY ); (rad 33) . Variabeln fgrTal laddas men ett heltal som beskriver färgen. På samma sätt som vi sätta ihop en färg av tre komposanter kan vi läsa hur röd, grön och blå det finns i färgen. (rad 34-36).

```

//Variabler
int r,g,b;
float rd, grn, bl; 
void setup(){
size(500,500);
textSize(20);
background(98,18,18);

//rita 8x8 kakelvägg med slumpvalda färger
for(int x = 50;x <= 400; x += 50){
     for(int y = 50;y <= 400; y += 50){
        r = (int) Math.round(Math.random()*255 );
        g = (int) Math.round(Math.random()*255 );
        b = (int) Math.round(Math.random()*255 );
        fill(r,g,b);
        rect(x,y,48,48);
     }
  }
}


void draw(){

  fill(0);
  rect(50,10,400,30,5);
  fill(200);
  text("Röd: " + rd + " | Grön: " + grn + " | Blå: " + bl , 60,32);

}

void mouseMoved(){

  int frgTal = get(mouseX,mouseY);
  rd = red( frgTal );
  grn = green( frgTal );
  bl = blue( frgTal );

}

void keyPressed(){
  if(key == 'n') { setup(); }
}

```

Vi behöver denna kunskap för att kunna av göra om man har kört på sitt eget spår eller väggen måste man kunna läsa vilken färg det är på en viss pixel.

Ytterligare utmaningar

Om du har ett fungerande spel som liknar det ovan kan du ger dig i kast med ett par utmaningar:

- "Börja om"-knapp och Highscore.
- Hjälp till spelaren: Gör det omöjligt att byta direkt höger-vänster eller upp-ner. 
- Möjlighet till paus men som kosta poäng.
- Utöka spelet att två kan spela.
- Att spelet blir svårare efter en stund. 
- Ett fiende som jagar dig (skitsvårt!)
- En robotdammsugare som suddar en del av spåret.