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

клада. Поскольку размер карты 400 × 400 пикселей,

координаты ее верхнего левого угла равны { x: 0,

y: 0 }, а координаты нижнего правого угла — { x: 399,

y: 399 }.

Получение случайных значений

Чтобы указать на карте сокровищ случайную точку, нам нужно выбрать

случайное значение в диапазоне от 0 до 399 для координаты x и случай-

ное значение в том же диапазоне для координаты y . Для этого напишем

функцию, которая принимает размер в качестве аргумента и возвращает

случайное число от 0 до этого размера (но не включая его):

Get random

var getRandomNumber = function (size) {

number —

return Math.floor(Math.random() * size);

взять

};

случайное

число

Size — размер

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

значений в предыдущих главах. Мы генерируем случайное число от 0

до 1 с помощью Math.random, умножаем его на аргумент size и затем

используем Math.fl oor для округления до ближайшего снизу целого

числа. Далее мы возвращаем полученный результат из функции. Вызов

getRandomNumber(400) вернет случайное число от 0 до 399, что нам

и требуется .

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

Задаем координаты клада

Теперь используем функцию getRandomNumber для задания координат

клада:

 var width = 400;

var height = 400;

 var target = {

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.

В обработчике нужно выполнить несколько действий: увеличить

счетчик кликов, вычислить, насколько точка клика отстоит от коорди-

нат клада, и отобразить сообщения. Перед тем как писать код обработ-

чика, мы создадим переменные и функции, которые помогут нам запро-

граммировать нужные действия.

11. Пишем игру «Найди клад!» 169

Подсчет кликов

Первое, что должен делать обработчик, — отслеживать число кликов.

Для этого нам понадобится переменная clicks, которую мы создадим

в начале программы (за пределами кода обработчика) и присвоим ей

значение 0:

var clicks = 0;

В код обработчика кликов мы включим команду clicks++, чтобы

увеличивать счетчик каждый раз, когда игрок кликнет по карте.

Вычисляем расстояние от клика до клада

Чтобы выяснить, «горячо» или «холодно» (вблизи клада сделан клик или

далеко от него), нужно найти расстояние между точкой клика и местом,

Get distance —

где лежит клад. Для этого создаем функцию 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));

};

0

1

2

3

4

5

Функция getDistance принимает

0

x

два аргумента: event и target. Объект

event — тот же самый, что передается

1

обработчику кликов, и в нем содержится

diffX = 3 – 1

информация о событии. В частности, это

target: (1, 2)

= 2

свойства offsetX и offsetY, хранящие

2

x- и y -координаты клика — как раз они

diffY = 3 – 2

нам и нужны.

= 1

В коде функции переменная diffX

3

event: (3, 3)

хранит горизонтальное расстояние между

кликом и кладом, которое мы получаем,

4

вычитая target.x ( x -координата клада)

из event.offsetX ( x -координата клика).

Тем же образом мы находим вертикальное

5

расстояние, сохраняя его в переменной

diffY. На рис. 11.2 показано, как вычисля-

y

ются diffX и diffY для двух точек.

Рис. 11.2. Вычисление горизонтального и вертикального

расстояний между кликом и кладом

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

Используем теорему Пифагора

И наконец, чтобы найти расстояние между двумя

точками в коде функции getDistance, исполь-

зуется теорема Пифагора . Эта теорема гласит,

что для прямоугольного треугольника, где сто-

роны, прилежащие к прямому углу, обозначены

как a и b , а диагональная сторона (гипотенуза)

обозначена как c , a2 + b2 = c2 . Зная длины a и b ,

мы можем найти длину гипотенузы, взяв ква-

дратный корень от a2 + b2 .

Чтобы найти расстояние между кликом и кла-

дом, мы рассматриваем эти две точки как углы

прямоугольного треугольника (см. рис. 11.3).

В функции getDistance переменная diffX — это длина горизонталь-

ной стороны треугольника, а diffY — длина вертикальной стороны.

Найти нужное нам расстояние — значит найти длину гипоте-

нузы, зная длины diffX и diffY. Пример такого вычисления показан

на рис. 11.3.

0

1

2

3

4

5

0

x

1

diffX = 3 – 1

target: (1, 2)

= 2

2

diffY = 3 – 2

= 1

3

event: (3, 3)

4

Гипотенуза = √(diffX2 + diffY2)

= √(22 + 12)

= √(4 + 1)

= √5

5

= 2.236

y

Рис. 11.3. Вычисление гипотенузы как расстояния между кликом и кладом

Чтобы найти гипотенузу, сначала нужно возвести diffX и diffY

в квадрат. Затем мы складываем эти значения и извлекаем из суммы

11. Пишем игру «Найди клад!» 171

квадратный корень с помощью JavaScript-функции Math.sqrt.

Целиком формула для вычисления расстояния между кликом и кладом

выглядит так:

Math.sqrt((diffX * diffX) + (diffY * diffY))

Функция getDistance вычисляет это выражение и возвращает

результат.

Сообщаем игроку, насколько он близок к цели

Зная расстояние между кликом и кладом, остается отобразить под-

сказку, которая сообщала бы игроку, насколько близко он подошел, —

но без конкретных цифр. Для этого создадим следующую функцию

Hint —

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, она вер-