JavaScript для детей. Самоучитель по программированию. Ник Морга. Москва Манн, Иванов и Фербер 2016

1   ...   8   9   10   11   12   13   14   15   ...   19

168
Часть II. Продвинутый JavaScript
Элемент img служит для добавления изображений в HTMLдокумент. В отличие от прочих известных нам элементов, закрывающий тег img не нужен — потребуется лишь открывающий тег, который может содержать различные атрибуты. В строке

мы добавили элемент img с id "map". C помощью атрибутов width и height мы задали ширину и высоту соответственно — и то и другое по 400, то есть наше изображение будет занимать 400 пикселей в ширину и 400 пикселей в высоту.
Чтобы указать, какое именно изображение нам нужно, мы использовали атрибут src, задав ему значение — веб-адрес картинки (строка

).
В данном случае это ссылка на изображение treasuremap.png, которое находится на сайте издательства No Starch Press.
В строке , после img, мы добавили пустой элемент p, задав ему id
"distance" (расстояние). В этот элемент мы будем с помощью JavaScript выводить текст подсказок, сообщающих игроку, насколько он близок к цели.
Выбор случайного места для клада
Теперь давайте писать JavaScript-код игры. Первая наша задача — выбрать на карте случайное место для клада. Поскольку размер карты 400 × 400 пикселей, координаты ее верхнего левого угла равны
{ x: 0, y: 0 }, а координаты нижнего правого угла — { x: 399, y: 399 }.
Получение случайных значений
Чтобы указать на карте сокровищ случайную точку, нам нужно выбрать случайное значение в диапазоне от 0 до 399 для координаты x и случайное значение в том же диапазоне для координаты y. Для этого напишем функцию, которая принимает размер в качестве аргумента и возвращает случайное число от 0 до этого размера (но не включая его):
var getRandomNumber
= function
(size) {
return
Math.floor
(
Math.random
()
* size);
};
Примерно такой же код мы использовали для получения случайных значений в предыдущих главах. Мы генерируем случайное число от 0 до 1 с помощью
Math.random, умножаем его на аргумент size и затем используем
Math.fl oor для округления до ближайшего снизу целого числа. Далее мы возвращаем полученный результат из функции. Вызов getRandomNumber(400) вернет случайное число от 0 до 399, что нам и требуется .
Map
— карта
Get random number
— взять случайное число
Size
— размер

11. Пишем игру «Найди клад!»
169
Задаем координаты клада
Теперь используем функцию getRandomNumber для задания координат клада:

var width
=
400;
var height
=
400;

var target
=
{
x: getRandomNumber(width),
y: getRandomNumber(height)
};
Во фрагменте кода начиная со строки

задаются переменные width и height, соответствующие ширине и высоте элемента img, который мы используем в качестве карты. В строке

мы создали объект под названием target с двумя свойствами x и y, обозначающими координаты клада. Значения x и y мы получаем из функции getRandomNumber.
Каждый раз при запуске этого кода мы получим новую случайную позицию на карте и координаты этой позиции будут сохранены в свойствах x и y переменной target.
Обработчик кликов
Обработчик кликов — функция, которая будет вызываться каждый раз, когда игрок кликнет по карте. Начнем писать эту функцию со следующего кода:
$
(
"#map"
).
click
(
function
(event) {
// Здесь будет код обработчика
});
Сначала мы используем
$("#map"), чтобы найти карту (поскольку "map" — это id элемента img), а затем указываем обработчик кликов.
Всякий раз, когда игрок кликнет по карте, начнется выполнение тела функции между фигурных скобок. Информация о клике будет передана в функцию через аргумент event.
В обработчике нужно выполнить несколько действий: увеличить счетчик кликов, вычислить, насколько точка клика отстоит от координат клада, и отобразить сообщения. Перед тем как писать код обработчика, мы создадим переменные и функции, которые помогут нам запрограммировать нужные действия.
Target
— цель

