Назад Вперед

Часть 8. Управление платформами.

До этого момента полноценной мини-игрой проект назвать нельзя было. Ведь все, что можно было делать, так это наблюдать как шар двигается по игровой сцене. В этом материале платформы смогут начать двигаться под управлением игроков.

Игра рассчитана на 2 пользователей. Управление левой платформой с помощью клавиш S и W, управление правой — стрелки Вверх и Вниз. Писать код буду в двух игровых функциях класса GameScenecreate() и update().

Начну с функции create(). Для первого левого игрока необходимо создать две переменные для хранения пользовательского нажатия клавиши W и клавиши S соответственно. Записываются эти методы следующим образом:

Файл game.js:


    ...
    this.cursorW = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W);
    this.cursorS = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S);
    ...
 

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

Для второго правого игрока будет только один метод, так как получать нужно будет значение нажатия стрелок на клавиатуре.

Файл game.js:


    ...
    this.cursor = this.input.keyboard.createCursorKeys();
    ...
 

Получение ключей нажатых клавиш

Больше в функции create() ничего писать не нужно. Теперь перехожу к функции update(), так как нажатие клавиш и изменение положения платформы необходимо отслеживать каждый игровой кадр. Снова буду использовать условный оператор if…else для проверки, какие клавиши были нажаты.

Для левого игрока записываю следующее условие, где проверяется какая кнопка нажимается с помощью свойства isDown объявленных переменных. И соответственно задается скорость по оси Y в нужном направлении. Если же кнопка не нажата, то скорость равняется 0 и платформа останавливается.

Файл game.js:


    ...
    if(this.cursorS.isDown) {
        this.playerOne.body.setVelocityY(300);
    } else if(this.cursorW.isDown) {
        this.playerOne.body.setVelocityY(-300);
    } else {
        this.playerOne.body.setVelocityY(0);
    }
    ...
 

Следом записываю управление для правого игрока. Так как переменная this.cursor хранит в себе значение именно стрелок на клавиатуре, то нужно в условии указывать, какая именно стрелка проверятся (down или up). Скорость указывается такая же как и для первой платформы.

Файл game.js:


    ...
    if(this.cursor.down.isDown) {
        this.playerTwo.body.setVelocityY(300);
    } else if(this.cursor.up.isDown) {
        this.playerTwo.body.setVelocityY(-300);
    } else {
        this.playerTwo.body.setVelocityY(0);
    }
    ...
 

Управление платформами

Сохраняю код и запускаю через локальный сервер. Управление работает. Обе платформы двигаются по вертикальной линии вверх и вниз.

Провверка движения платформы

Но, как видно, есть несколько недостатков, которые нужно исправить. Во-первых, платформы могут заходить за пределы верхней и нижней границ. В моем случае необходимо, чтобы платформа останавливалась перед границей игрового экрана и не могла продолжить движение дальше за пределы экрана.

Для изменения этой проблемы необходимо зайти в файл platform.js, где объявлен класс для платформ и дописать там метод, который не позволяет двигаться платформам за пределы игрового пространства (метод такой же, как и для шара использовал).

Файл platform.js:


    ...
    this.body.setCollideWorldBounds(true);
    ...
 

Столкновение платформ с границами

Сохраняю и проверяю в браузере. Платформы упираются в границы и даже при нажатии клавиш не могут продолжать движение за пределы игрового экрана. Минус устранен.

Проверка в браузере

Перехожу к следующему. Он заключается в том, что, когда шар вылетает за пределы боковых границ и снова появляется в центре, то сами платформы остаются на тех же местах, где они и были, когда шар вылетел. Мне же нужно, чтобы их позиция так же обновлялась к следующему раунду.

Изменить это можно с помощью метода setPorition() уже применяемый для самих платформ в том же месте, где и обновлялась позиция шара.

Файл game.js:


    ...
    this.playerOne.setPosition(10, this.gameHeight/2);
    this.playerTwo.setPosition(590, this.gameHeight/2);
    ...
 

Обновление позиции платформ

Сохраняю и проверяю. При вылете шара за пределы игрового пространства, обновляется позиция самого шара, и платформы также занимают свои места как при старте игры.

Вот и все управление для платформ. Уже сейчас проект является играбельным. Осталось уже совсем немного изменений — добавить счет и музыкальное оформление. И именно уже в таком виде игра опубликована на сайте.

Спасибо за внимание!

Назад Вперед