Les 4 - Object gebruiken voor een balletje

LET OP! Deze les begint met veel leeswerk. Zorg dat je dit wel goed leest en begrijpt. Vraag om extra uitleg als dat nodig is.

Waarschijnlijk heb je in je code voor de opdracht met meerdere balletjes iets gebruikt als volgt.

... gebruiken we om aan te geven dat er op die plek wel code kan staan maar dat we dat niet op hebben geschreven.

...
var xSpeed1 = 2;
var ySpeed1 = 3;
var xBall1 = 21;
var yBall1 = 21;
var xSpeed2 = 5;
var ySpeed2 = 3;
var xBall2 = 50;
var yBall2 = 50;
var xSpeed3 = 1;
var ySpeed3 = 3;
var xBall3 = 70;
var yBall3 = 10;

...

function draw(){
  background(255);
  if (xBall1 > width - radius || xBall1 < radius){
    xSpeed1 = -xSpeed1;
  }
  if (yBall1 > height - radius || yBall1 < radius){
    ySpeed1 = -ySpeed1;
  }
  xBall1 += xSpeed1;
  yBall1 += ySpeed1;
  ellipse(xBall1, yBall1, 2*radius, 2*radius);
  ...
}
...

Voor drie balletjes gaat dit nog wel maar wat als je nou 20 balletjes wil gebruiken? Of 100? Dan wordt je code onleesbaar en een kleine verandering moet je op heel veel plekken je code gaan bijhouden. We willen graag een array of lijst gebruiken om de balletjes in op te slaan. Tot nu toe heb je alleen getallen of Strings opgeslagen in array's maar je kunt ook een heel balletje gaan opslaan en dat gaan met behulp van objecten.

Een object maken

In een object ga je dingen opslaan die bij dat object horen. Bij een balletje zijn dat bijvoorbeeld de x- en y-positie. Kijk in het voorbeeld hoe we dat doen.

class Ball{
  constructor(){
    this.xPos = 20;
    this.yPos = 30;
  }
}

We beginnen dus met class om aan te geven dat we een object maken. In de class maak je altijd een constructor()-functie. Hierin zet je dingen die je gelijk bij het maken van het object vast wilt leggen. Een soort setupfunctie dus.

Het sleutelwoord this verwijst naar het object zelf. Zo kun je onderscheid maken tussen wat we noemen de scope van een variabele. this.xPos is een variabele die alleen bestaat in het Ball-object. Dus als je de volgende code uitvoert zul je op de console een fout krijgen. De variabele xPos is niet gedefinïeerd (bestaat niet).

class Ball{
  constructor(){
    this.xPos = 3;
    this.yPos = 4;
    this.radius = 6;
}

console.log(xPos);

En als je het volgende doet dan zal je de waarde 10 zien.

xPos = 10;

class Ball{
  constructor(){
    this.xPos = 20;
    this.yPos = 30;
    this.radius = 10;
  }
}

console.log(xPos);

Wat verder belangrijk is dat het object een soort template is. Voordat je echt met het object kunt gaan werken moet je er één of meerdere 'instanties' van maken. Dit wil zeggen dat je meerdere balletjes kunt maken die allemaal een eigen xPos, yPos en radius hebben. Een object legt bepaalde eigenschappen vast. We noemen dit ook wel een type of klasse.

Het object in jouw programma

We gaan nu het voorbeeld met een balletje veranderen door een object te gebruiken. Een nieuwe instantie maak je in javascript als volgt: var ball1 = new Ball();. Als je ball1 hebt gemaakt kun je met ball1.xPos bijvoorbeeld de xPos opvragen van dit ene balletje.

See the Pen mBPaRJ by Jurjenh (@jurjenh) on CodePen.

Voor nu lijkt het alsof dit ons niet verder heeft gebracht. We hebben veel meer code moeten invoeren! Geduld. De winst komt als we meerdere balletjes gaan gebruiken later.

Bovendien hebben we pas de eerste stap gedaan. Want objecten kunnen niet alleen variabelen bevatten, maar ook methodes (functies). En dat is superhandig. We gaan nu een methode maken in het Bal-object waarmee we het balletje gaan tekenen en een methode om het balletje te bewegen.

class Ball{
  constructor(){
    this.xPos = 0;
    this.yPos = 0;
    this.radius = 1;
    this.xSpeed = 0;
    this.ySpeed = 0;
  }

  display(){
    ellipse(this.xPos, this.yPos, 2*this.radius, 2*this.radius);
  }

  move(){
    if (this.xPos > width - this.radius || this.xPos < this.radius){
      this.xSpeed = -this.xSpeed;
    }
    if (this.yPos > height - this.radius || this.yPos < this.radius){
      this.ySpeed = -this.ySpeed;
    }
    this.xPos += this.xSpeed;
    this.yPos += this.ySpeed;
  }
}

En nu komt ons programma er als volgt uit te zien.

var xSize = 600;
var ySize = 200;
var ball1;

function setup(){
  createCanvas(xSize, ySize);

  // We maken een bal aan
  ball1 = new Ball();
  ball1.xPos = 21;
  ball1.yPos = 21;
  ball1.radius = 10;
  ball1.xSpeed = 5;
  ball1.ySpeed = 3;
}

function draw(){
  background(255);
  ball1.display();
  ball1.move();
}

class Ball{
  constructor(){
    this.xPos = 0;
    this.yPos = 0;
    this.radius = 1;
    this.xSpeed = 0;
    this.ySpeed = 0;
  }

  display(){
    ellipse(this.xPos, this.yPos, 2*this.radius, 2*this.radius);
  }

  move(){
    if (this.xPos > width - this.radius || this.xPos < this.radius){
      this.xSpeed = -this.xSpeed;
    }
    if (this.yPos > height - this.radius || this.yPos < this.radius){
      this.ySpeed = -this.ySpeed;
    }
    this.xPos += this.xSpeed;
    this.yPos += this.ySpeed;
  }
}

Beginwaarden meegeven bij het maken van een object

Een laatste verbetering is dat je bij het maken van een object alvast waarden kunt meegeven aan de 'constructor()'.

var xSize = 600;
var ySize = 200;
var ball1;

function setup(){
  createCanvas(xSize, ySize);

  // We maken een bal aan
  ball1 = new Ball(21, 21, 10, 5, 3);
}

function draw(){
  background(255);
  ball1.display();
  ball1.move();
}

class Ball{
  constructor(x, y, radius, xspd, yspd){
    this.xPos = x;
    this.yPos = y;
    this.radius = radius;
    this.xSpeed = xspd;
    this.ySpeed = yspd;
  }

  ...
}

Opdracht

Maak zelf een stuiterend balletje waar je ook de kleur kunt instellen, met behulp van een object.

Opdracht

Herschijf je opdracht voor drie balletjes. Maak nu gebruik van een Bal-object.

Les 4 - Object gebruiken voor een balletje