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

рисования является частью объекта (машины), а не отдельной функцией.

Добавляем метод 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 :



193

// Здесь будет JavaScript-код

Как видите, в строке  мы создали элемент canvas, дав атрибуту id

значение "canvas", чтобы затем обращаться к нему с помощью этого id.

Атрибуты width и height задают ширину и высоту «холста» — в данном

случае его размер 200 × 200 пикселей.

Рисование на «холсте»

Теперь, когда у нас есть страница с элементом canvas, давайте попро-

буем при помощи JavaScript-кода нарисовать на «холсте» прямоугольник.

Введите следующий код в файл canvas.html между тегов .

Ctx —

var canvas = document.getElementById("canvas");

context —

var ctx = canvas.getContext("2d");

контекст

ctx.fillRect(0, 0, 10, 10);

Get

context —

получить

контекст

Давайте разберем этот код строчка за строчкой.