170
Часть II. Продвинутый JavaScript
Подсчет кликов
Первое, что должен делать обработчик, — отслеживать число кликов.
Для этого нам понадобится переменная clicks, которую мы создадим в начале программы (за пределами кода обработчика) и присвоим ей значение 0:
var clicks
=
0;
В код обработчика кликов мы включим команду clicks++, чтобы увеличивать счетчик каждый раз, когда игрок кликнет по карте.
Вычисляем расстояние от клика до клада
Чтобы выяснить, «горячо» или «холодно» (вблизи клада сделан клик или далеко от него), нужно найти расстояние между точкой клика и местом, где лежит клад. Для этого создаем функцию getDistance, вот такую:
var getDistance
= function
(event, target) {
var diffX
= event
.offsetX
- target.
x
;
var diffY
= event
.offsetY
- target.
y
;
return
Math.sqrt
((diffX
* diffX)
+
(diffY
* diffY));
};
Функция getDistance принимает два аргумента: event и target. Объект event — тот же самый, что передается обработчику кликов, и в нем содержится информация о событии. В частности, это свойства offsetX и offsetY, хранящие
x- и y-координаты клика — как раз они нам и нужны.
В коде функции переменная diffX хранит горизонтальное расстояние между кликом и кладом, которое мы получаем, вычитая target.x (x-координата клада) из event.offsetX (x-координата клика).
Тем же образом мы находим вертикальное расстояние, сохраняя его в переменной diffY. На рис. 11.2 показано, как вычисляются diffX и diffY для двух точек.
Get distance
— получить расстояние
x
y
5 3
0 5
2 0
target
: (1, 2)
event
: (3, 3)
4 2
1 3
4 1
diffX
= 3 – 1
= 2
diffY
= 3 – 2
= 1
Рис. 11.2. Вычисление горизонтального и вертикального
расстояний между кликом и кладом

11. Пишем игру «Найди клад!»
171
Используем теорему Пифагора
И наконец, чтобы найти расстояние между двумя точками в коде функции getDistance, используется теорема Пифагора. Эта теорема гласит, что для прямоугольного треугольника, где стороны, прилежащие к прямому углу, обозначены как a и b, а диагональная сторона (гипотенуза) обозначена как c, a
2
+ b
2
= c
2
. Зная длины a и b, мы можем найти длину гипотенузы, взяв квадратный корень от a
2
+ b
2
Чтобы найти расстояние между кликом и кладом, мы рассматриваем эти две точки как углы прямоугольного треугольника (см. рис. 11.3).
В функции getDistance переменная diffX — это длина горизонтальной стороны треугольника, а diffY — длина вертикальной стороны.
Найти нужное нам расстояние — значит найти длину гипотенузы, зная длины diffX и diffY. Пример такого вычисления показан на рис. 11.3.
x
y
5 3
0 5
2 0
target
: (1, 2)
event
: (3, 3)
4 2
1 3
4 1
diffX
= 3 – 1
= 2
diffY
= 3 – 2
= 1
Гипотенуза =
√
(
diffX
2
+ diffY
2
)
=
√
(2 2
+ 1 2
)
=
√
(4 + 1)
=
√
5
= 2.236
Рис. 11.3. Вычисление гипотенузы как расстояния между кликом и кладом
Чтобы найти гипотенузу, сначала нужно возвести diffX и diffY в квадрат. Затем мы складываем эти значения и извлекаем из суммы

172
Часть II. Продвинутый JavaScript квадратный корень с помощью JavaScript-функции
Math.sqrt.
Целиком формула для вычисления расстояния между кликом и кладом выглядит так:
Math.sqrt
((diffX
* diffX)
+
(diffY
* diffY))
Функция getDistance вычисляет это выражение и возвращает результат.
Сообщаем игроку, насколько он близок к цели
Зная расстояние между кликом и кладом, остается отобразить подсказку, которая сообщала бы игроку, насколько близко он подошел, — но без конкретных цифр. Для этого создадим следующую функцию getDistanceHint:
var getDistanceHint
= function
(distance) {
if
(distance
<
10) {
return
"Обожжешься!"
;
} else if
(distance
<
20) {
return
"Очень горячо"
;
} else if
(distance
<
40) {
return
"Горячо"
;
} else if
(distance
<
80) {
return
"Тепло"
;
} else if
(distance
<
160) {
return
"Холодно"
;
} else if
(distance
<
320) {
return
"Очень холодно"
;
} else
{
return
"Замерзнешь!"
;
}
};
Эта функция возвращает одну из строк в зависимости от переданного ей расстояния до клада. Если это расстояние меньше 10, она вернет «Обожжешься!». Для расстояния от 10 до 20 функция вернет «Очень горячо». По мере увеличения расстояния функция будет сообщать о все большем холоде, вплоть до расстояния в 320 пикселей, начиная с которого функция возвращает строку «Замерзнешь!».
Отображать эти сообщения мы будем, задавая их как текстовое содержимое элемента p на нашей странице. Следующий код вычислит расстояние, получит нужную строку с сообщением и отобразит эту строку:
Hint
— подсказка

