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

* « Предыдущая статья
* Следующая статья »

Это **7** из 16 уроков руководства разработки игры с помощью Phaser. Исходный код этого урока вы можете найти здесь: Gamedev-Phaser-Content-Kit/demos/lesson07.html.

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

Рисуем платформу
----------------

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

### Создаём платформу

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


```js
var paddle;
```


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


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

### Добавляем графику для платформы

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

### Рисуем платформу с физикой

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


```js
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`, платформа находится не совсем по середине экрана. Почему? Всё дело в том, что, по умолчанию, точка, из которой начинается позиционирование объекта (якорь), находится в левом верхнем углу. Но мы можем это изменить и переместить якорь в середину платформы по ширине и в самый низ по высоте, чтобы проще было позиционировать платформу, относительно нижней грани экрана. Добавьте следующую строку кода:


```js
paddle.anchor.set(0.5, 1);
```


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


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


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


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


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


```js
paddle.body.immovable = true;
```


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

Управляем платформой
--------------------

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


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


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


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


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

Расположение мячика
-------------------

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


```js
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( ... )` и измените её, как показано ниже:


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


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

Сравните свой код
-----------------

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

Следующий шаг
-------------

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

* « Предыдущая статья
* Следующая статья »