Les 7 - Invoer van de gebruiker en tijd

We gaan een object maken voor jouw speler en zorgen dat je deze met het toetsenbord kunt besturen. Dit doe je met onder andere de keyIsDown()-functie. Deze functie geeft als resultaat true als de toets ingedrukt is op het moment van controleren (en false als dat niet zo is natuurlijk :).

class Player {
  constructor(){
    this.playerHeight = 40;
    this.playerWidth = 10;
    this.radius = 20;
    this.xpos = width/2;
    this.ypos = height/2;
    this.speed = ysize/100;
  }

  display() {
    fill(255, 0, 0);
    // Onze prachtige speler
    ellipse(this.xpos, this.ypos, 2*this.radius, 2*this.radius);
  }

  move() {
      // Pas op dat je speler hiermee uit het veld kan lopen!
      // Pas de code aan zodat dat niet kan gebeuren
      if (keyIsDown(UP_ARROW)){
        player.ypos -= this.speed;
      } else if (keyIsDown(DOWN_ARROW)){
        player.ypos += this.speed;
      } else if (keyIsDown(LEFT_ARROW)){
        player.xpos -= this.speed;
      } else if (keyIsDown(RIGHT_ARROW)){
        player.xpos += this.speed;
      }
  }
}

Deze move() functie moeten we ook weer iedere keer dat we de loop doorlopen aanroepen.

Daarnaast kun je ook een functie laten uitvoeren als er een toets wordt gebruikt. Dit doe je met de functie keyPressed(). Je zou ook je speler hiermee kunnen laten bewegen maar dan moet je steeds je pijltjestoets opnieuw indrukken om de speler te laten bewegen. Voor andere functies is het natuurlijk wel prima. Je krijgt altijd de hoofdletterversie van een toets. Dus ook al druk je op 'q', dan is de waarde van key gelijk aan 'Q'.

function keyPressed(){
  if(key === 'Q'){
    // Stop het spel
  }

  // Gebruik keyCode als je speciale karakters nodig hebt
  if(keyCode === SHIFT){
    // Iets shiftigs
  }
  return false;
}

Tijd en text

We kunnen in P5 ook met tijd werken. Met timeStart = millis(); krijg je de tijd in milliseconden en sla je die op in een variabele. Als je verderop weer millis() gebruikt en daar je starttijd vanaf haalt, dan weet je hoe lang er gespeeld is.

Maar hoe krijgen we dat netjes op het scherm? Met text().

text("String met text", xPos, yPos)