如何在p5.js找深色圆形游戏中检测点击错误圆形？

步骤1：添加全局状态变量 #

先在代码顶部声明全局的生命值变量，同时把原来隐式全局的变量显式声明，避免污染全局作用域：

let circles = [];
let circleNum = 50;
let r, g, b;
let lives = 3; // 初始生命值

步骤2：修正目标圆形的颜色（符合游戏逻辑） #

原来的代码里所有圆形颜色一致，需要让目标圆形颜色更深，修改setup里最后绘制目标圆形的代码：

// 把原来的fill(r, g, b, 200)改成
fill(r, g, b, 255); // 更高的不透明度，颜色更深
ellipse(circles[circleNum].x, circles[circleNum].y, circles[circleNum].r*2, circles[circleNum].r*2);

步骤3：实现错误点击检测与生命值扣除 #

修改mousePressed函数，先判断是否点击正确目标，若未命中则检查是否点击了错误圆形，若是则扣除生命值，同时处理游戏结束逻辑：

function mousePressed() {
  // 检查是否点击正确目标
  const targetCircle = circles[circleNum];
  if (dist(mouseX, mouseY, targetCircle.x, targetCircle.y) < targetCircle.r) {
    setup(); // 重置进入下一轮
    return;
  }

  // 检查是否点击了错误圆形
  for (let i = 0; i < circleNum; i++) {
    const currentCircle = circles[i];
    if (dist(mouseX, mouseY, currentCircle.x, currentCircle.y) < currentCircle.r) {
      lives--;
      // 生命值为0时触发游戏结束
      if (lives <= 0) {
        alert("游戏结束！");
        // 重置生命值并重新开始
        lives = 3;
        setup();
      }
      return; // 只扣除一次生命值，避免重复判定
    }
  }
}

步骤4：添加生命值显示（可选） #

可以在draw函数里显示当前生命值，让玩家直观看到剩余生命：

function draw() {
  // 每次绘制前清除顶部区域显示生命值
  fill(255);
  rect(0, 0, width, 30);
  fill(0);
  textSize(20);
  text(`生命值: ${lives}`, 10, 25);
}

完整修改后的代码 #

let circles = [];
let circleNum = 50;
let r, g, b;
let lives = 3;

function setup() { 
  createCanvas(600, 450);
  background(255);
  circles = [];

  r = random(0, 240)
  g = random(0, 240)
  b = random(0, 240)
  
  while (circles.length != circleNum+1) {
    noStroke();
    
    let overlapping = false;
    
    const circle = {
      x: random(width),
      y: random(height),
      r: 20
    }
    
    for (let j = 0; j < circles.length; j++) {
      const prev = circles[j];
      const circlesDist = dist(circle.x, circle.y, prev.x, prev.y);
      
      if (circlesDist < circle.r + prev.r) {
        overlapping = true;
      } else if (circle.x < circle.r || circle.x > width - circle.r) {
        overlapping = true;
      } else if (circle.y < circle.r || circle.y > height - circle.r) {
        overlapping = true;
      }
    }
    
    if (!overlapping) {
      circles.push(circle);
    }
  }
  
  // 绘制普通圆形
  for (let i = 0; i < circleNum; i++) {
    fill(r, g, b, 200);
    ellipse(circles[i].x, circles[i].y, circles[i].r*2, circles[i].r*2);
  }
  
  // 绘制颜色更深的目标圆形
  fill(r, g, b, 255);
  ellipse(circles[circleNum].x, circles[circleNum].y, circles[circleNum].r*2, circles[circleNum].r*2);
}

function draw() {
  // 显示生命值
  fill(255);
  rect(0, 0, width, 30);
  fill(0);
  textSize(20);
  text(`生命值: ${lives}`, 10, 25);
}

function mousePressed() {
  const targetCircle = circles[circleNum];
  // 点击正确目标，重置游戏
  if (dist(mouseX, mouseY, targetCircle.x, targetCircle.y) < targetCircle.r) {
    setup();
    return;
  }

  // 点击错误圆形，扣除生命值
  for (let i = 0; i < circleNum; i++) {
    const currentCircle = circles[i];
    if (dist(mouseX, mouseY, currentCircle.x, currentCircle.y) < currentCircle.r) {
      lives--;
      if (lives <= 0) {
        alert("游戏结束！");
        lives = 3;
        setup();
      }
      return;
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>

内容的提问来源于stack exchange，提问作者armput