p5.js 中椭圆上的单击事件

Question

我正在尝试使用 p5js 制作一个小游戏，同时进一步了解 javascript，所以我想在点击这些移动的圆圈时检测点击事件，但我觉得我有点被困在这里了。同时这是我的代码： ps：抱歉这个菜鸟问题


function setup() {
  createCanvas(400, 400);

}

function draw() {
  background(51);
  // let x = random(width);

  let x = map(noise(xoff), 0, 1, 0, width);

  xoff += 0.01;
   this.r= 50;
    let bubble= ellipse(x, 100, r*2);
   let bubble2= ellipse(x, 200, r*2);
    let bubble3= ellipse(x, 300, r*2);
    



}
  

  function clicked(){
     
 let d = dist (mouseX, mouseY, x, 200);
    if (d<this.r){
 console.log('clicked on buubble');
    }

  }```

Answer 1

也许你想先用一个泡泡试试。最终应该有一个气泡 class 来创建多个气泡实例。

利用 mousePressed 函数检测点击 (https://p5js.org/reference/#/p5/mousePressed)。

这里有一个气泡的例子：

let xoff = 1;
let r = 50;
let bubbleX;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(51);
  bubbleX = map(noise(xoff), 0, 1, 0, width);
  xoff += 0.01;
  ellipse(bubbleX, 200, r * 2);
}


function mousePressed() {
  let d = dist(mouseX, mouseY, bubbleX, 200);
  if (d < r) {
    console.log('clicked on bubble');
  }
}

希望这有助于朝着正确的方向前进。

p5.js 中椭圆上的单击事件

click event on an ellipse in p5.js

javascript

canvas

p5.js