p5.js | 键盘 | 关键是下()

在p5.js中，键盘事件是通过 keyPressed() 和 keyReleased() 函数来实现的。keyPressed() 函数会在键盘上按下任何键时被调用，而 keyReleased() 函数则会在释放键盘键时被调用。

使用键盘事件

要使用键盘事件，只需要在您的p5.js sketch中添加相应的函数即可。例如，下面的代码片段演示了如何在我们的sketch中使用 keyPressed() 函数来检测 Enter 键是否被按下：

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

function draw() {
  background(220);
}

function keyPressed() {
  if (keyCode === ENTER) {
    console.log("The Enter key was pressed!");
  }
}

在这个例子中，当用户按下 Enter 键时，keyPressed() 函数将在JavaScript控制台中输出一个消息。

示例

这个例子演示了如何在p5.js中使用键盘事件来控制一个形状的移动。我们将使用 keyPressed() 函数来检测用户是否按下箭头键，并根据按键控制形状的移动方向。

let x = 200;
let y = 200;
let speed = 5;

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

function draw() {
  background(220);
  rect(x, y, 50, 50);
}

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

在这个例子中，我们使用 rect() 函数绘制一个矩形，并使用变量 x 和 y 来跟踪矩形的位置。当用户按下箭头键时，我们检测按键，并相应地更新 x 和 y 值，以便我们的矩形向相应的方向移动。

结论

p5.js的键盘事件使我们能够在我们的sketch中通过用户的键盘输入发生交互，并且根据按键控制移动方向等参数。 keyPressed() 和 keyReleased() 函数是我们用来处理键盘事件的两个函数。开始使用它们吧！