Стать программистом. Практика JavaScript для новичков. Занятие 9.

Доброго времени суток, друзья!

В нашем прошлом занятии мы Закрепили работу с таким приёмом как сохранение контекста, познакомились с понятием утечка памяти, рассмотрели его на примере наших интервалов для уменьшения счетчиков характеристик и реорганизовали наш код таким образом, чтобы избежать возможные потери памяти в нашей работе со счетчиками. На этом этапе работу с нашим «Домиком» для питомца мы отложим и наконец-то займемся самим питомцем непосредственно.

Давайте начнем.

Стать программистом. Практика JavaScript для новичков. Занятие 9.

Итак, наш питомец. Для его реализации я выбрал образ муравья. Вот он:

Не знаю почему именно он. На самом деле для нас это не принципиально. Как мы уже условились в самых первых занятиях, описание нашего питомца будет происходит в рамках js-файла под названием ‘ant.js`. На данный момент код этого файла выглядит следующим образом:

var Pet = function() {

}

Как нам известно из предыдущего курса, если функция имеет название, которое начинается с заглавной буквы, то скорее всего (не обязательно) это функция, которая в последствии будет использоваться как функция-конструктор (Родитель, Класс). Здесь для нас секретов нет, это действительно заготовка для такого рода функции и после её описания мы сможем производить от нее потомков.

Следующим шагом для работы с нашим питомцем является постановка задачи. Наш питомец – самая сложная часть проекта. Поэтому, чем подробнее мы сможем сформулировать задачу, тем легче нам будет её реализовать. Я предлагаю разбить эту задачу на подпункты (сделать деструктуризацию целостной картины), которые в последствии мы и будем шаг за шагом реализовывать с помощью JavaScript.

Задачи:

1. Питомец должен уметь появляться в разных участках своего домика.
2. Питомец, должен уметь двигаться внутри своего домика. Он должен уметь это делать во всех направлениях (вниз, вверх, влево, вправо) и при этом не должен выходить за пределы.
3. Питомец должен уметь играть.
4. Питомец должен уметь спать.
5. Питомец должен уметь выполнять все доступные ему действия в произвольном порядке, для эмулирования интеллекта.
6. Питомец должен уметь прекращать выполнение текущего действия и прекращать выполнения всех действий одновременно.

Примерно такой список у меня получился. Я думаю если мы что-то и упустили, то сможем поправить (добавить, удалить) это в процессе нашей работы.

И снова, только после того как задачи четко оговорены, мы можем приступать к их реализации. И для начала давайте так же, как и раньше исследуем html-элемент, который отвечает за отображения нашего питомца:

Как видим, тут все стандартно. Визуальная часть нашего питомца - это html-элемент с идентификатором ‘pet. Значит мы легко можем получить его выборку используя метод ‘getElementById(). Давайте сделаем эту выборку и кроме того сразу же создадим потомка от нашей функции-родителя, для того чтобы мы могли инспектировать его в консоли браузера, когда нам это понадобиться.

var Pet = function() {
this.selector = document.getElementById(‘pet’)
}

/* Создаем муравья, используя функцию-родитель */
var ant = new Pet();

Мы сделали выборку в свойство ‘selectorи на 7 строке создали потомка нашей функции-родителя, который и назвали ‘ant (муравей). И если мы теперь проверим в консоли браузера нашего потомка, то увидим, что он действительно произошел от Класс Pet и в его свойстве ‘selector` действительно лежит выборка нужного нам html-элемента.

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

Смотрите, все мы помним из школьного курса такую систему координат:

Это стандартная X/Y система координат с точкой 0,0 по середине. По красным сечениям идут положительные значения X и Y, а по линиям без сечений идут отрицательные значения X и Y. Я надеюсь всем она понятна и подробно описывать принцип работы с этой системой не требуется.
Однако, в браузере эта система координат перевернута и смещена свой точкой 0, 0 в верхний левый угол окна. Если представить это схематически, то выглядеть это будет следующим образом:

