📘 Situatie

Een developer heeft een mini-game gemaakt: een speler beweegt over het scherm en moet een “coin” oppakken.

Maar… de coin wordt soms onzichtbaar, teleporteert of wordt nooit opgepakt.

De duo's moeten ontdekken welke 3 bugs erin zitten, waarom ze gebeuren en hoe ze op te lossen.

🎮 De mysterieuze p5.js-code

De studenten krijgen deze code:

let playerX = 50;
let playerY = 50;
let coinX;
let coinY;
let score = 0;

function setup() {
  createCanvas(400, 400);
  coinX = random(width);
  coinY = random(height);
}

function draw() {
  background(30);

  // Player
  fill(0, 200, 255);
  rect(playerX, playerY, 30, 30);

  // Coin (soms onzichtbaar)
  if (frameCount % 120 == 0) {
    coinX = random(width);
    coinY = random(height);
  }

  fill(255, 220, 0);
  ellipse(coinX, coinY, 20);

  // Movement
  if (keyIsDown(LEFT_ARROW))  playerX -= 2;
  if (keyIsDown(RIGHT_ARROW)) playerX += 2;
  if (keyIsDown(UP_ARROW))    playerY -= 2;
  if (keyIsDown(DOWN_ARROW))  playerY += 2;

  // Collision check (werkt niet goed!)
  if (dist(playerX, playerY, coinX, coinY) < 20) {
    score++;
    coinX = random(width);
    coinY = random(height);
  }

  // HUD
  fill(255);
  text("Score: " + score, 10, 20);
}

❓ Opdracht: Vind de drie ‘Ghost Collision’ bugs

Laat duo’s 15 minuten zoeken naar deze drie problemen:

🔍 Bug 1 – De coin “verdwijnt” soms

Hint: is het raakpunt gevallen terwijl de speler er nog niet is?

🔍 Bug 2 – Collision klopt niet

Hint: De speler heeft een rect, maar collision gebruikt distance vanaf de linkerbovenhoek, niet het midden.

🔍 Bug 3 – Coin teleporteert onverwacht

Hint: willekeurig moment (frameCount % 120) = elke 2 seconden → ongewenst gedrag.

🎯 Vragen die jullie moeten beantwoorden

1. Waarom wordt de coin soms niet geraakt, terwijl je er duidelijk op staat?
2. Waarom lijkt de coin soms van het scherm te verdwijnen?