les 5 - conditionelen

---

Les 5 ging over conditionelen, ofwel if else structuren.

De presentatie van deze les vind je hier: Javascript les 5.pdf

In de syllabus staat een uitleg geschreven over if else structuren

En de code van deze les:

//variabelen om de positie van onze bal in op te slaan
let balX = 0;
let balY = 0;

//variabelen om de muispositie die we aanklikten op te slaan
let targetPosX = 0;
let targetPosY = 0;

//2 boolean variabelen om bij te houden of we al op de geklikte positie zijn per as
let targetReachedX = true;
let targetReachedY = true;

function setup() {
  //plaats hier de code die maar één keer hoeft te worden uitgevoerd
  createCanvas(600,600);
  background(200);
  //zet de bal in het midden
  balX = width / 2;
  balY = height / 2;

  //zet het doel standaard in het midden van het scherm
  targetPosX = width / 2;
  targetPosY = height / 2;
}

function draw() {
  //plaats hier de code die continue herhaald moet worden.
  //check of de bal positie op de x-as kleiner is dan het doel
  background(10,20,200);
  //als we de bal nog niet op de juiste x-positie hebben gezet
  if (targetReachedX === false) {
    //check of de bal links van het doel staat
    if (balX < targetPosX) {
      // console.log("De bal staat linkser dan het doel");
      //beweeg de bal naar rechts
      balX = balX + 1;
    } else {
      //anders, beweeg de bal naar links
      balX = balX - 1;
    }
  }

  //als we nog niet op de y-as op het doel zijn
  if (targetReachedY === false) {
    //en de bal is hoger dan het doel
    if (balY < targetPosY) {
      // console.log("De bal staat rechtser dan het doel");

      //beweeg de bal omlaag
      balY = balY + 1;
    } else {
      //anders, beweeg de bal omhoog
      balY = balY - 1;
    }
  }

  //als de x positie van de bal gelijk is aan de x-positie van het doel en targetReachedX was nog niet waar
  if (balX === targetPosX && targetReachedX === false) {
    console.log("X as klopt! Stop met x beweging");

    //houdt bij dat we op de X as al klaar zijn
    targetReachedX = true;
  }

  //als de y-waarde van de bal op de y-positie van het doel staat en targetReachedY nog false was
  if (balY === targetPosY && targetReachedY === false) {
    console.log("Y as klopt! Stop met y beweging");
    //houdt bij dat we op de X as al klaar zijn
    targetReachedY = true;
  }

  //teken de bal
  ellipse(balX,balY,30);
}

function mousePressed() {
  //dit wordt uitgevoerd zodra de muis ingedrukt wordt
  console.log("de muis is geklikt!");
  //zet de targetpositie gelijk aan de huidige muispositie
  targetPosX = mouseX;
  targetPosY = mouseY;
  console.log(targetPosX, targetPosY);

  //nu meoten we gaan bewegen dus zeggen we dat we op beide assen het doel nog niet bereikt hebben
  targetReachedX = false;
  targetReachedY = false;

}