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

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

дратный корень от 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, она вер-

нет «Обожжешься!». Для расстояния от 10 до 20 функция вернет «Очень

горячо». По мере увеличения расстояния функция будет сообщать о все

большем холоде, вплоть до расстояния в 320 пикселей, начиная с кото-

рого функция возвращает строку «Замерзнешь!».

Отображать эти сообщения мы будем, задавая их как текстовое

содержимое элемента p на нашей странице. Следующий код вычис-

лит расстояние, получит нужную строку с сообщением и отобразит эту

строку:

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

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) {

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

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);

// Преобразуем расстояние в подсказку