Увеличение скорости шара при столкновении с платформами.

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

Увеличение скорости на определенное значение будет происходить в момент столкновения платформы и шара. Значит, мне понадобится функция callBall(), в которой как раз и происходит действие при соприкосновении. В первую очередь необходимо записать условие для проверки значения текущей скорости. Так как движение по оси X может быть как положительное, так и отрицательное (обратное направление). Поэтому записываю условие, где проверяю скорость шара больше нуля или меньше.

Файл game.js:

    ...
    if(this.ball.body.velocity.x > 0) {

    } else if(this.ball.body.velocity.x < 0) {
    
    } 
    ...
 

Теперь к этой же скорости внутри фигурных скобок буду прибавлять 10 если скорости больше 0, и отнимать 10 — если скорость меньше 0. Таки образом, получается, если в момент столкновения, скорость -200, то она станет -210 и поменяет свой знак на +. При столкновении со второй платформой станет 220 и снова поменяет знак на -.

Файл game.js:

    ...
    if(this.ball.body.velocity.x > 0) {
        this.ball.body.velocity.x += 10;
    } else if(this.ball.body.velocity.x < 0) {
        this.ball.body.velocity.x -= 10;
    } 
    ...
 

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

Первая — нету ограничения по скорости, т.е. шар может достигнуть слишком большой скорости, которая совсем не нужна в этой игре. Решением этой задачи и займусь. Нужно всего лишь написанный выше код обернуть еще в одно условие проверки скорости, если она меньше или больше, например, 800.

Файл game.js:

    ...
    if(this.ball.body.velocity.x > -800 || this.ball.body.velocity.x < 800) {
        if(this.ball.body.velocity.x > 0) {
            this.ball.body.velocity.x += 10;
        } else if(this.ball.body.velocity.x < 0) {
            this.ball.body.velocity.x -= 10;
        }
    } 
    ...
 

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

Для решения задачи перехожу к функции update() в часть кода, где обновляется позиция шара и его скорость при вылете за игровой экран. На данный момент в методе this.ball.setVelocityX(this.ball.body.velocity.x); указан параметр с текущим значением скорости. Именно из-за этого скорость не сбрасывается, а остается такой же, как и при вылете.

Если заменить значение параметра this.ball.body.velocity.x на переменную с изначальной стартовой скоростью this.speedBall, то проблема решится. Скорость будет сбрасываться при вылете за игровой экран и будет иметь значение -200.

Файл game.js:

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

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

Немного выше в функции update() у меня уже прописана проверка позиции шара, чтобы изменить значение счета. Если вылетел за левую границу, очко для правого игрока, и наоборот. Поэтому здесь же я и запишу два метода изменения скорости шара. Если вылетел за левую границу, то параметр будет this.speedBall, если за правую границу — -this.speedBall.

Файл game.js:

    ...
    if(this.ball.x < 0) {
        ...
        this.ball.setVelocityX(this.speedBall); 
    }

    if(this.ball.x > this.gameWidth) {
        ...
        this.ball.setVelocityX(-this.speedBall);
    }
    ...
 

Итоговый вариант этой части кода можно увидеть на изображении.

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

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