ToPlayer

Skrevet av: Ruben Gjerstad Eide og Kine Gjerstad Eide

Kurs: Processing
Tema: Tekstbasert
Fag: Matematikk, Programmering
Klassetrinn: 8.-10. klasse, Videregående skole
Til lærerveiledningLast ned PDF

Introduksjon:

Nå skal vi lage et spill som to personer kan spille mot hverandre. Vi har kalt det ToPlayer, men du kan kalle det hva du vil. Målet er å dytte en figur, eller en spillebrikke ut av vinduet på motstanderen sin side. Spillet ser ganske enkelt ut, men du kan etter hvert pimpe det opp som du vil. Når du har kommet deg gjennom hele denne oppgaven skal spillet ligne på bildet under. Du får bestemme farger og litt annet selv, så det vil avhenge av hva du liker.

Bilde av to player spiller

Steg 1: Kom i gang med metodene setup og draw

Start med å åpne Processing. Når det er gjort, så må du skrive to metoder. Alle metoder har sitt eget navn, og to metoder kan ikke hete det samme. De to metodene du skal skrive er setup og draw. Bortsett fra metodenavnet, så skrives de på akkurat samme måte. Derfor viser vi deg hvordan du skal skrive setup-metoden, og så må du selv forsøke å skrive draw-metoden.

Slik ser setup-metoden ut:

void setup(){

}

checkGjør dette:

  • Bilde av play knappen

Dersom programmet kjører og alt er i orden så vil det dukke opp et nytt bitte lite vindu på skjermen din. Dersom du fikk opp vinduet, så er det bare å gå videre til steg 2. Dersom ikke, så kan du sjekke at du har fått med alle detaljene i koden din, ved å sammenligne med koden under.

  void setup(){

  }

  void draw(){

  }

Lagre koden din før du går videre.

Forklaring av setup og draw

Alt innholdet i setup skjer én gang når programmet starter, deretter går programmet videre til draw. Alt innholdet i draw skjer på nytt og på nytt helt til programmet stopper.

Steg 2: Bestem størrelse og bakgrunnsfarge på vinduet

Nå er det størrelsen på vinduet og bakgrunnsfargen som skal kodes. For å gjøre det, trengs bare to kodelinjer. Begge skal skrives inn i setup-metoden. Å skrive kode inni en metode vil si at vi skriver mellom krøllparentesene, altså mellom disse to: { og }.

Størrelsen bestemmes ved å skrive denne kodelinja:

  size(200, 600);

Tallene mellom parentesene bestemmer størrelsen på vinduet.

Koden som bestemmer bakgrunnsfargen ser slik ut:

  background(40, 150, 255);

Tallene inni parentesene bestemmer fargen.

Her er en sjekkliste med ting du kan gjøre for å sjekke at du forstår koden din. For hvert punkt må du starte programmet og se hva som endrer seg. Det er viktig at du har forståelse for koden din før du går videre til neste steg.

checkSjekkliste

Kjør programmet ditt og sjekk at du får vinduet til å vises før du går videre. Her er koden vi har laga så langt, husk at dine tall kanskje er litt forskjellig fra våre tall.

  void setup(){
    size(800, 500);
    background(40, 150, 255);
  }

  void draw(){

  }

Steg 3: Spillbrikke

Vi skal lage spillbrikka, deretter skal vi gjøre slik at den kan bevege seg.

Her er koden som skal brukes:

  fill(30, 230, 100);
  ellipse(400, 250, 50, 50);

checkGjør dette:

Nå skal vi gjøre slik at ellipsen er klar til å bevege seg sidelengs. Som du sikkert har funnet ut, så bestemmer det første tallet i parentesen hvor ellipsen står plassert sidelengs. Vi ønsker å gjøre dette tallet til en variabel, altså til et tall som kan variere.

For å får det til, så deklarerer vi variabelen helt i toppen av programmet vårt (utenfor setup- og draw-metodene). Dette gjør vi ved å skrive denne kodelinja:

  int x;

Denne lille koden er ganske enkel, int forteller PC-en at vi skal ha et heltall, og x er navnet vi har valgt å gi tallet vårt. Vi kunne kalt tallet noe helt annet som pute eller boks.

