De gameloop

Games en andere interactieve applicaties worden vaak aangedreven door een zogenaamde gameloop. Dit is een oneindige lus die de volgende stappen doorloopt:

graph TB
    A((start))
    B[Input verwerken]
    C[Spelwereld updaten]
    D[Spelwereld tekenen]
    E[Wachten]
    A --> B
    B --> C
    C --> D
    D --> E
    E --> B

Deze stappen worden herhaald totdat het spel wordt afgesloten. Merk hierbij op dat het verwerken van de input, het updaten van de spelwereld en het tekenen van de spelwereld allemaal apart van elkaar worden uitgevoerd. Als dit niet gebeurd kan het zijn dat de staat van de gamewereld niet meer klopt met wat er op het scherm wordt getoond.

In code zal de gameloop er zo uitzien:

let appel;
let ei;

function setup() {
    createCanvas(400, 400);
    appel = new Appel();
    ei = new Ei();
}

function handleInput(){
    // verwerk input van de gebruiker
    appel.handleInput();
    ei.handleInput();
}

function updateGame(){
    // update de spelwereld
    appel.update();
    ei.update();
}

function drawGame(){
    // teken de spelwereld
    appel.draw();
    ei.draw();
}

function draw() {
    handleInput();
    updateGame();
    drawGame();
}

Let op

Voorkom het volgende patroon waarbij de input, update en draw functies in elkaar verweven zijn. Het zal in het begin misschien werken maar het zal kunnen leiden tot onverwacht gedrag.

let appel;
let ei;

function setup() {
    createCanvas(400, 400);
    appel = new Appel();
    ei = new Ei();
}


function draw() {
    appel.handleInput();
    appel.update();
    appel.draw();

    ei.handleInput();
    ei.update();
    ei.draw();
}