11. Пишем игру «Найди клад!»
173
var distance
= getDistance
(
event
, target);
var distanceHint
= getDistanceHint(distance);
$
(
"#distance"
).
text
(distanceHint);
Как видите, сначала мы вызываем getDistance, сохраняя возвращенное значение в переменной distance. Затем мы передаем distance в функцию getDistanceHint, чтобы получить соответствующую строку подсказки и сохранить ее в переменной distanceHint.
Код
$("#distance").text(distanceHint); находит элемент, id которого равен "distance" (в нашем случае это элемент p), и меняет его текст на значение distanceHint, так что всякий раз при клике по карте наша веб-страничка сообщает игроку, насколько близко он подошел к цели.
Проверка на выигрыш
И наконец, наш обработчик кликов должен проверить, не попал ли игрок в цель. Поскольку один пиксель очень мал, мы не будем вынуждать игрока кликать в точности по месту с кладом, а засчитаем за победу клик на расстоянии менее восьми пикселей.
Этот код проверяет расстояние до клада, в случае победы сообщая об этом игроку:
if
(distance
<
8) {
alert
(
"Клад найден! Сделано кликов: "
+ clicks);
}
Код игры
Теперь, когда у нас есть все части кода, объединим их в программу.
// Получить случайное число от 0 до size-1
var getRandomNumber
= function
(size) {
return
Math.floor
(
Math.random
()
* size);
};
// Вычислить расстояние от клика (event) до клада (target)
var getDistance
= function
(event, target) {
var diffX
= event
.offsetX
- target.
x
;
var diffY
= event
.offsetY
- target.
y
;
return
Math.sqrt
((diffX
* diffX)
+
(diffY
* diffY));
};
// Получить для расстояния строку подсказки var getDistanceHint
= function
(distance) {

174
Часть II. Продвинутый JavaScript if
(distance
<
10) {
return
"Обожжешься!"
;
} else if
(distance
<
20) {
return
"Очень горячо"
;
} else if
(distance
<
40) {
return
"Горячо"
;
} else if
(distance
<
80) {
return
"Тепло"
;
} else if
(distance
<
160) {
return
"Холодно"
;
} else if
(distance
<
320) {
return
"Очень холодно"
;
} else
{
return
"Замерзнешь!"
;
}
};
// Создаем переменные

var width
=
400;
var height
=
400;
var clicks
=
0;
// Случайная позиция клада

var target
=
{
x: getRandomNumber(width),
y: getRandomNumber(height)
};
// Добавляем элементу img обработчик клика

$
(
"#map"
).
click
(
function
(event) {
clicks
++
;
// Получаем расстояние от места клика до клада

var distance
= getDistance(
event
, target);
// Преобразуем расстояние в подсказку

var distanceHint
= getDistanceHint(distance);
// Записываем в элемент #distance новую подсказку

$
(
"#distance"
).
text
(distanceHint);
// Если клик был достаточно близко, поздравляем с победой

if
(distance
<
8) {
alert
(
"Клад найден! Сделано кликов: "
+ clicks);
}
});
Начинается код с функций getRandomNumber, getDistance и getDistanceHint, о которых мы уже говорили. Затем в строке

мы создали необходимые переменные: width, height и clicks. Далее в строке

задается случайная позиция для клада.

В строке

мы добавили элементу карты обработчик кликов. Первым делом этот обработчик увеличивает на 1 переменную clicks. Затем в строке

он вычисляет расстояние между event (местом клика) и target
(позицией клада). В строке
 мы использовали функцию getDistanceHint для преобразования этого расстояния в строку (
"Холодно", "Тепло" и т. д.). В строке

мы обновляем подсказку на экране, чтобы игрок видел, насколько он близок к цели. И наконец, в строке

