Beispiel Treffer zählen

Programm im Editor öffnen

Quellcode ohne Kommentar

let xPos, yPos, seitenlaenge;
let punkte;

function setup() {
  createCanvas(300, 300);
  xPos = width / 3;
  yPos = height / 3;
  seitenlaenge = 100;
  punkte = 0;
}

function draw() {
  background(0, 205, 102);
  rect(xPos, yPos, seitenlaenge);
  textAlign(CENTER);
  textSize(20);
  text("Punkte: " + str(punkte), width/2, height-50);
}

function mousePressed() {
  background(0, 205, 102);
  
  if (mouseX > xPos &&
      mouseX < xPos + seitenlaenge &&
      mouseY > yPos &&
      mouseY < yPos + seitenlaenge) {
    punkte = punkte + 1;  
  }
  
}

Quellcode mit Kommentar

// Position und Seitenlänge des Quadrates:
let xPos, yPos, seitenlaenge;
// Punktezähler:
let punkte;

function setup() {
  createCanvas(300, 300);
  // Eigenschaften des Quadrates festlegen, Punktezähler auf 0 setzen:
  xPos = width / 3;
  yPos = height / 3;
  seitenlaenge = 100;
  punkte = 0;
}

function draw() {
  background(0, 205, 102);
  rect(xPos, yPos, seitenlaenge);
  textAlign(CENTER);
  textSize(20);
  // Punkestand zeichnen:
  text("Punkte: " + str(punkte), width/2, height-50);
}

function mousePressed() {
  background(0, 205, 102);
  
  // Wenn der Mauszeiger innerhalb des Quadrates steht...
  if (mouseX > xPos &&
      mouseX < xPos + seitenlaenge &&
      mouseY > yPos &&
      mouseY < yPos + seitenlaenge) {
    // ... Erhöhe den Punktestand um 1:
    punkte = punkte + 1;  
  }
  
}