Ник Морган - JavaScript для детей. Самоучитель по программированию

this.carElement.css({

position: "absolute",

left: this.x,

top: this.y

});

$("body").append(this.carElement);

};

Car.prototype.moveRight = function () {

this.x += 5;

this.carElement.css({

left: this.x,

top: this.y

});

};

Мы сохранили метод moveRight в свойстве Car.prototype, чтобы

сделать его частью всех объектов, созданных с помощью конструктора

Car. Командой this.x += 5 мы увеличиваем координату x машины на 5,

чтобы переместить ее на 5 пикселей вправо. Затем мы вызываем метод

css для this.carElement, чтобы обновить позицию машины в браузере.

Попробуйте вызвать метод moveRight из консоли браузера.

Сначала обновите окно с документом cars2.html , затем откройте консоль

и введите такие строки:

tesla.moveRight();

tesla.moveRight();

tesla.moveRight();

186 Часть II. Продвинутый JavaScript

Каждый раз при вводе tesla.moveRight верхняя машина должна

передвинуться вправо на 5 пикселей. Вы можете использовать этот

метод в игре для перемещения машины по трассе.

ПОПР ОБУ ЙТЕ !

Передвиньте вправо nissan. Сколько раз нужно вызвать moveRight для

nissan, чтобы эта машина догнала tesla?

С помощью setInterval и moveRight анимируйте nissan, чтобы

машина поехала от левой границы окна к правой.

Добавляем методы для движения влево, вверх и вниз

Теперь давайте добавим в наш код методы для остальных направлений,

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

почти не отличаются от moveRight, поэтому введем их все разом.

Добавьте следующие методы в файл cars2.html сразу после

moveRight:

Car.prototype.moveRight = function () {

Move right —

this.x += 5;

подвинуть

this.carElement.css({

вправо

left: this.x,

top: this.y

});

};

Car.prototype.moveLeft = function () {

Move left —

this.x -= 5;

подвинуть

this.carElement.css({

влево

left: this.x,

top: this.y

});

};

Move up —

Car.prototype.moveUp = function () {

подвинуть

this.y -= 5;

вверх

this.carElement.css({

left: this.x,

top: this.y

});

};

Car.prototype.moveDown = function () {

Move down —

this.y += 5;

подвинуть

this.carElement.css({

вниз

left: this.x,

top: this.y

});

};

12. Объектно-ориентированное программирование 187

Каждый из этих методов передвигает машину на 5 пикселей в ука-

занном направлении, увеличивая или уменьшая на 5 одно из свойств

объекта-машины x или y.

Что мы узнали

В этой главе вы познакомились с основами

объектно-ориентированного программирования

на JavaScript: узнали, как задавать конструкторы

для создания новых объектов и как использовать

свойство prototype этих конструкторов, чтобы

добавлять объектам общие методы.

В программах, написанных объектно, боль-

шинство функций реализовано в виде методов.

Например, чтобы отобразить машину, мы вызы-

ваем для объекта-машины метод draw, а чтобы передвинуть ее вправо,

вызываем метод moveRight. Конструкторы и прототипы — это встроен-

ные механизмы языка JavaScript, предназначенные для создания объек-

тов с общим набором методов.

Объектный подход к написанию JavaScript-кода поможет вам струк-

турировать программы. Если код хорошо структурирован, вам будет

проще вспомнить, как он работает, если спустя некоторое время вы

решите внести в него изменения (это особенно важно для больших про-

грамм или для работы в команде с другими программистами, которым

может понадобиться изучить ваш код или изменить его). Например,

ближе к концу этой книги мы создадим игру «Змейка», для которой

понадобится написать немало строк кода; объекты и методы пригодятся

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

ее функциональности.

В следующей главе мы выясним, как с помощью элемента canvas

рисовать на веб-странице линии и другие фигуры и анимировать их.

188 Часть II. Продвинутый JavaScript

УПРА ЖНЕНИЯ

Выполните эти упражнения, чтобы попрактиковаться в работе

с объектами и прототипами.

#1. Рисование в конструкторе Car

Добавьте вызов метода draw в конструктор Car, чтобы объекты

автоматически отображались в окне браузера после их создания.

#2. Добавьте свойство speed

Доработайте конструктор Car, чтобы он добавлял создаваемым

объектам свойство speed (скорость) со значением 5. Используйте

это свойство в методах перемещения вместо числа 5.

Затем попробуйте задавать различные значения скорости,

чтобы машины двигались быстрее или медленнее.

#3. Гонки

Доработайте методы moveLeft, moveRight, moveUp и moveDown,

чтобы вместо перемещения машин всегда ровно на 5 пикселей

они принимали величину сдвига в качестве аргумента. К при-

меру, в этом случае для перемещения машины nissan на 10 пик-

селей вправо нужно будет дать команду nissan.moveRight(10).