我如何重新绘制游戏中的生命计数

Question

我正在制作一个游戏，您尝试从一组随机放置的圆圈中单击较暗的圆圈。当您单击正确的圆圈时，它会重新随机化。当您单击不正确的圆圈时，它应该会减少生命数并重新绘制它，但实际上是最初绘制并且不更新。当你点击 3 个错误的圆圈时，它会清除所有内容（并会显示“你死了”屏幕），但当你点击正确的圆圈时，只会清除未更新的生命计数，但生命系统仍然有效。

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();
    }
  }
}

Answer 1

请您提供更明确的步骤来说明您希望程序执行的操作。到时候我就能帮忙了。代码看起来不错，当我明白你想要什么时，我将能够帮助你。