p5.js: 为什么每次使用 keyPressed() 函数时我的图像都会重复？

Question

我正在尝试使用箭头键在 canvas 中导航乐高积木图像。但是，图像似乎是重复的（见图像）。

legoman p5.js

如何让图像移动而不留下图像痕迹？

见代码：

function keyPressed() {
  if (keyCode === UP_ARROW) {
    y = y - 10;
  } else if (keyCode === DOWN_ARROW) {
    y = y + 10;
  }
  if (keyCode === LEFT_ARROW) {
    x = x - 10;
  } else if (keyCode === RIGHT_ARROW) {
    x = x + 10;
  }

  if (keyCode === RETURN) {
    background(255);
  }
}

如果有帮助的话，这里还有我的文件 link：https://editor.p5js.org/emmajaneculhane/sketches/NDWUd0-Vj

Answer 1

您共享的 p5 编辑器草图中不再存在该问题。

那是因为你打电话

background(currentBackground);

在 keyPressed() 那个版本中。

事实上，background() 清除了以前渲染的具有平坦颜色的图像，这是您想要避免拖尾的行为。

单击 8 个色环之一后，您需要将 currentBackground 设置为不同的值。

例如：

if (dRed < 30 / 2 && mouseIsPressed) {
    currentBackground = redB;
  }

而不是：

if (dRed < 30 / 2 && mouseIsPressed) {
    background(redB);
  }

相同的逻辑将适用于其余色环。

此外，如果你想让按键响应更快一些，你可以在 draw():

中检查是否按下了某个键

function draw() {
  
  if(keyIsPressed){
    if (keyCode === UP_ARROW) {
      y = y - 10;
    } else if (keyCode === DOWN_ARROW) {
      y = y + 10;
    }
    if (keyCode === LEFT_ARROW) {
      x = x - 10;
    } else if (keyCode === RIGHT_ARROW) {
      x = x + 10;
    }
  }
  
  background(currentBackground);
  //...the rest of your draw code goes here

}

设置一些边界条件可能也会有所帮助，这样乐高模型就不会越界（例如，如果它大于 0 且小于草图的宽度，则只增加 x，同样适用y)

p5.js: 为什么每次使用 keyPressed() 函数时我的图像都会重复？

p5.js: Why is my image duplicating every time I use the keyPressed() function?

javascript

p5.js