Создание элементов через a для l oop в js - PullRequest
Новая
       53

Создание элементов через a для l oop в js

0 голосов
/ 02 августа 2020

Я пытаюсь создать сайт виртуального пианино, и мне нужно сделать клавиши отдельными элементами, поскольку я создаю их с помощью этого цикла; 

function draw() {
    background(220);
    var i;
    
    for (i = 0; i < 59; i++) {
        //constructs the white keys
        
        fill(255);
        rect(i * 10, 350, 10, 50);
    }
    for (i = 0; i < 58; i++) {
        //skips keys for black keys using 7 note repetition pattern
        if (i % 7 == 0 || i % 7 == 2 || i % 7 == 3 || i % 7 == 5 || i % 7 == 6) {
            fill(0);
            rect(i * 10 + 7.5, 350, 5, 30);
        }
    }
}

как я могу сохранить разные клавиши как различные элементы, чтобы объединить их со звуковыми файлами с помощью document.querySelectorAll ('key name'). Поскольку это мой первый вопрос, я не уверен, что формат правильный, но мне действительно нужна помощь. спасибо.

1 Ответ

0 голосов
/ 02 августа 2020

Я предлагаю создать объектный класс ключа, затем создать массив объектов и нарисовать их. Таким образом, вы можете довольно легко получить ссылочное значение для ключа, к которому вы хотите добавить конкретный звук.

Создайте два массива, один для объектов, а другой для звуковых файлов. Вы можете использовать функцию mousePressed () вместе с ограничениями, чтобы проверить его местоположение на холсте (добавив функцию внутри класса объекта), а затем присвоить значение из звукового массива в соответствии с положением соответствующих клавиш.

Вы можете узнать больше о том, что я сказал, посмотрев этот учебный плейлист P5. js от The Coding Train (Дэниел Шиффман): https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

...