Javascript functies en objecten¶

Als je in javascript verder gaat met je game, wil je code kunnen hergebruiken. Bijvoorbeeld als je dezelfde (complexere) dingen wilt tekenen. Ook als je met meerdere onderdelen van je game werkt (zoals een SpaceShip, Bullets en Aliens), is het handig om dit beter te organiseren dan allemaal losse variabelen. Dit is fijn voor je eigen overzicht, maar maakt dingen ook makkelijker her te gebruiken.

Javascript functies¶

Korte uitleg met voorbeeld¶

Javascript functies heb je met P5js al gebruikt de setup() en draw() functies die je hebt gemaakt worden automatisch uitgevoerd door de P5js library. Je kunt ook zelf functies met eigen namen maken en die vervolgens zelf aanroepen op een andere plek in je code.

Bijvoorbeeld:

functionExample.js
function drawThreeCircles(x, y, diameter) { //(1)
  circle(x-50, y, diameter);
  circle(x, y, diameter);
  circle(x+50, y, diameter);
}

function setup(){
  createCanvas(200, 400);
  background(0);
  fill('white');
  noStroke();
}

function draw() {
  drawThreeCircles(100, 100, 20); //(2)
  drawThreeCircles(100, 200, 30);
  drawThreeCircles(100, 300, 40);
}

Deze regel maakt een functie met naam drawThreeCircles die de parameters x, y, en diameter accepteert.
Hier wordt de functie aangeroepen waarbij x = 100, y = 100 en diameter = 20 wordt meegegeven als parameters aan de functie.

Output:

Function bronnen¶

Objecten¶

Objecten gebruik je om variabelen en functionaliteit die logisch bij elkaar te groeperen. In games zijn de spelonderdelen die je op het scherm ziet vaak logische onderwerpen om ook in je code objecten van te maken. Denk hierbij aan je speler, kogels, vijanden.

Constructorfunctie¶

Eén manier om objecten te maken die alleen werkt in javascript is een zogenoemde constructorfunctie. Een constructorfunctie is hetzelfde als een functie maar met twee andere details. Er worden variabelen toegevoegd aan het this-object. En de functie wordt aangeroepen met het woord new. Vaak worden parameters meegegeven die de waarden van de variabelen op het this-object bepalen. Deze manier wordt gezien als de oude manier van het aanmaken van objecten. Toch is dit niet fout en kom je het nog vaak tegen in oude tutorials.

constructorExample.js
function Bullet(x, y) { //(1)
  this.x = x; //(2)
  this.y = y;
}

var b1 = new Bullet(100, 100); //(3)
var b2 = new Bullet(200, 100); //(4)

print(b1.x); //(5)
print(b2.x); //(6)

Definitie van een constructor-functie. Let op de hoofdletter B. De hoofdletter is niet verplicht maar wel een conventie (afspraak) om aan te geven dat het om een constructor gaat in plaats van een gewone functie.
Parameter x en y worden aan het object gegeven door ze aan this.x en this.y toe te wijzen.
Er wordt een nieuw object gemaakt met behulp van het woord new. Het object wordt in de variabele b1 gestopt.
Hier wordt weer een nieuw object gemaakt, maar er worden andere waarden meegegeven voor x en y.
Output in de console zal 100 zijn.
Output in de console zal 200 zijn.

In de inleiding werd gesproken over het groeperen van variabelen én functionaliteit. Om dit voor elkaar te krijgen kun je ook functies aan objecten toevoegen. In javascript kun je functies aan variabelen toekennen. In de constructor-functie wordt hiervan gebruik gemaakt. Een functie op een object wordt ook vaak een methode genoemd.

constructorMethodExample.js
function Bullet(x, y) {
  this.x = x;
  this.y = y;

  this.update = function() {
    this.y = this.y - 10;
  }

  this.draw = function() {
    rect(this.x, this.y, 3, 5);
  }
}

Bronnen constructorfunctie¶

Coding train constructor functions

Javascript classes¶

Een andere manier om objecten te maken zijn classes, of klassen in het Nederlands. Dit is een recente toevoeging aan javascript. Klassen werken in het gebruik net zoals een constructorfunctie als ze eenmaal zijn gemaakt. Javascript klassen worden ook wel eens ES6 classes genoemd. Het volgende voorbeeld is de vertaling van de Bullet constructor in een klasse.

classExample.js
class Bullet {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  update() { //(1)
    this.y = this.y - 10;
  }

  draw() {
    rect(this.x, this.y, 3, 5);
  }
}

var b1 = new Bullet(100, 100);
var b2 = new Bullet(200, 100);

print(b1.x);
print(b2.x);

Een voordeel is dat je bij het aanmaken van methodes geen this. hoeft te gebruiken.

Veel mensen vinden klassen beter leesbaar dan constructorfuncties. In andere programmeertalen zijn, zoals C#, zijn klassen heel gebruikelijk.

Javascript class bronnen¶

Last update: December 9, 2022