Html 不接收来自mousePressed（）和keyPressed（）的任何输入

该接口的设计是：（1）有一个矩形；（2） 按左右箭头应调整其宽度；（3） 按上下箭头应改变其高度；（4） 按下鼠标应改变其颜色；（5） 按下按钮应逐渐增加其旋转速度

因此，我基本上根据p5.js官方网站提供的参考资料重新创建了

mousePressed（）

和

KeyPressed（）

等函数。然而，我意识到草图只会绘制一次，并且不会收到用户输入。我知道有问题，但原因是什么

let width; // Controlled by LEFT_ARROW and RIGHT_ARROW
let height; // Controlled by UP_ARROW and DOWN_ARROW
let color; // Controlled by MOUSE
let degree; // Controlled by BUTTON

function setup() 
{
    // Create title, subtitle and button
    createCanvas(windowWidth, windowHeight);
    var title = createElement('h1', 'Use ARROW buttons to resize the rectangle.')
    var subtitle = createElement('h2', 'Click MOUSE to change the color.')
    var button = createButton('Press Me to rotate the rectangle.')
    title.position(windowWidth/2-310, windowHeight/3-100);
    subtitle.position(windowWidth/2-180, windowHeight/3);
    button.position(windowWidth/2-100, windowHeight*3/4);
    button.mousePressed(buttonPressed);
    rectMode(CENTER);
    angleMode (DEGREES);
}

function draw()
{
    background(200);
    translate(windowWidth/2, windowHeight/2);
    width = 10;
    height = 10;
    color = 0;
    degree = 0;
    fill(color);
    rotate(degree);
    // Draw a rectangle, set to default
    rect(0, 20, width, height);  

}

// This should rotate the object
function buttonPressed()
{
    degree = degree + 10;
}

// This should change the color    
function mousePressed()
{
    color = random(255);
}

function keyPressed()
{
    // This should change the width, using left and right arrow
    if (keyCode === LEFT_ARROW)
    {
        width = width - 10;
    }
    else if (keyCode === RIGHT_ARROW)
    {
        width = width + 10;
    }

    // This should change the height, using up and down arrow
    if (keyCode === UP_ARROW)
    {
        height = height - 10;
    }
    else if (keyCode === DOWN_ARROW)
    {
        height = height + 10;
    }
}

function windowResized()
{
    resizeCanvas(windowWidth, windowHeight);
}

---

嗨，我不是很有经验，但我没有看到.adEventlistner（），这会在网站上查找任何输入。 这是我在最近的一个课程中使用的一些代码，我在那里制作了一个蛇游戏。我使用了箭头的键代码（左箭头：37，向上箭头：38，右箭头：39，向下箭头：40）

功能控制（e）{
如果（例如keyCode===39）{
方向=1
}否则如果（e.keyCode===38）{
方向=-宽度
}否则，如果（e.keyCode===37）{
方向=-1
}否则如果（e.keyCode===40）{
方向=宽度
}
}
addEventListener（'keydown'，control）

您的代码中有一个简单的逻辑错误。在

setup

函数中而不是在

draw

中初始化宽度、高度、颜色和度数，以便不覆盖处理程序中的更新

let width；//由左箭头和右箭头控制
让高度；//由上箭头和下箭头控制
让我们用颜色；//鼠标控制
let度；//按钮控制
函数设置（）
{
//创建标题、副标题和按钮
createCanvas（窗口宽度、窗口高度）；
var title=createElement（'h1'，'使用箭头按钮调整矩形大小'）
var subtitle=createElement（'h2'，'单击鼠标更改颜色'）
var button=createButton（'按我旋转矩形'）
标题.位置（窗宽/2-310，窗高/3-100）；
副标题位置（窗宽/2-180，窗高/3）；
按钮位置（窗宽/2-100，窗高*3/4）；
按钮。鼠标按下（按钮按下）；
矩形模式（中心）；
角度模式（度）；
//在这里初始化变量
宽度=10；
高度=10；
颜色=0；
度=0；
}
函数绘图（）
{
背景（200）；
平移（窗宽/2，窗高/2）；
//不要覆盖处理程序中的更改
//而是将初始化移到设置
//宽度=10；
//高度=10；
//颜色=0；
//度=0；
填充（颜色）；
旋转（度）；
//绘制一个矩形，设置为默认值
矩形（0，20，宽度，高度）；
}
//这将旋转对象
功能按钮按下（）
{
学位=学位+10；
}
//这应该会改变颜色
函数mousePressed（）
{
颜色=随机（255）；
}
功能键按下（）
{
//这将使用左箭头和右箭头更改宽度
if（键代码===左箭头）
{
宽度=宽度-10；
}
else if（键代码===右箭头）
{
宽度=宽度+10；
}
//这将使用向上和向下箭头更改高度
如果（键代码===向上箭头）
{
高度=高度-10；
}
else if（键代码===向下箭头）
{
高度=高度+10；
}
}
函数windowResized（）
{
调整画布大小（窗口宽度、窗口高度）；
}

您的问题还提到了旋转速度。在代码段中，单击按钮可更改度变量。要使矩形以一定速度旋转，您需要添加另一个变量，您可以称之为速度。然后在按钮点击处理程序中调整速度，并在绘图中设置degree=degree+speed。我注意到的另一件事是，您可能希望矩形围绕其中心旋转。可以使用“平移”移动到矩形的中心，然后旋转。如果你需要关于围绕中心旋转的帮助，问另一个问题。这就解决了问题。谢谢你，查理！是的，轮换是另一个问题，一个我在发布这个问题时没有意识到的问题。但一旦我实现了交互，我就设法自己修改了这一部分。不过，谢谢你指出这一点！感谢您分享您的代码，不过我相信

.addEventlistner（）

并不是实现此特定目的的必要条件。这一切都是由于一个简单的逻辑错误。将变量放入draw（）而不是setup（）将解决此问题。感谢您，从此类帖子和了解此主题的人那里学习总是很好的