没有收到来自 mousePressed() 和 keyPressed() 的任何输入

Question

这个界面的设计是：（1）有一个长方形； (2) 按左右箭头应调整其宽度； (3) 按上下箭头应该改变它的高度； (4) 按下鼠标应该改变它的颜色； (5) 按BUTTON 应逐渐增加其旋转速度。

所以我基本上是根据 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);
}

Answer 1

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

function control(e) {
    if (e.keyCode === 39) {
        direction = 1
    } else if (e.keyCode === 38) {
        direction = - width
    } else if (e.keyCode === 37) {
        direction = -1
    } else if (e.keyCode === 40) {
        direction = width
    }
}
document.addEventListener('keydown', control)

Answer 2

您的代码中存在简单的逻辑错误。在 setup 函数中而不是在 draw 中初始化宽度、高度、颜色和度数，以便处理程序中的更新不会被覆盖。

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);
    // initialize variables here
    width = 10;
    height = 10;
    color = 0;
    degree = 0;
}

function draw()
{
    background(200);
    translate(windowWidth/2, windowHeight/2);
// don't overwrite the changes from the handlers
// instead move initialization to setup
//    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);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>

没有收到来自 mousePressed() 和 keyPressed() 的任何输入

Not receiving any inputs from mousePressed() and keyPressed()

html

dom

user-input

p5.js