未接收到来自mousePressed()和keyPressed(()的任何输入

Question

这个接口的设计是：(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);
}

Answer 1

您的代码中有一个简单的逻辑错误。在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>

Answer 2

嗨，我不是很有经验，但我没有看到.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)