Блог

Главная - Вопросы по программированию - Не получает никаких входных данных от mousePressed () и keyPressed()

Не получает никаких входных данных от mousePressed () и keyPressed()

#html #dom #user-input #p5.js

#HTML #dom #пользовательский ввод #p5.js

Вопрос:

Дизайн этого интерфейса заключается в том, что (1) есть прямоугольник; (2) Нажатие стрелок влево и вправо должно регулировать его ширину; (3) Нажатие стрелок вверх и вниз должно изменять его высоту; (4) Нажатие МЫШИ должно изменять его цвет; (5) Нажатие КНОПКИ должно постепенно увеличивать егоскорость вращения.

Поэтому я в основном воссоздал такие функции, как mousePressed() и KeyPressed() из ссылок, предоставленных p5.js официальный сайт компании. Тем не менее, я понял, что эскиз будет нарисован только один раз и не получит пользовательских вводов. Я знаю, что есть проблема, но в чем может быть причина?

 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);
}

Ответ №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>

Комментарии:

1. В вашем вопросе также упоминается скорость вращения. Во фрагменте нажатие кнопки изменяет переменную degree . Чтобы заставить прямоугольник вращаться со скоростью, вам нужно будет добавить еще одну переменную, которую вы можете назвать speed . Затем отрегулируйте скорость в обработчике нажатия кнопки и установите degree = degree speed в draw .

2. Еще одна вещь, которую я замечаю, это то, что вы, вероятно, хотите, чтобы прямоугольник вращался вокруг своего центра. Вы можете использовать translate для перемещения к центру прямоугольника, а затем повернуть. Если вам нужна помощь с вращением вокруг центра, задайте другой вопрос.

3. Это решает проблему. Спасибо, Чарли! Да, вращение было еще одной проблемой, которую я не осознавал, когда публиковал этот вопрос. Но мне удалось изменить эту часть самостоятельно, как только я реализовал взаимодействия. Тем не менее, спасибо, что указали на это!

Ответ №2:

Привет, я не очень опытный, но я не вижу .adEventlistner(), который отслеживает любые входные данные на сайте. Вот некоторый код, который я использовал для элементов управления, которые я использовал в недавнем курсе, где я создавал игру snake. Я использовал коды клавиш для стрелок (стрелка влево: 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)

Комментарии:

1. Спасибо, что поделились своим кодом, хотя я считаю .addEventlistner() , что это не обязательно для этой конкретной цели. Все это было из-за простой логической ошибки. Ввод переменных в draw() вместо setup() решит эту проблему.

2. Спасибо, всегда приятно учиться у таких сообщений и людей, которые знают больше об этом предмете