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

ное значение в том же диапазоне для координаты 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 ,