├── .gitignore ├── README.md ├── css ├── 1280x800.jpg ├── 320x568.jpg ├── 768x1024.jpg ├── article-images │ ├── Unknown-1.jpeg │ ├── Unknown-10.jpeg │ ├── Unknown-11.jpeg │ ├── Unknown-12.jpeg │ ├── Unknown-13.jpeg │ ├── Unknown-14.jpeg │ ├── Unknown-15.jpeg │ ├── Unknown-16.jpeg │ ├── Unknown-17.jpeg │ ├── Unknown-18.jpeg │ ├── Unknown-19.jpeg │ ├── Unknown-2.jpeg │ ├── Unknown-20.jpeg │ ├── Unknown-3.jpeg │ ├── Unknown-4.jpeg │ ├── Unknown-6.jpeg │ ├── Unknown-7.jpeg │ ├── Unknown-8.jpeg │ ├── Unknown-9.jpeg │ └── Unknown.jpeg ├── readme.md └── text.md └── js ├── readme.md └── sample ├── css ├── app.css └── reset.css ├── img ├── box.png ├── door.png ├── door__box.png ├── door_level_0.jpg ├── door_locked.png ├── level_0_bg.jpg ├── level_1_bg.png ├── level_2_bg.png ├── level_3_bg.png ├── level_4_bg.png └── logo.png ├── index.html └── js ├── app.js ├── doorBase.js └── doorOthers.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### [Домашнее задание по CSS](css/readme.md) 2 | ### [Домашнее задание по JS](js/readme.md) 3 | 4 | 5 | -------------------------------------------------------------------------------- /css/1280x800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/1280x800.jpg -------------------------------------------------------------------------------- /css/320x568.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/320x568.jpg -------------------------------------------------------------------------------- /css/768x1024.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/768x1024.jpg -------------------------------------------------------------------------------- /css/article-images/Unknown-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/article-images/Unknown-1.jpeg -------------------------------------------------------------------------------- /css/article-images/Unknown-10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/article-images/Unknown-10.jpeg -------------------------------------------------------------------------------- /css/article-images/Unknown-11.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/article-images/Unknown-11.jpeg -------------------------------------------------------------------------------- /css/article-images/Unknown-12.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/article-images/Unknown-12.jpeg -------------------------------------------------------------------------------- /css/article-images/Unknown-13.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/article-images/Unknown-13.jpeg -------------------------------------------------------------------------------- /css/article-images/Unknown-14.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/article-images/Unknown-14.jpeg -------------------------------------------------------------------------------- /css/article-images/Unknown-15.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/article-images/Unknown-15.jpeg -------------------------------------------------------------------------------- /css/article-images/Unknown-16.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/article-images/Unknown-16.jpeg -------------------------------------------------------------------------------- /css/article-images/Unknown-17.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/article-images/Unknown-17.jpeg -------------------------------------------------------------------------------- /css/article-images/Unknown-18.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/article-images/Unknown-18.jpeg -------------------------------------------------------------------------------- /css/article-images/Unknown-19.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/article-images/Unknown-19.jpeg -------------------------------------------------------------------------------- /css/article-images/Unknown-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/article-images/Unknown-2.jpeg -------------------------------------------------------------------------------- /css/article-images/Unknown-20.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/article-images/Unknown-20.jpeg -------------------------------------------------------------------------------- /css/article-images/Unknown-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/article-images/Unknown-3.jpeg -------------------------------------------------------------------------------- /css/article-images/Unknown-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/article-images/Unknown-4.jpeg -------------------------------------------------------------------------------- /css/article-images/Unknown-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/article-images/Unknown-6.jpeg -------------------------------------------------------------------------------- /css/article-images/Unknown-7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/article-images/Unknown-7.jpeg -------------------------------------------------------------------------------- /css/article-images/Unknown-8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/article-images/Unknown-8.jpeg -------------------------------------------------------------------------------- /css/article-images/Unknown-9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/article-images/Unknown-9.jpeg -------------------------------------------------------------------------------- /css/article-images/Unknown.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/css/article-images/Unknown.jpeg -------------------------------------------------------------------------------- /css/readme.md: -------------------------------------------------------------------------------- 1 | ## Домашнее задание по CSS 2 | Вёрстка журнальной статьи с использованием техник адаптивной верстки. 3 | 4 | Совершенно необязательно верстать все секции статьи: техники верстки повторяются, поэтому важнее попробовать все техники, а не охватить весь объем статьи. 5 | 6 | #### Файлы: 7 | - [text.md](text.md) — текст статьи 8 | - [article-images](article-images) — картинки из дизайна отдельными файлами 9 | - [1280x800.jpg](1280x800.jpg) — дизайн для широких экранов 10 | - [768x1024.jpg](768x1024.jpg) — дизайн для планшетов 11 | - [320x568.jpg](320x568.jpg) — дизайн для мобильных 12 | 13 | #### Основные техники, которые должны быть реализованы: 14 | - Каждая новая часть статьи в т.ч. первая начинается с изображения на всю ширину экрана, на 80% от высоты экрана и с текстом поверх картинки 15 | - Основной контент содержится в двух колонках, расположенных по центру: 16 | - Левая колонка содержит основной текст 17 | - Правая колонка содержит вспомогательную информацию: цитаты, некоторые фотографии, небольшие заметки 18 | - Левая колонка не должна быть шире 600px. При уменьшении ширины страницы колонка тоже уменьшается. 19 | - Правая колонка не должна быть шире 400px. При уменьшении ширины страницы колонка тоже уменьшается. 20 | - При уменьшении ширины экрана должны сохраняться отступы по бокам. На широких экранах по 40px, на узких — до 16px. 21 | - При уменьшении ширины экрана должен сохраняться отступ между колонками до 64px 22 | - При уменьшении ширины экрана необходимо изменить раскладку с двух колонок до одной колонки, состоящей из основного контента и "вкраплений" элементов из правой колонки. Ширину, при которой происходит такое изменение, предлагается выбрать самостоятельно. 23 | - Первая буква первого абзаца большая 24 | 25 | #### Также приветствуется реализация дополнительных техник на более высокую оценку: 26 | - Адаптивные изображения: 27 | - Разное разрешение изображения в зависимости от DPI экрана 28 | - Разное обрезание изображений в зависимости от ширины экрана 29 | - При скролле первое изображение и изображения в начале секций не двигаются (по типу position: fixed). 30 | - Текст выровнен в колонку (justified), при этом пробелы между словами не меняются за счет переноса слов по слогам. 31 | - Адаптивная типографика: колонки могут быть шире 600px и 400px, но при этом число слов должно быть примерно таким же как и в базовом дизайне за счет изменения размера шрифта (он будет крупнее). Аналогично при уменьшении ширины: чем меньше экран, тем меньше текст. *Естественно, все подгоняется с позиции удобства чтения.* 32 | 33 | #### На что можно ориентироваться: 34 | - http://espn.go.com/espn/feature/story/_/id/9175394/out-great-alone 35 | - http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek 36 | - https://thebigplans.ru/targetprice 37 | 38 | ## Куда и когда присылать 39 | - Работы присылать на dndushkin@yandex-team.ru 40 | - Желательно ссылками на сверстанную страницу (например, разместить на бесплатном [GitHub Pages](https://pages.github.com/) с помощью gh-pages) 41 | - На крайний случай просто архивом 42 | - Тема: "ДЗ по CSS (фамилия и имя)" 43 | - Срок — до 7 июля 44 | 45 | Не забываем добавлять тег, запрещающий индексацию страницы, чтобы у оригинала не забирать трафик: 46 | ```html 47 | 48 | ``` 49 | -------------------------------------------------------------------------------- /css/text.md: -------------------------------------------------------------------------------- 1 | ФАРЕРЫ 2 | 3 | ПЕРВЫЙ РАЗ В ИСТОРИИ 4 | 5 | Первоисточник: http://silavetra.com/faroeislands 6 | Авторы: Алиса Сорокина, Яна Сорокина, Ольга Цапко — команда «Силы Ветра» 7 | 8 | Всё началось праздничным январским вечером. Мы с друзьями собрались, чтобы отметить Рождество, приготовить вкусный ужин и посмотреть кино. С другого конца стола я услышала: 9 | 10 | — Давайте летом поедем туда! 11 | — Куда? — спросила я. 12 | 13 | Вместо ответа мне показали фотографии. Я ещё не знала, что это за место, в какой точке Земли находится, как называется, но уже понимала — еду! 14 | 15 | За этим последовали обычные хлопоты подготовки к поездке: получение визы, приобретение и сбор всего необходимого, поиски информации и составление маршрутов. 16 | 17 | Вопрос о способе передвижения между островами перед нами не стоял. Две яхты были готовы к отплытию 26 июля 2015 года. Кстати говоря, мы были первыми, кто арендовал яхты на целую неделю. В нашем распоряжении была лоция с подробной информацией о маринах, течениях, ветрах, но никаких фотографий, описаний, отзывов и впечатлений других яхтсменов мы не нашли. Это дало нам прекрасный шанс почувствовать себя первооткрывателями. 18 | 19 | 20 | /// 21 | 22 | Пятнадцать человек и семь дней интригующей неизвестности. Все ждали той особенной свободы, присущей только северному морю на краю цивилизации. 23 | 24 | Практически всё, что мы знали о Фарерах, когда садились в самолет, — это то, что овец в этом месте больше, чем людей, что фарерцы охотятся на дельфинов, что там живут смешные птицы под названием тупики, что острова — одно из самых рыбных мест на Земле, и там очень красиво. 25 | 26 | 27 | ПЕРЕЛЁТ И ДОРОГА 28 | 29 | Когда самолёт, выполняющий рейс Копенгаген — Воар (Vágar), начал снижаться, мы прилипли к иллюминаторам. Всюду был туман, из которого вдруг выплыли величественные скалы и то самое знаменитое озеро Сёрвагсватн (Sørvágsvatn), над которым мы летели так низко, что казалось, будто самолет будет приводняться. 30 | 31 | Мы ещё не сошли на землю, но уже впечатлились суровым пейзажем: невероятные зелёные холмы, высоченные утёсы, такие ровные, будто их ножом срезали, тёмная, живая вода океана, густой туман и водопады. Фарерские острова — это страна мистических туманов, ветров и водопадов. По местной легенде, названия водопадов — это вербальное выражение уникального шума каждого из них. Фарерцы слушали их и давали имена. 32 | 33 | /// 34 | 35 | Первыми жителями Фарерских островов, которых мы встретили, оказались овцы. Они просто гуляли по территории аэропорта. 36 | 37 | Если вы не арендуете машину, заранее посмотрите расписание автобусов из аэропорта в Торсхавн (Torshavn). Они ходят достаточно редко. Стоимость билета — 90 датских крон (примерно 850 р.) 38 | 39 | 40 | ПОГОДА 41 | 42 | Мы знали про изменчивую фарерскую погоду и испытали все её особенности на себе. Обещали, что будет холодно, и не обманули. 43 | 44 | Температура в самый тёплый месяц года не поднималась выше 14 градусов днём, что при наличии сильного ветра в море создавало достаточно суровые условия. Обещали дожди, но тут нам повезло: основательный дождь шёл только в один из дней. В остальном погода соответствовала фарерской поговорке «Не нравится погода — подожди пять минут». Северное солнце за минуты сменялось густым, непроглядным туманом, за которым следовал дождь, а ещё через полчаса небо снова расчищалось. 45 | 46 | /// 47 | 48 | Встроенная печка на одной из яхт не раз нас спасала. На другой яхте система обогрева регулярно давала сбои из-за низкого заряда сервисной батареи — в кают-компании ребята спали в термобелье и зимних строительных комбинезонах. 49 | 50 | 51 | 52 | МОРЕ 53 | 54 | 55 | Со снаряжением я как-то справилась, но противостоять волнам во время пятичасовых переходов никакая экипировка не поможет. Я прижималась к леерной стойке на корме лодки, каждая волна обдавала меня холодными солёными брызгами. 56 | 57 | Я смотрела вдаль на горизонт и понимала, что даже качка не в силах испортить момента. Мне было жалко людей, которые жалели меня, потому что им самим порой было не лучше. Смешно, что мы даже в туалет не ходили, потому что для этого нужно было спускаться в кают-компанию, а нахождение там во время сильной качки более трёх минут влечёт за собой необратимые последствия, если вы понимаете, о чем я. 58 | 59 | Когда проходишь на яхте мимо фьордов, огромных камней и высоких пещер, с разных ракурсов видишь живые щупальца тумана, которые опускаются вниз по склонам, окутывают вершины, наполняют гроты и поглощают целые острова. Туман словно дышит, медленно и глубоко. Он зачаровывает. Он создаёт удивительный эффект парящих гор, ощущение, будто ты оказался в одном из мультфильмов Хаяо Миядзаки. 60 | 61 | Казалось, что к этим пейзажам можно привыкнуть, но каждый раз за поворотом нас ждало что-то такое, от чего замирало сердце. Невероятные недоступные долины, где каким-то образом оказывался одинокий маленький домик, солнечный свет, пробивающийся сквозь облака, насыщенная зелень склонов, тёмные и глубокие пещеры — всё это хочется видеть ещё и ещё. В одну из пещер мы заплыли на тузике: сужающиеся проходы, полная темнота и набегающие волны заставили нас понервничать. 62 | 63 | 64 | /// 65 | Меня удивил и поразил океан. Его воды полны невидимой жизни и силы. Иногда становилось не по себе от ощущения, что мы здесь с ним один на один. 66 | 67 | 68 | ПЕШИЕ ПОХОДЫ 69 | 70 | После морского путешествия мы на пару дней взяли машины напрокат. Острова открылись нам с совершенно другой стороны, поразив своей красотой и влюбив в себя окончательно и бесповоротно. 71 | Часть островов соединены платными туннелями или мостами. На некоторые можно попасть только на пароме или вертолёте. Автомобильные дороги в основном двухполосные, но встречаются и однополосные, редкие машины разъезжаются через специальные «карманы» на обочинах. Если откуда-то с дороги открывается прекрасный вид на фьорды, будьте уверены — фарерцы уже сделали там смотровую площадку. 72 | 73 | 74 | /// 75 | Интересно, что все деревья, которые есть на островах, завезены с Аляски или Огненной Земли. Чаще всего их можно увидеть во дворах состоятельных жителей. А вот зелёная трава прекрасно растёт даже на тонком слое почвы. Фарерцы давным-давно приспособились использовать траву для сохранения тепла: крыши многих домов покрыты своеобразным зелёным газоном. 76 | 77 | ОЗЕРО СЁРВАГСВАТН 78 | 79 | Фотографии озера, возвышающегося над океаном, вошли, кажется, во все списки самых красивых мест на Земле. 80 | Это озеро Сёрвагсватн или Лайтисватн (Sørvágsvatn / Leitisvatn). Находится оно на острове Воар в нескольких километрах от аэропорта. 81 | Автомобильная дорога подходит к озеру только с одной стороны, так что до самых живописных видов придётся пройтись. Однако эта двухчасовая прогулка определённо того стоит. На южной оконечности острова вас ждут высоченные утёсы, завывающий ветер и водопад, летящий прямо в океан. 82 | 83 | ОСТРОВ МИКИНЕС 84 | 85 | Посещение острова Микинес (Mykines) обязательно, если вы добрались до Фарерских островов. На машине туда не попасть, поэтому лучше запланировать поездку заранее: изучить расписание паромов и купить билет или забронировать полёт на вертолёте. Утром вас привезут на остров, вечером заберут обратно. 86 | Для прогулки по Микинесу вам потребуется обувь с нескользящей подошвой: трава почти всегда мокрая от дождя или тумана. Наградой за тяжёлый подъём, который займёт не менее двух часов, будут единение с природой, туман, который можно потрогать, тупики, бараны и маяк на краю света. 87 | Что ещё действительно стоит сделать — это захватить с собой пару термосов с чаем, чего-нибудь вкусного и устроить пикник на самой западной точке острова, откуда отрывается вид на бесконечную Атлантику. Несмотря на то, что Микинес считается туристическим местом, мы нашли только одно маленькое, но уютное кафе с вафлями и кофе, которые после пяти часов, проведённых на свежем воздухе, кажутся волшебными. 88 | 89 | /// 90 | 91 | На Микинесе тупиков практически можно схватить за хвост. Тут их целые колонии. Поначалу не обращаешь внимания на небольшие углубления в холме, но, приглядевшись, обнаруживаешь, что это норы маленьких птичек, которые рычат оттуда, да-да, именно рычат, защищая свое жилище. Этот звук совершенно не ассоциируется с такими милыми созданиями. 92 | 93 | 94 | САКСУН 95 | 96 | В местечке Саксун (Saksun) можно провести не один час, что мы и сделали в первый день после сдачи лодок, несмотря на проливной дождь. Надо сказать, что этот дождь преобразил пейзаж: водопады наполнились водой и дружно зашумели. Под этот гул мы спускались в долину реки, которая разделяет деревушку Саксун на две части. Внизу у нас перехватило дыхание. То самое состояние, когда понимаешь, насколько величественна природа. 97 | Место, где мы стояли, оказалось дном приливно-отливного озера Поллур (Pollurin). Мы как раз застали отлив, но моё воображение сразу же нарисовало огромную волну возвращающейся воды. К счастью, приливы там небольшие, сантиметров 40. Мы шли всё дальше к океану, а сердце замирало от детского восторга. 98 | Промокшие, но довольные, вернулись к машинам и поехали искать место, где можно хоть чем-то перекусить. Такое место мы нашли на заправке и съели там сначала по одной сосиске в тесте, а потом на всякий случай ещё по одной: уж слишком мала вероятность встретить кафе или ещё одну крупную заправку на пути. 99 | 100 | 101 | 102 | МЕСТНЫЕ ЖИТЕЛИ И ПРОМЫСЕЛ 103 | 104 | На стенах в домах фарерцев висят старые чёрно-белые фотографии, на которых всё большое семейство в вязаных свитерах с национальными узорами стоит рядом с убитым дельфином. 105 | 106 | Различные организации по защите животных пытаются противостоять жестокому убийству. Вокруг островов постоянно курсирует корабль Общества охраны морской фауны и пытается физически помешать забою дельфинов. Однако фарерцы в ответ на агрессивное поведение защитников животных приняли закон, позволяющий применять силу против подобных судов. До сих пор каждый фаререц, которому ещё не довелось участвовать в охоте на чёрных дельфинов (гринд), мечтает об этом. Экспорт китового жира и мяса запрещён, весь улов идет в пищу в зимнее время года. 107 | 108 | На своём пути мы встречали много замечательных, добрых, искренних, порой немного наивных и всегда болеющих душой за чужое горе людей. Привезти переходник для подключения электричества, позвонить главному харбор-мастеру по островам и узнать, можно ли лодкам остаться на ночь, отдать последнюю бутылку охлаждающей жидкости из своей машины — всё это для любого фарерца является само собой разумеющимся. 109 | 110 | Люди на островах никуда не спешат, не торопятся и не бегут. Молодежь весело болтает за столиком с чашечкой кофе, старики, сидя на пристани, витают мыслями где-то далеко и вспоминают былое. Все они наслаждаются этой неспешной жизнью. 111 | 112 | Океан играет большую роль в жизни фарерцев. Он их кормит и дает им работу. Многие с детства и до самой смерти рыбачат, работают на лососевых фермах или рыбоперерабатывающих заводах. Студенты в основном работают в сфере услуг: в кафе и ресторанах, в магазинах, гостиницах и, конечно, на семейных фермах. 113 | 114 | /// 115 | 116 | Чтобы понять этот обычай, нужно сюда приехать. Нужно посмотреть в глаза человеку, который рассказывает вам, что это традиция, а не развлечение. Это еда, способ выживания на земле, на которой ничего не растет, которая не может прокормить. 117 | 118 | Фарерцы — удивительные, волшебные люди. Они не знают обмана, не понимают сарказма. Их дома, как и сердца, всегда открыты. 119 | 120 | КОМАНДА «СИЛЫ ВЕТРА» 121 | -------------------------------------------------------------------------------- /js/readme.md: -------------------------------------------------------------------------------- 1 | ## Домашнее задание по JS 2 | Реализация пользовательских жестов в рамках игры «Dungeon of Doom». 3 | 4 | Прохождение игры состоит из последовательного открытия дверей и в конце открытия сундука. Каждая дверь представляет из себя мини-загадку для решения которой игрок должен сделать какой-либо жест. Жесты могут быть как для одного указателя, так и для нескольких. 5 | 6 | Для открытия первой двери игрок должен одновременно зажать три кнопки, чтобы дверь открылась. Это невозможно сделать на компьютере, поэтому пройти эту дверь можно только с мобильного устройства с multi-touch (т.е. с помощью любого смартфона). 7 | 8 | Остальные две двери и сундук предлагается реализовать вам. Графическое оформление также можно менять по желанию. 9 | 10 | #### Файлы 11 | - [sample](sample) — папка с самой игрой 12 | - [sample/index.html](sample/index.html) 13 | - [sample/css](sample/css) — папка со стилями. В файле [sample/css/app.css](app.css) основные стили. 14 | - [sample/js/doorBase.js](sample/js/doorBase.js) — базовый класс двери. От него наследуются все двери и сундук. 15 | - [sample/js/doorOthers.js](sample/js/doorOthers.js) — реализации дверей в игре. Первая дверь реализована полноценно и может быть использована в качестве примера. Остальные двери реализованы по принципу "любой клик на двери её откроет". Вам предлагается заменить эту логику на более сложную. 16 | 17 | Свой код дверей предполагается писать в рамках 18 | ```js 19 | // ==== Напишите свой код для открытия сундука здесь ==== 20 | ... 21 | // ==== END Напишите свой код для открытия сундука здесь ==== 22 | ``` 23 | а также в `index.html` в DOM-элементах `.popup_level_1`, `popup_level_2` и `popup_level_3`. 24 | 25 | 26 | #### Основные техники, которые должны быть реализованы: 27 | - Использование Pointer Events. 28 | - Жест открытия для одной двери. 29 | 30 | #### Также приветствуется реализация дополнительных техник на более высокую оценку: 31 | - Сложные жесты, которые будет непросто сделать игроку. Желательно с использованием нескольких указателей (пальцев). Можно вдохновляться играми серии The Room, всевозможными пазлами и загадками в квестах. Например: 32 | - Для открытия двери необходимо сдвинуть в разные стороны несколько затворов. 33 | - За определенное время покрутить по кругу несколько рычагов. 34 | - "Восстановить" механизм открытия двери перемещением шестеренок в соответствующие им пазы. 35 | - Сделать разные жесты открытия для всех дверей и сундука. 36 | 37 | #### Вспомогательные материалы 38 | Графические материалы можно взять с http://kenney.nl/assets/ или любого другого сайта с бесплатными ресурсами для игр. В этой игре используются изображения из набора http://kenney.nl/assets/platformer-pack-redux. 39 | 40 | ## Куда и когда присылать 41 | - Работы присылать на dndushkin@yandex-team.ru 42 | - Желательно сопроводить работу кратким описанием основных фишек (чтобы при оценке ничего не забылось) 43 | - Лучше ссылками на сверстанную страницу (например, разместить на бесплатном [GitHub Pages](https://pages.github.com/) с помощью gh-pages) 44 | - На крайний случай просто архивом 45 | - Тема: "ДЗ по JS (фамилия и имя)" 46 | - Срок — до 14 июля 12:00 47 | -------------------------------------------------------------------------------- /js/sample/css/app.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | min-height: 100%; 3 | } 4 | 5 | body { 6 | background-color: #ACC0C1; 7 | } 8 | 9 | .container { 10 | position: relative; 11 | max-width: 400px; 12 | margin: 0 auto; 13 | } 14 | 15 | @media (min-width: 450px) { 16 | .container { 17 | box-shadow: 1px 1px 20px #666; 18 | } 19 | } 20 | 21 | .level { 22 | position: relative; 23 | min-width: 320px; 24 | background-size: cover; 25 | background-position: left top; 26 | background-repeat: no-repeat; 27 | } 28 | 29 | .level_0 { 30 | background-image: url(../img/level_0_bg.jpg); 31 | height: 180px; 32 | position: relative; 33 | } 34 | 35 | .level_0:after { 36 | content: ' '; 37 | display: block; 38 | position: absolute; 39 | top: 0; 40 | left: 0; 41 | right: 0; 42 | bottom: 0; 43 | background: url(../img/logo.png) no-repeat center 25px; 44 | background-size: contain; 45 | pointer-events: none; 46 | } 47 | 48 | .level_1 { 49 | background-image: url(../img/level_1_bg.png); 50 | height: 235px; 51 | } 52 | 53 | .level_2 { 54 | background-image: url(../img/level_2_bg.png); 55 | height: 235px; 56 | } 57 | 58 | .level_3 { 59 | background-image: url(../img/level_3_bg.png); 60 | height: 235px; 61 | } 62 | 63 | .level_4 { 64 | background-image: url(../img/level_4_bg.png); 65 | height: 75px; 66 | } 67 | 68 | .door { 69 | position: absolute; 70 | bottom: 0; 71 | background: url(../img/door.png) no-repeat top left; 72 | width: 64px; 73 | height: 100px; 74 | 75 | cursor: pointer; 76 | } 77 | 78 | .door_locked { 79 | background: url(../img/door_locked.png) no-repeat top left; 80 | } 81 | 82 | .door_disabled { 83 | opacity: .7; 84 | } 85 | 86 | .door_level_0 { 87 | right: 2%; 88 | } 89 | 90 | .door_level_1 { 91 | left: 2%; 92 | } 93 | 94 | .door_level_2 { 95 | right: 2%; 96 | } 97 | 98 | .box { 99 | position: absolute; 100 | left: 10%; 101 | bottom: 0; 102 | 103 | background: url('../img/box.png') no-repeat top left; 104 | width: 32px; 105 | height: 32px; 106 | 107 | cursor: pointer; 108 | } 109 | 110 | .popup { 111 | position: fixed; 112 | left: 0; 113 | right: 0; 114 | bottom: 0; 115 | top: 0; 116 | 117 | background-color: rgba(0,0,0,.3); 118 | transition: opacity .3s; 119 | 120 | display: flex; 121 | align-items: center; 122 | justify-content: center; 123 | } 124 | 125 | .popup_hidden { 126 | pointer-events: none; 127 | opacity: 0; 128 | } 129 | 130 | .popup__content { 131 | position: relative; 132 | width: 100%; 133 | height: 100%; 134 | max-width: 400px; 135 | 136 | background: #000 url(../img/door_level_0.jpg) no-repeat center; 137 | background-size: cover; 138 | } 139 | 140 | .popup__close { 141 | position: absolute; 142 | top: 16px; 143 | right: 16px; 144 | font-size: 24px; 145 | color: #fff; 146 | 147 | cursor: pointer; 148 | } 149 | 150 | .popup__content_level_0 { 151 | /* Можно поставить какую-нибудь свою картинку двери на бек */ 152 | } 153 | 154 | .popup__content_level_1 { 155 | /* Можно поставить какую-нибудь свою картинку двери на бек */ 156 | } 157 | 158 | .popup__content_level_2 { 159 | /* Можно поставить какую-нибудь свою картинку двери на бек */ 160 | } 161 | .popup__content_level_3 { 162 | background-image: url(../img/door__box.png); 163 | background-size: contain; 164 | } 165 | 166 | .door-riddle { 167 | display: flex; 168 | align-items: center; 169 | justify-content: space-around; 170 | height: 100%; 171 | } 172 | 173 | .door-riddle__button { 174 | width: 64px; 175 | height: 64px; 176 | border-radius: 64px; 177 | background-color: #583319; 178 | border: 1px solid #F3E9E0; 179 | box-shadow: 3px 3px 3px rgba(0, 0, 0, .4); 180 | 181 | transition: background-color .3s; 182 | } 183 | 184 | .door-riddle__button_pressed { 185 | background-color: #F3E5D9; 186 | } 187 | -------------------------------------------------------------------------------- /js/sample/css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | -------------------------------------------------------------------------------- /js/sample/img/box.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/js/sample/img/box.png -------------------------------------------------------------------------------- /js/sample/img/door.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/js/sample/img/door.png -------------------------------------------------------------------------------- /js/sample/img/door__box.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/js/sample/img/door__box.png -------------------------------------------------------------------------------- /js/sample/img/door_level_0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/js/sample/img/door_level_0.jpg -------------------------------------------------------------------------------- /js/sample/img/door_locked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/js/sample/img/door_locked.png -------------------------------------------------------------------------------- /js/sample/img/level_0_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/js/sample/img/level_0_bg.jpg -------------------------------------------------------------------------------- /js/sample/img/level_1_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/js/sample/img/level_1_bg.png -------------------------------------------------------------------------------- /js/sample/img/level_2_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/js/sample/img/level_2_bg.png -------------------------------------------------------------------------------- /js/sample/img/level_3_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/js/sample/img/level_3_bg.png -------------------------------------------------------------------------------- /js/sample/img/level_4_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/js/sample/img/level_4_bg.png -------------------------------------------------------------------------------- /js/sample/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DimitryDushkin/shri-2016-css-js/4a1e8af65f6a5e05ac796e11b929edc360fbe202/js/sample/img/logo.png -------------------------------------------------------------------------------- /js/sample/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dungeon of Doom 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 |
21 |
22 |
╳
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
╳
33 |
34 |
35 |
36 |
37 |
╳
38 |
39 |
40 |
41 |
42 |
╳
43 |
44 |
45 |
46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /js/sample/js/app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @class App 3 | * @param {Element} el 4 | */ 5 | function App(el) { 6 | var appEl = el, 7 | doors = [ 8 | new Door0(0, onUnlock), 9 | new Door1(1, onUnlock), 10 | new Door2(2, onUnlock), 11 | new Box(3, onUnlock) 12 | ]; 13 | 14 | this.doors = doors; 15 | 16 | /** 17 | * Callback вызывается в коде двери 18 | * Тут даем возможность открыть следующие двери 19 | */ 20 | function onUnlock() { 21 | var previousUnlocked; 22 | 23 | // Даем открыть следующую дверь 24 | for (var i = 0; i < doors.length; i++) { 25 | if (!doors[i].isLocked) { 26 | previousUnlocked = true; 27 | } else { 28 | if (previousUnlocked && doors[i].isLocked) { 29 | doors[i].enable(); 30 | break; 31 | } 32 | } 33 | } 34 | }; 35 | } 36 | 37 | // Start the app 38 | var app = new App(document.querySelector('.app')); 39 | -------------------------------------------------------------------------------- /js/sample/js/doorBase.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Базовый класс всех дверей 3 | * @class DoorBase 4 | * @param {Number} number 5 | * @param {Function} onUnlock 6 | */ 7 | function DoorBase(number, onUnlock) { 8 | this.number = number; 9 | this.onUnclockCallback = onUnlock; 10 | 11 | this.level = document.querySelector('.level_' + number); 12 | this.door = document.querySelector('.door_level_' + number); 13 | this.popup = document.querySelector('.popup_level_' + number); 14 | this.close = this.popup.querySelector('.popup__close'); 15 | 16 | this.isLocked = true; 17 | this.isDisabled = this.door.classList.contains('door_disabled'); 18 | 19 | this.door.addEventListener('click', onDoorClick.bind(this)); 20 | this.close.addEventListener('click', onCloseClick.bind(this)); 21 | 22 | function onDoorClick() { 23 | if (!this.isDisabled) { 24 | this.openPopup(); 25 | } 26 | } 27 | 28 | function onCloseClick() { 29 | this.closePopup(); 30 | } 31 | } 32 | 33 | DoorBase.prototype = { 34 | openPopup: function() { 35 | this.popup.classList.remove('popup_hidden'); 36 | }, 37 | closePopup: function() { 38 | this.popup.classList.add('popup_hidden'); 39 | }, 40 | enable: function() { 41 | this.door.classList.remove('door_disabled'); 42 | this.isDisabled = false; 43 | }, 44 | /** 45 | * Вызывается, если после последовательности действий 46 | * дверь считается открытой 47 | */ 48 | unlock: function() { 49 | this.door.classList.remove('door_locked'); 50 | this.isLocked = false; 51 | this.closePopup(); 52 | this.onUnclockCallback(); 53 | this.showCongratulations(); 54 | }, 55 | showCongratulations: function() { 56 | alert('Дверь ' + this.number + ' открыта!') 57 | } 58 | }; 59 | -------------------------------------------------------------------------------- /js/sample/js/doorOthers.js: -------------------------------------------------------------------------------- 1 | // ===================== Пример кода первой двери ======================= 2 | /** 3 | * @class Door0 4 | * @augments DoorBase 5 | * @param {Number} number 6 | * @param {Function} onUnlock 7 | */ 8 | function Door0(number, onUnlock) { 9 | DoorBase.apply(this, arguments); 10 | 11 | var buttons = [ 12 | this.popup.querySelector('.door-riddle__button_0'), 13 | this.popup.querySelector('.door-riddle__button_1'), 14 | this.popup.querySelector('.door-riddle__button_2') 15 | ]; 16 | 17 | buttons.forEach(function(b) { 18 | b.addEventListener('pointerdown', _onButtonPointerDown.bind(this)); 19 | b.addEventListener('pointerup', _onButtonPointerUp.bind(this)); 20 | b.addEventListener('pointercancel', _onButtonPointerUp.bind(this)); 21 | b.addEventListener('pointerleave', _onButtonPointerUp.bind(this)); 22 | }.bind(this)); 23 | 24 | function _onButtonPointerDown(e) { 25 | e.target.classList.add('door-riddle__button_pressed'); 26 | checkCondition.apply(this); 27 | } 28 | 29 | function _onButtonPointerUp(e) { 30 | e.target.classList.remove('door-riddle__button_pressed'); 31 | } 32 | 33 | /** 34 | * Проверяем, можно ли теперь открыть дверь 35 | */ 36 | function checkCondition() { 37 | var isOpened = true; 38 | buttons.forEach(function(b) { 39 | if (!b.classList.contains('door-riddle__button_pressed')) { 40 | isOpened = false; 41 | } 42 | }); 43 | 44 | // Если все три кнопки зажаты одновременно, то откроем эту дверь 45 | if (isOpened) { 46 | this.unlock(); 47 | } 48 | } 49 | } 50 | 51 | // Наследуемся от класса DoorBase 52 | Door0.prototype = Object.create(DoorBase.prototype); 53 | Door0.prototype.constructor = DoorBase; 54 | // END ===================== Пример кода первой двери ======================= 55 | 56 | /** 57 | * @class Door1 58 | * @augments DoorBase 59 | * @param {Number} number 60 | * @param {Function} onUnlock 61 | */ 62 | function Door1(number, onUnlock) { 63 | DoorBase.apply(this, arguments); 64 | 65 | // ==== Напишите свой код для открытия второй двери здесь ==== 66 | // Для примера дверь откроется просто по клику на неё 67 | this.popup.addEventListener('click', function() { 68 | this.unlock(); 69 | }.bind(this)); 70 | // ==== END Напишите свой код для открытия второй двери здесь ==== 71 | } 72 | Door1.prototype = Object.create(DoorBase.prototype); 73 | Door1.prototype.constructor = DoorBase; 74 | 75 | /** 76 | * @class Door2 77 | * @augments DoorBase 78 | * @param {Number} number 79 | * @param {Function} onUnlock 80 | */ 81 | function Door2(number, onUnlock) { 82 | DoorBase.apply(this, arguments); 83 | 84 | // ==== Напишите свой код для открытия третей двери здесь ==== 85 | // Для примера дверь откроется просто по клику на неё 86 | this.popup.addEventListener('click', function() { 87 | this.unlock(); 88 | }.bind(this)); 89 | // ==== END Напишите свой код для открытия третей двери здесь ==== 90 | } 91 | Door2.prototype = Object.create(DoorBase.prototype); 92 | Door2.prototype.constructor = DoorBase; 93 | 94 | /** 95 | * Сундук 96 | * @class Box 97 | * @augments DoorBase 98 | * @param {Number} number 99 | * @param {Function} onUnlock 100 | */ 101 | function Box(number, onUnlock) { 102 | DoorBase.apply(this, arguments); 103 | 104 | // ==== Напишите свой код для открытия сундука здесь ==== 105 | // Для примера сундук откроется просто по клику на него 106 | this.popup.addEventListener('click', function() { 107 | this.unlock(); 108 | }.bind(this)); 109 | // ==== END Напишите свой код для открытия сундука здесь ==== 110 | 111 | this.showCongratulations = function() { 112 | alert('Поздравляю! Игра пройдена!'); 113 | }; 114 | } 115 | Box.prototype = Object.create(DoorBase.prototype); 116 | Box.prototype.constructor = DoorBase; 117 | --------------------------------------------------------------------------------