ловка отступы слева (left) и сверху (top). Кроме того, при

достижении угла квадрата нужно будет менять направление.

#3. Остановка анимации по клику

Доработайте упражнение #2: добавьте к двигающемуся эле-

менту h1 обработчик клика, который останавливает анимацию.

Подсказка: отменить запуск кода по интервалу можно функцией

clearInterval.

#4. Напишите игру «Кликни по заголовку»

Доработайте упражнение #3 так, чтобы каждый раз, когда игрок

кликает по заголовку, тот не останавливался, а ускорялся и клик-

нуть по нему становилось сложнее. Отслеживайте количество

кликов по заголовку и меняйте его текст, отображая там это

число. Когда игрок наберет 10 кликов, остановите анимацию,

а текст заголовка измените на «Вы победили!».

Подсказка: чтобы ускорить движение, нужно будет отменить

текущий вызов функции по интервалу, а потом задать новый,

с меньшим временем повтора.

11

П И Ш Е М И Г Р У « Н А Й Д И К Л А Д ! »

Давайте опробуем полученные знания

в деле и напишем игру! Цель игры — найти

клад. Веб-страница будет отображать карту,

на которой программа случайным обра-

зом выбирает точку, где спрятаны сокро-

вища. Каждый раз, когда игрок кликает

по карте, программа сообщает, насколько

он близок к кладу. При клике по точке с кла-

дом (или очень близко к ней) игра выво-

дит поздравление и сообщает, сколько

кликов ушло на поиски. На рис. 11.1

показан экран игры после того, как игрок

кликнул по карте.

Проектирование игры

Перед тем как писать код, давайте разбе-

рем общую структуру этой игры. Вот спи-

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

того, чтобы игра адекватно реагировала

на клики по карте.

1. Создать страницу игры с картинкой

(картой сокровищ) и местом, куда будут

Рис. 11.1. Игра «Найди клад!»

выводиться сообщения для игрока.

166

2. Выбрать на карте случайную точку, где спрятан клад.

3. Создать обработчик кликов. Каждый раз, когда игрок кликает

по карте, обработчик кликов должен:

• Увеличить счетчик кликов на 1.

• Вычислить, насколько далеко место клика от места, где

спрятан клад.

• Отобразить на странице сообщение для игрока — «горячо»

или «холодно».

• Поздравить игрока, если он кликнул по кладу или вблизи

него, и сообщить, сколько кликов ушло на поиски.

Я расскажу, как запрограммировать каждую из этих функций,

а затем мы рассмотрим код игры целиком.

Создаем веб-страницу с HTML-кодом

Давайте рассмотрим HTML-код игры. Мы воспользуемся новым элемен-

том img для отображения карты клада, а для вывода игровых сообщений

Img — image —

добавим на страницу элемент p. Введите следующий код в новый файл

изображение

под названием treasure.html .

Treasure —

сокровище

Width —

Найди клад!

ширина



Height —

 src="http://nostarch.com/images/treasuremap.png">

высота

Distance —



расстояние

// Здесь будет код игры

167

Элемент img служит для добавления изображений в HTML-

документ. В отличие от прочих известных нам элементов, закрывающий

тег img не нужен — потребуется лишь открывающий тег, который может

содержать различные атрибуты. В строке  мы добавили элемент img

Map — карта

с 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 и случай-