Другими словами, при расчете наших X и Y точек мы всегда будет отталкиваться от верхнего левого угла окна. Ну а если мы делаем наши расчеты относительно какого-либо html-элемента. То отталкиваться мы уже будет от верхнего левого угла этого элемента. В нашем случае, например, мы будем вести наш расчет относительно «Домика» для питомца и в этом случае наша точка 0,0 будет располагаться тут:

Причем, обратите внимание, что положительные показатели будут располагаться в пределах в направлении красных стрелок, а в направлении пунктира будут располагаться уже отрицательные значения для этих величин.

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

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

Если мы взглянем на стили, присвоенные нашему питомцу до заметив два параметра ‘leftи ‘top, вот они:

Эти два показателя в стилях есть ни что иное как X и Y нашей системы координат. B если мы ручками начнем менять стиль ‘leftто наш муравей начнет смещаться по оси ‘X, соответственно если мы начнем менять стиль ‘top- то мы сместим нашего питомца по оси ‘Y. Давайте проверим это на примере свойства ‘left‘.

Как видим увеличение параметра ‘leftприводит нашего муравья в движение влево по оси ‘X. Попробуйте увеличить свойство ‘topи вы увидите, как наш питомец поползет вниз по оси ‘Y. Только обратите внимание, что значения обоих свойств измеряется в пикселях и давать его требуется не только в цифре, но и добавлять к ней сокращение “px”. Из всего вышесказанного уже становится ясно, что для того чтобы питомец мог появляется в разных местах своего домика на требуется менять значения стилей ‘topи ‘left при инициализации. Давайте напишем для этого функциональность.

var Pet = function(x, y) {
this.selector = document.getElementById(‘pet’);
this.x = x;
this.y = y;
}

Pet.prototype =  {
/* Задаем начальную позицию питомца в домике */
setPosition: function() {
var x = this.x;
var y = this.y;

this.selector.style.top = y + ‘px’;
this.selector.style.left = x + ‘px’;
    }
}

/* Создаем муравья, используя функцию-родитель */
var ant = new Pet(100,100);

Обратите внимание на то, как именно мы переписали наш код. Теперь при инициализации потомка мы передаем ему позицию для X и для Y. Эти значения мы тут же сохраняем в его свойствах. Кроме того к прототипу (‘prototype) функции-родителя мы добавили метод ‘setPosition(). Этот метод берет значения свойств, переданных при инициализации и подставляет их в соответствующие стилевые свойства ‘topи ‘left. Таким образом, после вызова метода ‘ setPosition()` мы должны будем увидеть муравья не в верхнем левом углу нашего «Домика», а смещенным на 100 пикселей влево и 100 пикселей вниз.
Давайте проверим в браузере:

Наш муравей сместился. Логично предположить, что если мы поменяем значения соответствующих свойств муравья и снова вызовем метод ‘setPostion()`, то наш питомец снова изменит свою позицию. Давайте проверим:

И мы видим, что это так. В принципе уже с этого момента мы можем смело сказать, что первый пункт наших подзадач решён. Однако, в такой реализации есть пара нюансов, которые нам необходимо учесть:
Во-первых, поользователь может ничего не вводить при инициализации питомца

В этом случаем наши свойства X и Y получать в свои значения ‘undefinedи метод ‘setPosition() с такими значениями работать не станет. Выглядеть это будет так:

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

и как результат:

Первый нюанс особо ничем не грозит нам, разве что кроме логического соответствия кода. Так как на самом деле расположен наш муравей изначально в точке 0, 0. А свойства у него, которые должны были бы по идее отображать эту информацию, имею в своих значениях undefined. Мы с Вами сторонники аккуратизма, поэтому давайте исправим это.

var Pet = function(x, y) {
    this.selector = document.getElementById('pet');
    this.x = x || 0;
    this.y = y || 0;
}

