Многократное использование return вместо конструкции if... else . . . . . 137
Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
ЧАСТЬ II.
ПРОДВИНУТЫЙ JAVASCRIPT
9. DOM И JQUERY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Поиск элементов DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Работа с деревом DOM через jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Создание новых элементов через jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Анимация элементов средствами jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Цепной вызов и анимация на jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
10. ИНТЕРАКТИВНОЕ ПРОГРАММИРОВАНИЕ . . . . . . . . . . . . . . . . . . . . 156
Отложенное выполнение кода и setTimeout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Отмена действия таймера . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Многократный запуск кода и setInterval . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Анимация элементов с помощью setInterval . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Реакция на действия пользователя . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
11. ПИШЕМ ИГРУ «НАЙДИ КЛАД!» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Проектирование игры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Создаем веб-страницу с HTML-кодом . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Выбор случайного места для клада . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Обработчик кликов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Код игры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Оглавление 7
12. ОБЪЕКТНООРИЕНТИРОВАННОЕ
ПРОГРАММИРОВАНИЕ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Простой объект . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Добавление к объектам новых методов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Создание объектов с помощью конструкторов . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Рисуем машины . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Настройка объектов через прототипы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
ЧАСТЬ III. ГРАФИКА
13. ЭЛЕМЕНТ CANVAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Создаем «холст» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Рисование на «холсте» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Выбор цвета . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Рисование контуров прямоугольников . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Рисование линий или путей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Заливка путей цветом . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Рисование дуг и окружностей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Рисование нескольких окружностей с помощью функции . . . . . . . . . . . . 204
Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
14. АНИМАЦИИ С ПОМОЩЬЮ CANVAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Движение по странице . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Изменение размера квадрата . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Случайная пчела . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Отскакивающий мяч . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
15. УПРАВЛЕНИЕ АНИМАЦИЯМИ С КЛАВИАТУРЫ . . . . . . . . . . . . . . 224
События клавиатуры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Управляем мячом с клавиатуры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Код программы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Запуск программы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
16. ПИШЕМ ИГРУ «ЗМЕЙКА»: ЧАСТЬ 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Игровой процесс . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
8 Оглавление
Структура игры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Начинаем писать игру . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Рисуем рамку . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Отображение счета . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Конец игры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
17. ПИШЕМ ИГРУ «ЗМЕЙКА»: ЧАСТЬ 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Создаем конструктор Block . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Создаем змейку . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Перемещаем змейку . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Управляем змейкой с клавиатуры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Создаем яблоко . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Код игры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
ПОСЛЕСЛОВИЕ:
КУДА ДВИГАТЬСЯ ДАЛЬШЕ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Больше о JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Веб-программирование . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
Графическое программирование . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
3D-программирование . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278