javascript - 在可汗学院键入的钥匙

Question

我需要在可汗学院上编写一个代码，让我可以通过按键更改我编码的图像。为此，我需要使用 keyTyped 函数，但我不知道如何使它工作。

另外，我不能使用循环；我只需要编写一个函数，让我通过按键在不同的图像之间进行选择。下面是我拥有的一张图片的代码。

//image: Kishin
var x = 180;
var y = 170;
var widthEllipse = 300;
var heightEllipse = 300;
var widthX = 80;
var heightY = 180;

background(94, 30, 30);
// bigger ellipse
fill(0, 0, 0);
ellipse(x + 20, y + 20, widthEllipse, heightEllipse);

//smaller ellipses
fill(148, 0, 0);
ellipse(130, 150, widthX - 50, heightY - 40);
ellipse(200, 230, widthX - 50, heightY - 40);
ellipse(270, 150, widthX - 50, heightY - 40);

// smallest ellipses
fill(0, 0, 0);
ellipse(130, 150, 30, 35);
ellipse(200, 230, 30, 35);
ellipse(270, 150, 30, 35);

Answer 1

Khan-Academy 使用一个名为 p5.js 的 JavaScript 库

keyTyped()如果您不确定它的正确用法，我建议您查看文档。

p5.j​​s 参考keyTyped()

Answer 2

每当按下某个键时，都会调用 keyTyped 函数。因此，您可以从那里检查使用变量键入的键：“键”。根据 ASCII 表，键盘上的每个键都与一个数字相关联，“key”保存按下的键的编号。示例代码如下所示：

keyTyped = function() { if(key === 40) { //向下键背景(255, 255, 255); //清屏 //绘制图像 } else if.... //为其他图像添加更多键 }