Table Of Content

Алексей Бахирев Сюрреализм на 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 Формат 60x90/8. Бумага мелованная. Гарнитура Neris. Печать цифровая. Уел. Печ. л. 28,5 Тираж 2000 экз. Заказ № 2108 Издательство ООО «СИНЭЛ»; Отпечатано в типографии ООО «СИНЭЛ» 194223, Санкт-Петербург, ул. Курчатова, 10 ISBN 978-5-9905660-7-1 Содержание Введение............................................................................................................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 Зачем использовать ЕМ вместо РХ?.............................................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 Обфускация.............................................................................................171 CSRF..........................................................................................................175 DDOS..........................................................................................................177 Clickjacking...............................................................................................178 Клавиатурные шпионы ........................................................................178 Какие уязвимости стоит искать........................................................180 Пре-продакшн Логика локализации приложения..................................................182 Плохая логика локализации.............................................................187 Классическая сборка .........................................................................188 Заморозка и инкрементальные обновления................................190 Генерация ресурсов...........................................................................191 Автотесты через API фреймворка....................................................193 Offtop Сертификация JavaScript-разработчиков.......................................198 Собеседование JS-программистов....................................................201 Задача на выделение N комментариев...........................................201 Задача на быстрый поиск..................................................................203 Использованные источники.................................................................204 Рекомендуемые материалы.................................................................207 Заключение.............................................................................................209 Приложение Формулы расчета столкновений......................................................210 Вопросы на собеседовании.................................................................216 Ответы на вопросы...............................................................................221 Таблица кодов кнопок клавиатуры..................................................224 Таблицы соответствия размеров в ЕМ и Р Х ................................225 б Введение Эта книга рассчитана, в основном, на опытных веб-разработчиков, которые делают сайты не один год. В книге встречается множество отсылок к авторам различных публикаций и экспертам фронтенд-разработки. Многие темы описаны с расчетом на запас опыта и знаний у читателя. Если вы читаете эту книгу в электронном виде на мобильном устройстве с маленьким дисплеем, возможно, многие иллюстрации и скриншоты будут в ненадлежащем качестве. В таком случае вам следует приобрести печатный экземпляр или найти электронную версию для просмотра на более широком экране. Если вы собрали эту книгу из исходного JSON-файла — поздравляю! Если вы не знали, что книга есть в формате JSON и захотели её собрать — ссылку на файл можно найти в конце. В любом проекте есть баги, а в любой книге — опечатки и ошибочные суждения. Помните об этом, т. к. и эта книга не является исключением из правил. P.S.: Дизайн действительно «подозрительно похож» на журнал «Frontender Magazine» (http://frontender.info/). 9 Архитектура игровых движков История В 1999 году веб только набирал обороты. С одной стороны, к этому времени уже окончилась «война браузеров» 1996- 1998 годов, с другой — вакансия JavaScript разработчика выглядела довольно неперспективной. Но даже в то время было несколько фанатов JS, которые пробовали писать на нем игры. Их звали Masahiko Nitanda и Kazuhiro Moriyama. Эти два парня жили в Японии и делали просто восхитительные вещи на JavaScript'e. Они не только пытались копировать игры с Денди, но даже пытались создавать подобие 3D игр в браузере. Напомню, что дело было в 1999 году, и самым передовым на тот момент считался Internet Explorer 6. Как же им это удавалось? 10 История Ну, во-первых, в основе любой системы, прежде всего, лежит архитектура. Именно архитектура и алгоритмы помогают создавать сложные вещи. Во-вторых, они проявили немалую смекалку, чтобы простыми методами, так или иначе, обойти те или иные ограничения платформы. Давайте разберем несколько их приемов. JS Flanker Рис. 1. Скриншоты игры JS Flanker. В игре вы управляете самолетом и должны сбивать врагов. Битва идет на водной территории. Особенностью игры было вращение уровня горизонта в зависимости от маневра самолета. Рис. 2. Цветом выделены составные элементы интерфейса игры. В то время не было ни CSS-трансформаций, ни элемента canvas. Для имитации вращения использовался набор картинок, четыре из которых были закрашены по диагонали. Растяжением и сжатием этих картинок можно имитировать наклон линии горизонта на разный угол и создавать эффект свободного вращения. Архитектура игровых движков JS Racing Рис. 3. Скриншоты игры JS Racing. В игре вы управляете машиной и должны обогнать соперника. Соревнование проходит на различных уровнях. Особенностью игры была имитация ЗО-движения по дороге. Рис. 4. Цветом выделены составные элементы интерфейса игры. Для создания данного эффекта дорога сделана из набора картинок, которые растянуты по длине. Чем ближе картинка — тем больше она растянута, и наоборот — дальние картинки сжаты по длине. Эти картинки также постепенно смещаются влево или вправо, имитируя поворот дороги. То же самое касается и всех дополнительных объектов, начиная от соседних машин и заканчивая придорожными деревьями. Чем дальше объект, тем больше он сжат в размерах, чем ближе — тем больше растянут. 12