Это мой 9-й проект в челлендже на скорость, и с этим проектом я, по сути, завершил все предварительные проекты в учебной программе FCC. Должен сказать, я не ожидал, что завершу столько проектов во время челленджа, а тем более завершу весь первый сертификат FreeCodeCamp менее чем за 3 недели (хотя на самом деле я учился больше 6 месяцев). Я горжусь тем, что пишу об этом проекте, и надеюсь, что смогу вдохновить других на тот же путь. :)

Итак, давайте немного поговорим о проекте. Во-первых, это было очень весело строить, это проект, который мне доставил больше всего удовольствия, даже больше, чем часы Pomodoro. Самая большая причина, по которой я так взволнован этим проектом, заключается в том, что я впервые использовал генераторы ES6! По сути, я создал класс (названный Simon) для обработки всей игровой механики и данных, и одним из его методов является генератор, о котором я говорю. Экземпляры класса имеют массив, содержащий текущий шаблон в игре, и способ работы генератора заключается в том, что он продолжает yielding следующий элемент в массиве шаблонов, пока он не дойдет до конца массива. Вот как генератор определяется в коде внутри класса Simon:

*playPattern() {
    var current = 0;
    while (current < this.pattern.length) {
        yield this.pattern[current++];
    }
}

Это довольно просто, но мне было очень интересно использовать эту функцию в первый раз.

Каждый элемент шаблона — это объект с двумя свойствами; color — цвет кнопки в шаблоне (строка «зеленый», «красный», «желтый» или «синий») и sound — путь к звуковому файлу, связанному с кнопкой . Объекты выбираются случайным образом из массива, который я уже определил (названный buttons) внутри constructor класса Simon, и помещаются в массив pattern. В основном файле моего приложения я запускаю генератор, вызывая playPattern, и использую метод next для получения следующего объекта в массиве шаблонов. Оттуда я использую свойства объекта yielded, чтобы выяснить, какая кнопка загорается и какой звуковой файл воспроизводить. На самом деле, поскольку я использовал 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, упомянутого ранее (конфиденциальность достигается с помощью символов), кнопку, соответствующую указанному цвету, и воспроизводит звук, связанный с кнопкой. Цвет передается в виде строки обработчику нажатия кнопки.

В целом, работа над этим проектом была очень интересной и полезной.

Ссылки:

Предыдущие проекты: