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

 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}

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

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

значения разных типов: строку ("Оладушек"), числа (4 и 6) и булево

значение (true). Помимо строк, чисел и булевых значений в свойствах

объектов можно хранить функции — тогда эти свойства называют

методами . В сущности, мы уже пользовались некоторыми встроенными

в JavaScript методами: например, это метод join для массивов и метод