Установка выключателей света — создание реакции на взаимодействие с пользователем
Итак, у нас есть все элементы, отображаемые на экране на своих местах, и некоторые из них даже генерируются написанным нами JavaScript. Хотя видеть, как ваш код работает, — одно из лучших ощущений, еще лучше иметь работающий код, с которым вы можете взаимодействовать! сегодня мы сосредоточимся в основном на весле и заставим его реагировать на наш ввод.
В интересах удобочитаемости и удобства использования нашего кода мы собираемся создать класс для весла. Классы позволяют нам хранить всю информацию и функции (называемые методами внутри класса) вместе и относящиеся к самому классу, поэтому сначала давайте создадим класс и поместим в него первые вещи, к которым, как мы знаем, нам понадобится доступ: узел DOM, соответствующий ракетке, а также ширину и высоту ракетки.
Вам может быть интересно, почему мы не включаем также положение весла; это связано с тем, что расположение манипуляторов будет часто меняться, поэтому нам нужна функция, которая находила бы фактические координаты всякий раз, когда нам нужно их использовать. Другая причина использования функции заключается в том, что нам придется довольно часто ссылаться на положение ракетки, и мы можем значительно сократить код, который мы пишем, если мы поместим его в метод, который мы можем вызывать снова и снова. Я думаю, вы поймете, что я имею в виду, когда взглянете на функции:
Как видите, если бы вы хотели, например, получить координату x весла, вам пришлось бы вводить эту строку кода каждый раз, и, помимо того, что это неэффективный способ использовать ваше время, это также не очень читабельно. Теперь всякий раз, когда нам нужно получить координату X весла, нам просто нужно сделать что-то вроде paddle.getXCoordinate(), что намного проще набирать и читать!
Теперь, когда мы можем легко и эффективно получить некоторую информацию о ракетке, давайте узнаем, как использовать эту информацию для перемещения ракетки! В приведенном выше коде вы заметите, что у нас есть методы установки (сеттеры) и методы получения (геттеры). Мы будем использовать их оба для создания методов, с помощью которых мы можем перемещать ракетку:
Как видите, каждый метод делает примерно одно и то же:
- Проверка, не приведет ли перемещение весла к выходу за пределы игры.
- Если еще есть место для перемещения, то к координате добавляются или вычитаются 10 пикселей в зависимости от того, в каком направлении будет двигаться ракетка.
Мне это кажется хорошим, все, что нам нужно сделать, это объявить экземпляр ракетки, и у нас должна быть движущаяся ракетка, верно? Ну, еще нет, но мы близки. Нам все еще нужно сообщить игре, чтобы она прослушивала нажатие клавиши, на какие клавиши обращать внимание и что должно произойти при их нажатии. Для этого у нас будет создана функция, которая будет запускаться в начале каждой игры (например, функция generateBricks(), которую мы сделали ранее).
Как вы видите, мы сообщаем нашему документу, что он должен прослушивать нажатие клавиши, а затем, если это какая-либо из четырех клавиш направления, он будет перемещать манипулятор в соответствующем направлении. Теперь, если мы вызовем эту функцию и передадим нашу ракетку, мы заметим, что ракетка движется, когда мы ей скажем, как интересно! на случай, если что-то работает не так, пока ваш код должен выглядеть так:
Этот код работает, но все еще немного менее организован. В следующей статье мы обсудим, как немного привести код в порядок, а затем запустить этот снаряд!
