Это мой 9-й проект в челлендже на скорость, и с этим проектом я, по сути, завершил все предварительные проекты в учебной программе FCC. Должен сказать, я не ожидал, что завершу столько проектов во время челленджа, а тем более завершу весь первый сертификат FreeCodeCamp менее чем за 3 недели (хотя на самом деле я учился больше 6 месяцев). Я горжусь тем, что пишу об этом проекте, и надеюсь, что смогу вдохновить других на тот же путь. :)
Итак, давайте немного поговорим о проекте. Во-первых, это было очень весело строить, это проект, который мне доставил больше всего удовольствия, даже больше, чем часы Pomodoro. Самая большая причина, по которой я так взволнован этим проектом, заключается в том, что я впервые использовал генераторы ES6! По сути, я создал класс (названный Simon
) для обработки всей игровой механики и данных, и одним из его методов является генератор, о котором я говорю. Экземпляры класса имеют массив, содержащий текущий шаблон в игре, и способ работы генератора заключается в том, что он продолжает yield
ing следующий элемент в массиве шаблонов, пока он не дойдет до конца массива. Вот как генератор определяется в коде внутри класса Simon
:
*playPattern() { var current = 0; while (current < this.pattern.length) { yield this.pattern[current++]; } }
Это довольно просто, но мне было очень интересно использовать эту функцию в первый раз.
Каждый элемент шаблона — это объект с двумя свойствами; color
— цвет кнопки в шаблоне (строка «зеленый», «красный», «желтый» или «синий») и sound
— путь к звуковому файлу, связанному с кнопкой . Объекты выбираются случайным образом из массива, который я уже определил (названный buttons
) внутри constructor
класса Simon
, и помещаются в массив pattern
. В основном файле моего приложения я запускаю генератор, вызывая playPattern
, и использую метод next
для получения следующего объекта в массиве шаблонов. Оттуда я использую свойства объекта yield
ed, чтобы выяснить, какая кнопка загорается и какой звуковой файл воспроизводить. На самом деле, поскольку я использовал Howler.js для звуков, свойство sound
технически является объектом Howl
, поэтому все, что я делаю, это вызываю sound.play()
, и он воспроизводит звуковой файл, определенный в свойстве src
этого объекта Howl
.
Вот как все это выглядит в коде, определенном в методе play
внутри моего основного файла приложения (который является файлом Vue):
play() { var pattern = this.simon.playPattern(); this.playing = true; var interval = setInterval(() => { var current = pattern.next(); if (current.done) { this.playing = false; clearInterval(interval); } else { let currentBtn = document.querySelector( `.${current.value.color}` ); current.value.sound.play(); this.lighten(currentBtn, this.speed / 2); } }, this.speed); }
Конечно, это все на тот случай, когда игра сама проигрывает пользователю текущий паттерн. Вещи обрабатываются немного по-другому, когда пользователь нажимает кнопку. У меня есть отдельный метод внутри класса Simon
для обработки этих случаев:
playSoundByColor(color) { for (let button of this[buttons]) { if (color == button.color) { button.sound.play(); return; } } }
Получив строку цвета, он ищет внутри закрытого массива buttons
, упомянутого ранее (конфиденциальность достигается с помощью символов), кнопку, соответствующую указанному цвету, и воспроизводит звук, связанный с кнопкой. Цвет передается в виде строки обработчику нажатия кнопки.
В целом, работа над этим проектом была очень интересной и полезной.
Ссылки:
- Саймон Гейм живая версия
- "Исходный код"