Save As, чтобы сохранить его под именем clicks.html, и замените содержи-
мое второго элемента script таким кодом:
Click handler —
var clickHandler = function (event) {
обработчик
console.log("Клик! " + event.pageX + " " + event.pageY);
клика
};
$("h1").click(clickHandler);
В строке мы создали функцию clickHandler с единственным
аргументом event. При ее вызове в аргументе event будет передан объ-
ект, содержащий информацию о событии, например о том, в каком месте
был сделан клик. В строке , в коде функции-обработчика, мы исполь-
зовали console.log для вывода свойств pageX и pageY объекта event.
Эти свойства хранят x- и y-координаты события — иными словами, они
сообщают, где именно на странице произошел клик.
Наконец, в строке мы активировали обработчик кликов. Код
$("h1") находит элемент h1, а вызов $("h1").click(clickHandler)
означает: «В случае клика по элементу h1 вызови функцию clickHandler
и передай ей объект события». В данном случае обработчик извлекает
из объекта event информацию обx- и y-координатах клика.
162 Часть II. Продвинутый JavaScript
Перезагрузите нашу модифицированную страницу
в браузере и кликните по элементу заголовка. При каждом
клике в консоли должна появиться новая строка, как пока-
зано ниже. Каждая из строк оканчивается двумя числами:
x- и y-координатами клика.
Клик! 88 43
Клик! 63 53
Клик! 24 53
Клик! 121 46
Клик! 93 55
Клик! 103 48
0
3
5
0
x
КООРД ИНАТЫ В БРАУЗЕРЕ
В веб-браузере, как и в большинстве других сред
2
графического программирования, нулевая пози-
(3, 2)
ция x- и y-координат находится в верхнем левом
углу экрана. По мере роста x-координаты точка
смещается к правому краю страницы, а по мере
5
роста y-координаты — к низу страницы (рис. 10.3).
y
Рис. 10.3. Система координат
в браузере, показан клик
в координатах (3, 2)
Событие mousemove
Событие mousemove возникает всякий раз при перемещении мышки. Mouse move —
Создайте файл с именем mousemove.html и введите туда следующий код:
перемещение
мышки
Привет, мир!
В строке мы вызовом $("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, задав ему значение — веб-адрес картинки (строка ).
В данном случае это ссылка на изображение