P5.js - 与键盘交互

P5.js 是一个基于 Processing 开发的 JavaScript 库，用于创作有趣的交互式图形、动画和声音。它包含许多内置的函数，可用于绘制形状、文本、图象，还可以控制音频和视频的播放。在本文中，我们将学习如何使用 P5.js 来实现一些基本的键盘交互，例如按下键盘时显示不同的图象和文本。

安装和设置

首先，您需要在计算机上安装 P5.js 库。您可以从其官方网站 https://p5js.org/ 下载 P5.js。您可以选择在线编写器或下载本地编写器。

创建画布

在编写代码之前，我们需要创建一个画布或窗口来显示我们的图形。您可以使用 createCanvas() 函数来创建一个画布，并传入宽度和高度作为参数。如下所述：

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

按下键盘

为了检测键盘事件，我们可以使用两个函数 keyPressed() 和 keyReleased()，当某个键按下或释放时自动调用这两个函数。我们可以在这两个函数中编写我们的自定义代码来操作图形。例如，如下代码当用户按下键盘的任何键时，都将显示一个文本 "Hello"：

function keyPressed() {
  background(0);
  fill(255);
  textSize(50);
  text("Hello", 100, 100);
}

按键检测

有时我们只想在按下某个特定键时执行操作，而不是处理所有键盘事件。在这种情况下，我们可以使用 keyCode 变量来确定按下的键是哪个键，并且执行特定的操作。 keyCode 变量存储当前按下的键的 ASCII 码值。下面是一个例子，当用户按下空格键时，将显示一个椭圆形：

function keyPressed() {
  if (keyCode === 32) { //32 是space键的ASCII码值
    background(0);
    fill(255);
    ellipse(200, 200, 100, 100);
  }
}

参考

• P5.js官方网站
• 键盘事件