top: event.pageY

});

});

В строке  мы вызовом $("html").mousemove(обработчик) доба-

вили обработчик события mousemove. В данном случае аргумент обра-

ботчик — это функция целиком. Она начинается после mousemove

и продолжается до тега . Мы использовали $("html"), чтобы

найти элемент html, поэтому обработчик будет вызван при перемеще-

нии мышки в любом месте страницы: функция, которую мы передали

в скобках после mousemove, будет вызываться всякий раз, когда пользо-

ватель передвинет мышку.

В этом примере вместо того, чтобы создать обработчик отдельно

и передать методу mousemove имя функции (как мы это делали ранее

с функцией clickHandler), мы передали mousemove непосредственно

саму функцию. Это очень распространенный подход к написанию обра-

ботчиков, поэтому освоиться с такой записью весьма полезно.

В строке , в коде функции-обработчика, мы нашли

элемент заголовка и вызвали для него метод offset. Как

я уже говорил, у объекта, который передается в каче-

стве аргумента offset, могут быть свойства left и top.

В данном случае мы присваиваем свойству left значе-

ние event.pageX, а свойству top — event.pageY. Теперь

каждый раз при передвижении мышки заголовок будет

перемещаться в позицию, где произошло событие. Иными

словами, куда бы вы ни передвинули мышь, заголовок

будет следовать за ней.

Что мы узнали

Из этой главы мы узнали, как писать JavaScript-код, который выполня-

ется тогда, когда вам это нужно. Функции setTimeout и setInterval

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

вам нужно выполнять код в ответ на действия пользователя, к вашим

услугам click, mousemove и другие события.

В следующей главе мы с помощью пройденного сможем написать

игру!

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

УПРА ЖНЕНИЯ

Выполните эти упражнения, чтобы опробовать разные варианты

интерактивного программирования.

#1. Следом за кликами

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

следовал не за указателем мышки, а только за кликами: вы кли-

каете в любом месте страницы, и заголовок перемещается туда.

#2. Создайте собственную анимацию

Используйте setInterval для анимации заголовка h1, двигая

его по квадрату, вдоль краев страницы. Пусть он переместится

на 200 пикселей вправо, на 200 пикселей вниз, 200 пикселей

влево, 200 пикселей вверх, а затем начнет с начала. Подсказка:

нужно запоминать текущее направление (вправо, вниз, влево

или вверх), чтобы знать, увеличивать или уменьшать для заго-

ловка отступы слева (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-код игры. Первая

наша задача — выбрать на карте случайное место для