使用p5.js制作圆形游戏时无法正确识别鼠标点击位置

问题根源 #

你之前用mouseX/mouseY的坐标范围判断点击区域，本质是在判定是否点击了圆的外接正方形，而非圆形本身；如果逻辑写反或混淆了p5.jscircle()函数的参数（直径/半径），就会出现点击圆内却提示圆外的错误。

正确判断逻辑 #

用欧几里得距离公式：计算鼠标点击点到圆心的距离，当距离小于等于圆的半径时，判定为点击圆内。为提升性能，可直接用距离平方代替距离（避免开根号运算，结果等价）。

代码修改示例 #

1. 更新condition1.js的判断函数 #

// condition1.js
function isInsideCircle(cx, cy, radius) {
  // 计算鼠标与圆心的横向、纵向差值
  const dx = mouseX - cx;
  const dy = mouseY - cy;
  // 计算距离平方与半径平方（无需开根号，结果等价）
  const distanceSq = dx * dx + dy * dy;
  const radiusSq = radius * radius;
  
  // 返回是否在圆内（含边缘）
  return distanceSq <= radiusSq;
}

2. 修正sketch.js的调用逻辑（注意圆的直径/半径对应） #

// sketch.js
let centerX, centerY, circleRadius;

function setup() {
  createCanvas(400, 400);
  centerX = width / 2;
  centerY = height / 2;
  circleRadius = 100; // 定义圆的半径
}

function draw() {
  background(220);
  // p5.js的circle函数第三个参数是直径，所以传入半径*2
  circle(centerX, centerY, circleRadius * 2);
}

function mousePressed() {
  const isInside = isInsideCircle(centerX, centerY, circleRadius);
  if (isInside) {
    alert("点击了圆内");
  } else {
    alert("点击了圆外");
  }
}

关键注意事项 #

• 别混淆p5.jscircle()的参数：第三个参数是直径，不是半径！如果判断逻辑用的是半径，画圆时必须传入radius * 2，否则实际显示的圆半径会比判断用的小一半，导致点击实际圆内区域被误判为圆外。
• 用距离平方替代距离计算，既能保证判断准确，又能避免Math.sqrt()带来的性能损耗，是图形判断的通用优化技巧。

验证方法 #

测试以下区域确认效果：

• 圆的中心：应提示“点击了圆内”
• 圆的边缘：应提示“点击了圆内”
• 圆的外接正方形角部（圆外区域）：应提示“点击了圆外”

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