проверяем, уложился ли игрок в расстояние меньше 8 пикселей от клада, и если уложился, мы сообщаем ему о победе и количестве затраченных кликов.
Это весь JavaScript-код игры. Добавив его ко второму элементу script в файле treasure.html, вы сможете запустить игру в браузере!
За сколько кликов вам удастся найти клад?
Что мы узнали
В этой главе вы создали настоящую игру, опираясь на знания о работе с событиями. Также вы познакомились с элементом img, посредством которого можно добавлять на веб-странички изображения. И наконец, мы разобрались, как с помощью JavaScript узнать расстояние между двумя точками.
В следующей главе мы познакомимся с объектно-ориентированным программированием, которое даст нам новые возможности для организации и структурирования кода.
УПРА ЖНЕНИЯ
Вот несколько идей по изменению и усовершенствованию кода игры.
#1. Увеличение игрового поля
Сделайте игру сложнее, увеличив размер игрового поля. Попробуйте изменить его размер до 800 пикселей в ширину и 800 в высоту.
#2. Больше подсказок
Введите в игру дополнительные подсказки (например, «Очень-очень холодно!») и добавьте соответствующие подсказкам расстояния.
#3. Ограничение по кликам
Установите ограничение количества кликов и показывайте игроку сообщение «КОНЕЦ ИГРЫ», если он превысит это ограничение.
#4. Отображение числа оставшихся кликов
После подсказки «Горячо» или «Холодно» выводите на экран число оставшихся кликов, чтобы проигрыш не был для игрока неожиданностью.

176 12
О Б Ъ Е К Т Н О  О Р И Е Н Т И Р О В А Н Н О Е
П Р О Г РА М М И Р О В А Н И Е
В этой главе мы узнаем, как создавать и использовать объекты в рамках объ-
ектно-ориентированного программирования. Объектно-ориентированное программирование (ООП) — это способ проектирования и написания кода, когда все важные части программы являются объектами. Например, если вы пишете видеоигру «гонки», вы можете воспользоваться технологией
ООП и запрограммировать объект «машина», а затем создать множество таких объектов, обладающих одинаковым набором свойств и одинаковой функциональностью.
Простой объект
Как вы уже знаете из четвертой главы, объекты состоят из свойств, которые представляют собой пары «ключ-значение». Например, в следующем коде объект dog описывает собаку, и у него есть свойства — name (имя), legs (количество лап) и isAwesome (обозначает, хороша ли эта собака):
var dog = {
name: "Оладушек",
legs: 4,
isAwesome: true
};

177
К свойствам созданного объекта можно обращаться через точечную нотацию (о ней мы говорили внутри объектов»). Например, так мы можем получить свойство name нашего объекта dog:
dog.name;
"
Оладушек "
Кроме того, с помощью точечной нотации можно добавлять объекту новые свойства:
dog.age = 6;
При этом у объекта появится еще одна пара «ключ-значение»
(age: 6), в чем можно легко убедиться:
dog;
Object {
name
: "
Оладушек ", legs
:
4
, isAwesome
: true
, age
:
6
}
Добавление к объектам новых методов
В последнем примере мы создали несколько свойств, которые хранят значения разных типов: строку (
"Оладушек"), числа (4 и 6) и булево значение
(true). Помимо строк, чисел и булевых значений в свойствах объектов можно хранить функции — тогда эти свойства называют
методами. В сущности, мы уже пользовались некоторыми встроенными в JavaScript методами: например, это метод join для массивов и метод toUpperCase для строк.
А теперь давайте посмотрим, как создавать собственные методы.
Один из способов — воспользоваться точечной нотацией. К примеру, научим нашу собаку лаять, добавив к объекту dog метод под названием bark:

dog.bark = function () {

console.log("Гав-гав! Меня зовут " + this.name + "!");
};

dog.bark();
Гав-гав! Меня зовут Оладушек!
В строке

мы добавили к объекту dog свойство bark и задали в качестве его значения функцию. В строке

, в теле этой функции, мы
Bark
— лай