Pet.prototype =  {

    /* Задаем начальную позицию питомца в домике */
    setPosition: function() {
        var x = this.x;
        var y = this.y;

        this.selector.style.top = y + 'px';
        this.selector.style.left = x + 'px';
    }
}

/* Создаем муравья, используя функцию-родитель */

var ant = new Pet();

Как видите, исправили мы это просто. C помощью логического оператора ИЛИ (OR) знакомого нам из предыдущего курса, мы сделали проверку, которая будет работать по следующей логике: Если при создании нашего питомца будут переданы параметры x и `y, то эти значения будут присвоены одноименным свойствам. В противном случае (когда они переданы не будут) нашим свойствам будут заданы значения равные 0. Проверить это очень просто. Заметьте, что на строке 21 мы все также создаем нашего потомка, но параметры для его местоположения при этом не задаем. Однако, если мы проследуем в браузер, и просмотрим нашего «муравья» в консоли, то увидим:

Оба наших «позиционных» свойства больше не являются undefined, а отражают вполне правдивую картину положения нашего питомца.

А как сражаться со вторым нюансом, мы узнаем в следующем занятии.

А на сегодня всё. Продолжение следует…

Ссылки на предыдущие занятия:

Практика JavaScript для новичков. Занятие 1,
Практика JavaScript для новичков. Занятие 2,
Практика JavaScript для новичков. Занятие 3,
Практика JavaScript для новичков. Занятие 4,
Практика JavaScript для новичков. Занятие 5,
Практика JavaScript для новичков. Занятие 6,
Практика JavaScript для новичков. Занятие 7,
Практика JavaScript для новичков. Занятие 8

Ссылки на предыдущий курс:

Урок 1 - Окружение.,
Урок 2 - Некоторые особенности синтаксиса.,
Урок 3 - Переменные.,
Урок 4 - Типы переменных, как основа для их взаимодействия.,
Урок 5 - Операции с переменными одного типа.,
Урок 6 - Операции с переменными одного типа. Часть II.,
Урок 7 - Взаимодействие переменных с разными типами.,
Урок 8 - Взаимодействие переменных разного типа. часть II.,
Урок 9 - Взаимодействие переменных разного типа. Часть III.,
Урок 10 - Другие возможные взаимодействия между переменными.,
Урок 11 - Другие возможные взаимодействия между переменными. Часть II.,
Урок 12 - Другие возможные взаимодействия между переменными. Операторы присваивания.,
Урок 13 - Другие возможные взаимодействия между переменными. Операторы сравнения.,
Урок 14 - Сложные переменные. Array и Object.,
Урок 15 - Условные операторы.,
Урок 16 - Циклы.,
Урок 17 - Циклы. Часть II.,
Урок 18 - Функции.,
Урок 19 - Функции. Часть II.,
Урок 20 - Профилирование. Функции, часть III.,
Урок 21 - Функции, Часть IV. Аргументы.,
Урок 22 - Objects (Объекты).,
Урок 23 - Встроенные функции и объекты.,
Урок 24 - Встроенные функции и Объекты, Часть II. Глобальные функции и переменные.,
Урок 25 - Встроенные функции и Объекты, Часть III. Document Object Model.,
Урок 26 - Встроенные функции и Объекты, Часть III. Document Object Model.
Урок 27 - Встроенные объекты. Объект Style, Events, Часть II.
Урок 28 - Встроенная переменная this. Глобальная и локальная области видимости.
Урок 29 - Объектно-ориентированное Программирование. Введение.
Урок 30 - Объектно-ориентированное Программирование. Часть II. Полиморфизм.
Урок 31 - OОП. Наследование, Часть I. Оператор new.
Урок 32 - ООП. Наследование, Часть II. PROTOTYPE.
Урок 33 - ООП. Часть II. Полиморфизм.
Урок 34 - ООП. Часть III. Инкапсуляция.