Сюрреализм на JavaScript [Алексей Михайлович Бахирев] (pdf) читать постранично

Алексей Бахирев

Сюрреализм
на

JavaScript
Санкт-Петербург
СИНЭЛ
2014

УДК
004.432.42
ББК
32.973.26-018.2
БЗО
Бахирев А.М.
Сюрреализм на JavaScript.—Санкт-Петербург: СИНЭЛ,
БЗО 2014.— 228 с.: 93 ил.
ISBN 978‑5‑9905660-7-1
Книга о разработке игр и приложений на JavaScript. В книге встречается
множество отсылок к авторам различных публикаций и экспертам фронтендразработки. Также затрагивается тема кроссплатформенной разработки
на JavaScript для различных устройств, XSS атаки, обфуская кода, и
конвертирования HTML в EXE, HTA, CHM и т.п.

УДК 004.432.42
ББК 32.973.26-018.2
Бахирев Алексей Михайлович
Сюрреализм на JavaScript
Художник Артем Вадимович Назарчук
Верстальщик Наталья Владимировна Лукина
Подписано в печать 21.08.2014
Формат 60х90/8. Бумага мелованная.
Гарнитура Neris. Печать цифровая. Усл. Печ. л. 28,5
Тираж 2000 экз. Заказ № 2108
Издательство ООО «СИНЭЛ»; Отпечатано в типографии ООО «СИНЭЛ»
194223, Санкт-Петербург, ул. Курчатова, 10

ISBN 978‑5‑9905660-7-1

Cодержание

Cодержание
Введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Архитектура игровых движков
История . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Архитектура . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Стрельба . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Мини-игры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Классы и фабрики . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Стандартизация интерфейсов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Как сохранить и загрузить объекты . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Разделение рендера . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Реализация рендера в игровом движке StalinGrad . . . . . . . . . . . 33
Советы по организации рендера . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Квадратный интерфейс . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Рендер кривых . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Работа со спрайтами . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Кэширование и догрузка ресурсов камеры . . . . . . . . . . . . . . . . . . . 45
Реестр элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Работа под нагрузкой . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Сетка и динамические массивы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Создание карты уровня . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Рассинхронизация таймеров . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Кроссплатформенная разработка
История . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
JS в CHM, HTA, EXE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
4

Разработка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
API устройств . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Мобильные телефоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Touch-экраны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Телевизоры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Портирование игры с браузера в TV . . . . . . . . . . . . . . . . . . . . . . . . . 90
Клавиатура . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Синхронизация устройств . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Проблемы разработки под Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Хэш-контроллеры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Мелкие оптимизации и костыли
Уменьшение вложенности . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Текстовые вставки в код . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Ресайз . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Зачем использовать EM вместо PX? . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Вставка CSS через JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Конечные автоматы на CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Правила работы с DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
БЭМ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
JS в PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Сжатие кода . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Защита от сервера . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Данные через CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Игра в 0 строк кода . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
JSON запросов и параметров . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Модуль colors и консоль . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

Теги и костыли, о которых забывают
СЕО-теги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Теги в head . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Теги полей ввода, ссылки, таблицы . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Хаки для IE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Верстка писем . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
5

Содержание

XSS, CSRF и т. п.
XSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Обфускация . . . . . . . . .