1

我正在使用 p5.js 创建钢琴。我需要颜色变化方面的帮助。当用户按下一个键时，我希望该键闪烁一个快速的颜色变化，让他们知道他们按下了该键。

在我的代码中，当您单击第一个键时颜色确实会改变，但是，当我在第一个键之外单击一点时，第一个键仍然会改变颜色。

我的距离是不是有点远？或者有没有更有效的方法来做到这一点？

function setup() {
  createCanvas(990, 600);
}

function draw() {
  background(220);
  fill(255);
  rect(0, 300, 70, 400);
  rect(70, 300, 70, 400);
  rect(140, 300, 70, 400);
  rect(210, 300, 70, 400);
  rect(280, 300, 70, 400);
  rect(350, 300, 70, 400);
  rect(420, 300, 70, 400);
  rect(490, 300, 70, 400);
  rect(560, 300, 70, 400);
  rect(630, 300, 70, 400);
  rect(700, 300, 70, 400);
  rect(770, 300, 70, 400);
  rect(840, 300, 70, 400);
  rect(910, 300, 70, 400);
  fill(0);
  rect(50, 300, 38, 180);
  rect(120, 300, 38, 180);
  rect(260, 300, 38, 180);
  rect(330, 300, 38, 180);
  rect(400, 300, 38, 180);
  rect(540, 300, 38, 180);
  rect(610, 300, 38, 180);
  rect(750, 300, 38, 180);
  rect(820, 300, 38, 180);
  rect(890, 300, 38, 180);
  text("mouse x: "+mouseX+" mouse y:"+mouseY, width/2,height-30);
 }

function mousePressed() {
  cursor(HAND);

}

function mouseReleased() {
    cursor(ARROW);

let d = dist(mouseX, mouseY, 0, 300);
  if (d < 300) {
    fill(0);
    rect(0, 300, 70, 400);
  }
}
4

1 回答 1

0

您正在检查鼠标位置是否在点 0,300 的 300 像素内。这将设置一个圆心为 0,300，半径为 300 的圆。尝试在您的场景中绘制它以查看您的可点击区域在哪里。

您的键是矩形，因此您应该使用点矩形交集来检查鼠标是否在特定键内。谷歌在这里是你的朋友，但基本上你想检查是否mouseX在左右边缘之间，mouseY是否在上下边缘之间。

最后，请注意，您只为单帧显示“闪光灯”。我个人也看不出来。millis()您可能希望使用函数或frameCount时间变量来显示更长时间的闪光灯。（同样，谷歌是你的朋友！）

无耻的自我推销：这里有一个关于碰撞检测的教程，包括点矩形相交。它用于处理，但在 P5.js 中的想法是相同的。

于 2018-12-25T17:20:50.747 回答