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

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

Сначала, добавим переменную paddle, сразу после переменной ball:

var paddle;

После этого, в функции preload, загрузим изображение paddle при помощи ещё одного вызова функции load.image():

function preload() {
  // ...
  game.load.image("ball", "img/ball.png");
  game.load.image("paddle", "img/paddle.png");
}

Чуть не забыли, на этом этапе нам надо скачать изображение платформы с Github в папку /img.

Далее, мы инициализируем спрайт нашей платформы при помощи функции add.sprite() — добавьте следующую строку кода в самый конец функции create():

paddle = game.add.sprite(
  game.world.width * 0.5,
  game.world.height - 5,
  "paddle",
);

Мы можем использовать world.width и world.height для позиционирования платформы в том месте, где мы хотим: game.world.width*0.5 расположит платформу прямо по середине экрана. В данном случае, нам повезло, что наш игровой мир совпадает с <canvas>, однако, в других играх мир может быть гораздо больше экрана.

Как вы могли заметить, перезагрузив, на данном этапе, страницу index.html, платформа находится не совсем по середине экрана. Почему? Всё дело в том, что, по умолчанию, точка, из которой начинается позиционирование объекта (якорь), находится в левом верхнем углу. Но мы можем это изменить и переместить якорь в середину платформы по ширине и в самый низ по высоте, чтобы проще было позиционировать платформу, относительно нижней грани экрана. Добавьте следующую строку кода:

paddle.anchor.set(0.5, 1);

Платформу расположили там, где и хотели. Теперь, чтобы платформа могла взаимодействовать с мячиком, добавим ей физику. Добавьте следующую строку кода в самый низ функции create():

game.physics.enable(paddle, Phaser.Physics.ARCADE);

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

function update() {
  game.physics.arcade.collide(ball, paddle);
}

В качестве аргументов, мы передаём два объекта, между которыми проверяются коллизии — в нашем случае, мячик и платформа. Вроде, сработало, но не совсем так, как мы ожидали — когда мячик сталкивается с платформой, последняя падает за пределы экрана! А мы, всего лишь, хотим, чтобы мячик отскакивал от платформы, а платформа, при этом, оставалась на месте. Мы можем использовать свойство immovable, для того, чтобы платформа не двигалась, когда мячик бьётся об неё. Для этого добавьте следующую строку кода в конец функции create():

paddle.body.immovable = true;

Вот! Теперь всё работает, как надо.

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

function update() {
  game.physics.arcade.collide(ball, paddle);
  paddle.x = game.input.x;
}

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

paddle.x = game.input.x || game.world.width * 0.5;

Если вы этого ещё не сделали, то обновите страницу index.html и попробуйте то, что у нас получилось!

Теперь давайте разместим мячик на платформе. Так же, как и платформу, расположим мячик по середине экрана по горизонтали, с небольшим отступом от нижней грани экрана по вертикали. Для этого переместим якорь мячика в его середину. Найдите строку ball = game.add.sprite( ... ) и заметите её на следующие две:

ball = game.add.sprite(game.world.width * 0.5, game.world.height - 25, "ball");
ball.anchor.set(0.5);

Скорость оставим такую же, но изменим направление по оси y, изменив второй параметр со 150 на -150, и теперь мяч будет двигаться вверх. Найдите строку ball.body.velocity.set( ... ) и измените её, как показано ниже:

ball.body.velocity.set(150, -150);

Теперь мячик появляется по середине платформы и двигается вверх.

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

Мы можем управлять платформой и сделали так, чтобы мячик отскакивал от неё. Но какой от этого толк, если мячик отскакивает и от нижней грани экрана? В следующей главе мы добавим логику проигрыша и экран "Game over".

• Назад
• Далее