Назад Вперед

Часть 7. Вылет шара за пределы игрового пространства и обновление его позиции.

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

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

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

Запишу этот метод в файле game.js сразу же после строк, где создавал переменные для хранения размеров экрана.

Файл game.js:


    ...
    this.physics.world.setBoundsCollision(false, false, true, true);
    ...
 

Отмена столкновения с боковыми границами

Проверив изменения после сохранения и запуска локального сервера, вижу, что шар отскакивает как и прежде от верхней и нижней границы (параметры true в методе), и вылетает за пределы боковых границ (false в методе). Поставленная задача выполнена.

Следующая задача на очереди — обновление позиции шара снова в центр игрового экрана после вылета за боковые границы. На этот раз задачу буду решать уже в функции update(), которая выполняет код каждый кадр. Так как нужно будет проверять положение шара в игровом пространстве и выполнять соответствующий код, когда положение будет за пределами игрового пространства.

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

Записываю условие следующим образом:

Файл game.js:


    ...
    if (this.ball.x < 0 || this.ball.x > 600) {

    }
    ...
 

Теперь соответственно нужно записать, что именно будет происходить при нахождении шара за пределами боковых границ. Для этого использую метод, который задает позицию объекта — setPosition(x,y);. В качестве координат укажу центр сцены.

Файл game.js:


    ...
    if (this.ball.x < 0 || this.ball.x > 600) {
        this.ball.setPosition(300,200);
    }
    ...
 

Пока этого не достаточно, так как позиция будет обновляться, а вот скорость по оси X и оси Y будет оставаться прежней и шар будет двигаться из центра по диагонали в сторону правого игрока при каждом вылете. Поэтому мне нужно так же обновить скорость шара по каждой оси.

Файл game.js:


    ...
    if (this.ball.x < 0 || this.ball.x > 600) {
        this.ball.setPosition(300,200);
        this.ball.setVelocityX(-200); 
        this.ball.setVelocityY(0); 
    }
    ...
 

Обновление позиции и скорости шара

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

Я думал о том, чтобы шар после своего вылета и обновления позиции начинал свое движение в ту сторону, где он вылетел. Сделать это на самом деле очень просто. Но прежде мне понадобиться еще одна переменная, которая будет в себе хранить значение начальной скорости шара по оси X.

Запишу ее после объявления переменных с размерами экрана.

Файл game.js:


    ...
    this.speedBall = -200;
    ...
 

И еще в методе, где задавал значение скорости по оси X заменю число -200 на эту же переменную.

Файл game.js:


    ...
    this.ball.setVelocityX(this.speedBall);
    ...
 

Переменная для хранения скорости

Теперь в функции update() в том же методе setVelocityX() также заменяю число -200 на значение скорости в момент вылета. Определить это значение можно с помощью метода this.ball.body.velocity.x.

Файл game.js:


    ...
    if (this.ball.x < 0 || this.ball.x > 600) {
        this.ball.setPosition(300,200);
        this.ball.setVelocityX(this.ball.body.velocity.x); 
        this.ball.setVelocityY(0); 
    }
    ...
 

Новое значение скорости

На самом деле это все, что нужно было сделать. Так как при столкновении с платформой, скорость шара по оси X меняет свой знак на противоположный, то при вылете за пределы экрана уже с другой стороны, знак скорости будет такой же и шар будет двигаться в нужную мне сторону. Проверить можно сохранив изменения и открыв браузер.

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

Для шара хочу добавить еще один небольшой штрих — вращение вокруг своей оси при движении. В той же функции update() в самом начале запишу одну строчку кода для этого.

Файл game.js:


    ...
    this.ball.angle++;
    ...
 

Вращение шара

Эффект просто для визуального удовольствия. Шар теперь не только двигается, но еще и вращается.

В данном материале сделаю еще одно изменение. Так как проверка позиции шара у меня с числами, а как я писал раньше, при изменении размеров экрана нужно будет все числа менять на новые размеры. Поэтому я и создавал переменные в функции create(). Но они были созданы с ключевым словом let и использовать я их могу только в той же функции, где объявлял. Для того, чтобы использовать их в функции update() мне нужно заменить их с ключевым словом this и во всех местах, где использовал тоже. Сделаю это.

Замена переменных для ширины и высоты экрана

Теперь в функции update() в условном операторе я могу заменить число 600 на соответствующую переменную с шириной игрового экрана. Как и координаты в методе setPosition().

Файл game.js:


    ...
    if (this.ball.x < 0 || this.ball.x > this.gameWidth) {
        this.ball.setPosition(this.gameWidth/2, this.gameHeight/2); 
        this.ball.setVelocityX(this.ball.body.velocity.x); 
        this.ball.setVelocityY(0); 
    }
    ...
 

Сохраняю и проверяю, что не допустил нигде ошибок. Код работает, координаты теперь записываются с помощью переменных.

В следующем материале начну работу с управлением платформами с помощью клавиатуры.

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

Назад Вперед