178
Часть II. Продвинутый JavaScript использовали console.log, чтобы напечатать: «Гав-гав! Меня зовут
Оладушек!» Обратите внимание на запись this.name — таким образом мы получаем значение, сохраненное в свойстве name этого объекта.
Давайте разберемся подробнее, как работает ключевое слово this.
Ключевое слово this
Ключевое слово this можно использовать в теле метода, чтобы обратиться к объекту, для которого этот метод вызывается. Например, при вызове метода bark для объекта dog, this обозначает объект dog, а значит this.name — это свойство dog.name. Ключевое слово this делает методы более гибкими, позволяя добавлять один и тот же метод ко многим объектам так, чтобы он имел доступ к свойствам того объекта, для которого в данный момент вызывается.
Используем один метод с разными объектами
Давайте создадим новую функцию speak, чтобы затем использовать ее как метод с разными объектами, обозначающими разных животных.
В случае вызова для какого-нибудь объекта метод speak будет обращаться к имени объекта
(this.name) и звуку, который издает животное
(this.sound), чтобы вывести в консоль сообщение.
var speak = function () {
console.log(this.sound + "! Меня зовут " + this.name + "!");
};
Теперь создадим еще один объект, чтобы добавить к нему функцию speak в качестве метода:
var cat = {
sound: "Мяу",
name: "Варежка",

speak: speak
};
Здесь мы создали новый объект cat со свойствами sound, name и speak. В строке

мы присвоили свойству speak значение — созданную ранее функцию speak. Теперь cat.speak является методом, который можно вызывать командой cat.speak(). Поскольку в коде метода используется ключевое слово this, в случае вызова для объекта cat он получит доступ к свойствам именно этого объекта.
Давайте проверим:
This
— этот, это
Speak
— говорить
Sound
— звук
Cat
— кошка

12. Объектно-ориентированное программирование
179
cat.speak();
Мяу! Меня зовут Варежка!
Когда мы вызываем метод cat.speak, он запрашивает значения двух свойств объекта cat: this.sound (это "Мяу") и this.name (это "Варежка").
Ту же самую функцию speak можно использовать как метод и для других объектов:
var pig = {
sound: "Хрю",
name: "Чарли",
speak: speak
};
var horse = {
sound: "И-го-го",
name: "Мэри",
speak: speak
};
pig.speak();
Хрю! Меня зовут Чарли!
horse.speak();
И-го-го! Меня зовут Мэри!
Повторюсь: в коде метода ключевое слово this ссылается на объект, для которого метод был вызван. Другими словами, при вызове horse.speak() this означает объект horse, а при вызове pig.speak() — объект pig.
Чтобы использовать один и тот же код метода с разными объектами, достаточно добавить его в виде свойства каждому из этих объектов — это мы и сделали сейчас с функцией speak. Однако если в программе много объектов и методов, добавление методов вручную будет задачей весьма утомительной, а код при этом станет запутанным и неаккуратным. Только представьте, что вам нужен целый зоопарк объектов для сотни разных животных и вы хотите, чтобы у них всех было с десяток общих методов и свойств.
Конструкторы объектов позволяют задавать общие методы и свойства куда более удобным способом, и сейчас мы в этом убедимся.
Pig
— поросенок
Horse
— лошадь

180
Часть II. Продвинутый JavaScript
Создание объектов с помощью конструкторов
В JavaScript конструктор — это функция, которая создает объекты, давая им набор заранее определенных свойств и методов. Представьте себе, что это машина по созданию объектов, вроде фабрики, которая штампует тысячи копий одного и того же товара. Задав конструктор, вы сможете создавать с его помощью любое количество одинаковых объектов. Чтобы опробовать этот подход в деле, мы напишем основу игры
«гонки», где используем конструктор для создания парка машин с одинаковыми базовыми свойствами, а также методами для перемещения в разные стороны и изменения скорости.
Устройство конструктора
При каждом вызове конструктор создает объект, добавляя ему нужные свойства. Если для вызова обычной функции мы указывали ее имя и следом круглые скобки, то для вызова конструктора используется ключевое слово new (которое сообщает JavaScript, что вы собираетесь использовать функцию как конструктор), а следом — имя конструктора и скобки.
На рис. 12.1 показан синтаксис вызова конструктора.
var car
= new
Car
(100, 200)
В этой переменной будет сохранен новый объект
Аргументы, передаваемые конструктору
Имя конструктора
Рис. 12.1. Синтаксис вызова конструктора с именем Car и двумя аргументами
!
Большинство JavaScript-программистов называют конструкторы
с заглавной буквы, чтобы отличать их от обычных функций.
Создаем конструктор Car
Давайте создадим конструктор
Car, который будет добавлять к каждому созданному объекту свойства x и y. Мы будем использовать эти свойства как координаты, задающие позицию машины на экране при отображении.
Создаем HTML-документ
Прежде чем писать код конструктора, нам нужно создать новый HTMLдокумент. Создайте новый файл под именем cars.html и введите в него следующий HTML-код:
New
— новый
Car
— машина

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