Phaser.js: всё об играх и разработке

О чем этот пример

В игровом процессе часто требуется реагировать не на одиночное нажатие клавиши, а на целую последовательность — секретный код, суперприём или быструю команду. Ручная проверка каждой клавиши в порядке очереди — это громоздко и подвержено ошибкам. Phaser предоставляет для этого элегантный инструмент — `KeyboardPlugin.createCombo()`. В этой статье мы разберём, как создать комбинацию клавиш и обработать её успешное выполнение одним событием, что сделает код чище, а логику — надёжнее.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {

        //  Here we'll create a simple key combo
        //  When you type in ABCD the event will be triggered on the entry of the final character (D)
        //  An incorrect key press will reset the combo back to the start again

        const combo = this.input.keyboard.createCombo('ABCD');

        this.input.keyboard.on('keycombomatch', event =>
        {

            console.log('Key Combo matched!');

        });

    }
}

const config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Создание комбинации клавиш

Вся магия начинается с метода createCombo() объекта keyboard. Этот метод принадлежит плагину клавиатуры, который доступен через this.input.keyboard в любой сцене (Scene).

Метод принимает строку, где каждый символ соответствует клавише, которую нужно нажать. Порядок символов в строке определяет порядок нажатий. Phaser сам сопоставляет символы с кодами клавиш.

const combo = this.input.keyboard.createCombo('ABCD');

В этом примере создаётся комбинация из четырёх клавиш: A, B, C, D. Игрок должен нажать их именно в такой последовательности. Если он нажмёт A, потом B, потом C, а затем, например, E — комбинация собьётся и начнётся заново. Система ожидает следующего нажатия A.

Подписка на событие успеха

Чтобы отреагировать на успешное выполнение комбинации, нужно подписаться на специальное событие keycombomatch. Это событие генерируется объектом keyboard в тот самый момент, когда игрок ввёл последнюю правильную клавишу из цепочки.

this.input.keyboard.on('keycombomatch', event => {
    console.log('Key Combo matched!');
});

Обработчик события — это функция, которая выполняется при срабатывании. В данном случае она просто выводит сообщение в консоль, но здесь можно запустить анимацию, добавить игроку очки, открыть секретный уровень или активировать специальную способность. Параметр event, передаваемый в функцию, содержит полезную информацию, например, объект созданной комбинации.

Как это работает внутри

Механика достаточно проста: Phaser отслеживает каждое нажатие клавиши и сравнивает его с ожидаемым символом в текущей позиции комбинации.

1. **Начало:** Система ждёт первую клавишу из цепочки. 2. **Правильное нажатие:** Если нажата нужная клавиша, указатель позиции в комбинации сдвигается на следующий символ. 3. **Ошибка:** Если нажата любая другая клавиша (не та, что ожидается на текущей позиции), комбинация полностью сбрасывается. Игроку придётся начинать ввод сначала с первого символа. 4. **Успех:** Когда игрок правильно вводит последний символ, немедленно генерируется событие keycombomatch.

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

Полный пример кода

Давайте соберём всё вместе в рабочем примере сцены Phaser. Это типичная структура для тестирования механики.

class Example extends Phaser.Scene {
    create () {
        // Создаём комбинацию из четырёх клавиш
        const combo = this.input.keyboard.createCombo('ABCD');

        // Подписываемся на событие успешного ввода комбинации
        this.input.keyboard.on('keycombomatch', event => {
            console.log('Key Combo matched!');
        });
    }
}

const config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Инициализация игры (new Phaser.Game) запускает процесс. После загрузки сцены Example и вызова её метода create() комбинация будет зарегистрирована и готова к использованию.

Что попробовать дальше

Использование createCombo() — это правильный и эффективный способ обработки последовательностей нажатий клавиш в Phaser. Он избавляет разработчика от необходимости вручную вести учёт состояния ввода и делает код значительно чище. **Идеи для экспериментов:** 1. Попробуйте создать комбинацию для «секретного кода» из классических игр (например, 'UUDDLRLRBA'). 2. Используйте параметр resetOnWrongKey (доступный в расширенном формате вызова метода) чтобы отключить сброс комбинации при ошибке. 3. В обработчике события keycombomatch попробуйте создать визуальный эффект с помощью частиц (this.add.particles) или воспроизвести звук (this.sound.play).