I’m making a game in which you try to click the darker circle from a group of randomly placed circles. When you click the correct circle, it re-randomizes it. When you click the incorrect circle, it’s supposed to decrease the lives count and redraw it but instead, draws initially and doesn’t update. When you click 3 wrong circles, it clears everything (and will display a “you died” screen) but when you click the right circle, just clears the non-updating lives count but the lives system still works.
const circlesToMake = 50;
let circles, r, g, b, lives;
function setup() {
createCanvas(600, 450);
background(32);
noStroke();
setupCircles();
drawCircles();
fill(0);
noLoop();
}
function setupCircles() {
circles = []
lives = 3;
r = random(20, 255)
g = random(20, 255)
b = random(20, 255)
while (circles.length < circlesToMake) {
const circle = {
x: random(width),
y: random(height),
r: 20,
d: 40
};
let overlapping = false;
for (let j = 0; j < circles.length; j++) {
const other = circles[j];
const d = dist(circle.x, circle.y, other.x, other.y);
if (d < circle.r + other.r) {
overlapping = true;
break;
} else if (circle.x < 0 + circle.d
|| circle.x > width - circle.d) {
overlapping = true;
break;
} else if (circle.y < 0 + circle.d || circle.y > height - circle.d) {
overlapping = true;
break;
}
}
if (!overlapping) {
circles.push(circle);
}
}
}
function drawCircles() {
clear();
circles.forEach(c => {
fill(r, g, b, 200); ellipse(c.x, c.y, c.r * 2, c.r * 2);
});
fill(r, g, b, 220); // make the target easy to identify for development purposes
const target = circles[0];
ellipse(target.x, target.y, target.r * 2, target.r * 2);
}
function youDied() {
clear();
print("e");
}
function draw() {
text(`lives: ${lives}`, 20, 20);
}
function mousePressed() {
if (dist(mouseX, mouseY, circles[0].x, circles[0].y) < circles[0].r) {
setupCircles();
drawCircles();
} else {
const anyClicked = circles.some(c => dist(mouseX, mouseY, c.x, c.y) < c.r);
if (anyClicked && --lives === 0) {
youDied();
}
}
}