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

нет «Обожжешься!». Для расстояния от 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);

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

 var distanceHint = getDistanceHint(distance);

// Записываем в элемент #distance новую подсказку

 $("#distance").text(distanceHint);

// Если клик был достаточно близко, поздравляем с победой

 if (distance < 8) {

alert("Клад найден! Сделано кликов: " + clicks);

}

});

Начинается код с функций getRandomNumber, getDistance

и getDistanceHint, о которых мы уже говорили. Затем в строке 

мы создали необходимые переменные: width, height и clicks. Далее

в строке  задается случайная позиция для клада.

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

В строке  мы добавили элементу карты обработчик кликов. Первым

делом этот обработчик увеличивает на 1 переменную clicks. Затем

в строке  он вычисляет расстояние между event (местом клика) и target

(позицией клада). В строке  мы использовали функцию getDistanceHint

для преобразования этого расстояния в строку ("Холодно", "Тепло"

и т. д.). В строке  мы обновляем подсказку на экране, чтобы игрок видел,

насколько он близок к цели. И наконец, в строке  проверяем, уложился ли

игрок в расстояние меньше 8 пикселей от клада, и если уложился, мы сооб-

щаем ему о победе и количестве затраченных кликов.

Это весь JavaScript-код игры. Добавив его ко второму элементу

script в файле treasure.html, вы сможете запустить игру в браузере!

За сколько кликов вам удастся найти клад?

Что мы узнали

В этой главе вы создали настоящую игру, опираясь на знания о работе

с событиями. Также вы познакомились с элементом img, посредством кото-

рого можно добавлять на веб-странички изображения. И наконец, мы разо-

брались, как с помощью JavaScript узнать расстояние между двумя точками.

В следующей главе мы познакомимся с объектно-ориентированным

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

зации и структурирования кода.

УПРА ЖНЕНИЯ

Вот несколько идей по изменению и усовершенствованию кода

игры.

#1. Увеличение игрового поля

Сделайте игру сложнее, увеличив размер игрового поля. Попробуйте

изменить его размер до 800 пикселей в ширину и 800 в высоту.

#2. Больше подсказок

Введите в игру дополнительные подсказки (например, «Очень-очень

холодно!») и добавьте соответствующие подсказкам расстояния.

#3. Ограничение по кликам

Установите ограничение количества кликов и показывайте

игроку сообщение «КОНЕЦ ИГРЫ», если он превысит это

ограничение.

#4. Отображение числа оставшихся кликов

После подсказки «Горячо» или «Холодно» выводите на экран

число оставшихся кликов, чтобы проигрыш не был для игрока

неожиданностью.

12

О Б Ъ Е К Т Н О  О Р И Е Н Т И Р О В А Н Н О Е

П Р О Г РА М М И Р О В А Н И Е

В этой главе мы узнаем, как создавать и использовать объекты в рамках объ-

ектно-ориентированного программирования . Объектно-ориентированное

программирование (ООП) — это способ проектирования и написания кода,

когда все важные части программы являются объектами. Например, если

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

ООП и запрограммировать объект «машина», а затем создать множество

таких объектов, обладающих одинаковым набором свойств и одинаковой

функциональностью.

Простой объект

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

рые представляют собой пары «ключ-значение». Например, в следующем

коде объект dog описывает собаку, и у него есть свойства — name (имя),

legs (количество лап) и isAwesome (обозначает, хороша ли эта собака):

var dog = {

name: "Оладушек",

legs: 4,

isAwesome: true

};

176

К свойствам созданного объекта можно обращаться через точечную

нотацию (о ней мы говорили на с. 72 в разделе «Доступ к значениям

внутри объектов»). Например, так мы можем получить свойство name

нашего объекта dog:

dog.name;

"Оладушек"

Кроме того, с помощью точечной нотации можно добавлять объекту

новые свойства:

dog.age = 6;

При этом у объекта появится еще одна пара «ключ-значение» (age: 6),

в чем можно легко убедиться:

dog;

Object {name: "Оладушек", legs: 4, isAwesome: true, age: 6}

Добавление к объектам новых методов

В последнем примере мы создали несколько свойств, которые хранят