Vi må gi x en verdi som den har til å begynne med, det gjør vi inni setup metoden. Alt vi trenger å skrive er dette:

  x = 90;

Så må vi bytte ut det første tallet i parentesen til ellipse med x. Da ser koden for ellipse slik ut:

  ellipse(x, 250, 50, 50);

checkGjør dette:

Her er koden vi har laga så langt.

  int x;

  void setup(){
    size(800, 500);
    x = 400;
  }

  void draw(){
    background(40, 150, 255);
    fill(30, 230, 100);
    ellipse(x, 250, 50, 50);
  }

Steg 4: Lag kontrollere!

Nå skal vi lage en if-setning som registrerer om du trykker på en knapp.

Skriv denne koden inni draw-metoden etter ellipsa:

if(keyPressed && key == 'a'){
  x+=10;
}

Denne koden skal gjøre slik at dersom man har trykka på en knapp og den knappen er a, så skal x, altså plasseringen til ellipsa vår, flytte seg 10 piksler til høyre.

Forklaring av if

En if-setning sjekker om noe er sant. Dersom det er sant, så skjer det som står inni if-setningen. En if-setning er bygd opp av en test og så noe som blir utført:

if(test){
  her utføres noe bare dersom testen er sann.
}

If-tester er lette å sette opp som muntlige setninger og så gjøre dem om til kode etterpå. Vi skriver det på samme måte som en ordentlig if-setning, slik at det er lett å gjøre om til kode. Inni if-setningen har vi kommet med noen eksempler.

Dersom ( et eller annet er sant) så skal dette skje{
  vi får mer liv
  vi hopper,
  noe flytter på seg,
}

Noe som er vanlig å sjekke i en if-setning er om man har trykka på en spesiell knapp, eller om datamusa er innenfor et bestemt område. Eller man kan sjekke hvor mange liv man har igjen, og dersom det er 0 så kan man skrive "GAME OVER".

Når vi skriver if-setningen vår med ord blir det slik:

Dersom (man trykker en knapp og knappen er 'a') så skal dette skje{
  ellipsen skal bevege seg til høyre;
}

Vi forsøker å gjøre setningen mer lik kode:

dersom ( enKnappErPressaNed og knappen er lik 'a'){
  så skal x bli 10 større;
}

Så gjør vi det til kode:

if(keyPressed && key == 'a'){
  x+=10;
}

checkPrøv dette

Dersom ikke koden din fungerer helt som den skal, så kan du sjekke her hva som er feil.

  int x;

  void setup(){
    size(800, 500);
    x = 400;
  }

  void draw(){
    background(40, 150, 255);
    fill(30, 230, 100);
    ellipse(x, 250, 50, 50);

    if(keyPressed && key == 'a'){
      x+=10;
    }

    if(keyPressed && key == 'l'){
      x-=10;
    }
  }

Steg 5: Vi trenger en vinner!

Vi trenger flere if-setninger, disse skal skrive en beskjed på skjermen hvis en spiller vinner. Man vinner med å dytte ellipsen ut av skjermen.

Her er if-setningen som trengs for å sjekke om venstre spiller har vunnet. Denne skal skrives under de to forrige if-setningene:

  if(x > 800){
    text("Venstre spiller vant!", 350, 200);
  }

checkPrøv dette

Her er hele koden, sjekk om din er lik.

  int x;

  void setup(){
    size(800, 500);
    x = 400;
  }

  void draw(){
    background(40, 150, 255);
    fill(30, 230, 100);
    ellipse(x, 250, 50, 50);

    if(keyPressed && key == 'a'){
      x+=10;
    }

    if(keyPressed && key == 'l'){
      x-=10;
    }

    if(x > 800){
      text("Venstre spiller vant!", 350, 200);
    }

    if(x < 0){
      text("Høyre spiller vant!", 350, 200);
    }
  }

Lisens: CC BY-SA 4.0

Forbedre denne siden

Funnet en feil? Kunne noe vært bedre?

Hvis ja, vennligst gi oss tilbakemelding ved å lage en sak på Github eller fiks feilen selv om du kan. Vi er takknemlige for enhver tilbakemelding!