и сохраните файл cars.html под именем cars2.html. Далее замените весь
JavaScript-код, находящийся во втором элементе script, следующим кодом:
var Car = function (x, y) {
this.x = x;
this.y = y;
};
Car.prototype.draw = function () {
var carHtml = '
';
this.carElement = $(carHtml);
this.carElement.css({
position: "absolute",
left: this.x,
top: this.y
});
$("body").append(this.carElement);
};
var tesla = new Car(20, 20);
var nissan = new Car(100, 200);
tesla.draw();
nissan.draw();
После создания конструктора в строке , в строке мы добавили
к Car.prototype новый метод draw. Таким образом, draw станет частью
всех объектов, созданных конструктором Car.
Код метода draw представляет собой слегка измененную функ-
цию drawCar. Сначала мы создаем строку с HTML-кодом, сохраняя ее
в переменной carHTML. В строке мы создаем jQuery-элемент для этого
12. Объектно-ориентированное программирование 185
HTML, на этот раз сохраняя его в свойстве объекта this.carElement.
Далее в строке мы, обращаясь к this.x и this.y, задаем координаты
верхнего левого угла изображения. (В конструкторе this соответствует
объекту, который в данный момент создается.)
Когда вы запустите этот код, страничка будет выглядеть так же, как
на рис. 12.2: функциональность кода осталась прежней, мы лишь изме-
нили его структуру. Преимущество этого подхода в том, что теперь код
рисования является частью объекта (машины), а не отдельной функцией.
Добавляем метод moveRight
Теперь добавим несколько методов для перемещения машин по экрану,
Move right —
начиная с метода moveRight, передвигающего машину на 5 пикселей
подвинуть
вправо относительно текущей позиции. Добавьте следующий код после
вправо
определения Car.prototype.draw:
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).
Теперь используйте setInterval, чтобы двигать две машины
(nissan и tesla) вправо, каждые 30 миллисекунд смещая их
на случайное расстояние от 0 до 5 пикселей. Вы увидите, как
машины едут по экрану, то и дело меняя скорость. Попробуйте
угадать, какая из машин достигнет границы окна первой.
Ч АС Т Ь I I I
Графика
Ч АС Т Ь I I I
Гра
Гр ф
а и
ф к
и а
к
13
Э Л Е М Е Н Т C A N VA S
Возможности JavaScript не ограничиваются работой с текстом и чис-
лами. Также можно писать код для рисования картинок с помощью
HTML-элемента canvas, который представляет собой что-то вроде
чистого холста или листа бумаги. Вы можете рисовать на этом «холсте»
практически все что угодно: чертить линии, контуры, выводить текст —
пределов нет, кроме вашего воображения!
Эта глава посвящена основам рисования на «холсте». В дальнейших
главах мы, отталкиваясь от этих основ, приступим к созданиювидео-
игры на JavaScript, использующей элемент canvas.
Создаем «холст»
Прежде чем начать работу с элементом canvas, создайте новый HTML-
документ со следующим кодом и сохраните его в файле canvas.html:
Как видите, в строке мы создали элемент canvas, дав атрибуту id
значение "canvas", чтобы затем обращаться к нему с помощью этого id.
Атрибуты width и height задают ширину и высоту «холста» — в данном
случае его размер 200 × 200 пикселей.
Рисование на «холсте»
Теперь, когда у нас есть страница с элементом canvas, давайте попро-
буем при помощи JavaScript-кода нарисовать на «холсте» прямоугольник.
Введите следующий код в файл canvas.html между тегов