Веб-программирование без скуки: 15 игр для салаг и матёрых

Раздел 1: HTML и CSS

Super Markup Man

• 102 руб. в Steam 
• на английском

Управляйте Суперразметчиком и CSS-полицейским, которые перетаскивают теги и селекторы. Располагайте блоки так, чтобы в результате получить точную копию заданной веб-страницы. Все изменения мгновенно показываются в отдельной области окна.

Flexbox Froggy

• бесплатно
• на русском

Помогите лягушкам перебраться в нужную сторону пруда, пользуясь свойствами CSS. 

Erase All Kittens

• бесплатно
• на английском

Возраст: 8+. Управляйте котенком и изменяйте HTML-разметку, проходя через препятствия. К примеру, проложить мост над обрывом можно, вставив побольше текста между тегами

и

CSS Diner

• бесплатно
• на английском

Вы увидите на экране группу HTML-элементов, изображенных в виде продуктов и посуды. Чтобы убрать любой из предметов, нужно написать подходящий селектор.

Flexbox Defense

• бесплатно
• на английском

Используйте CSS Flexboх для расстановки боевых башен и защиты дороги от врагов. Также для обороны вам очень пригодятся пушки, управлять которыми вы будете с помощью свойств.

Grid Garden

• бесплатно
• на русском

Учите CSS Grid, выращивая морковь. Так, для полива грядки укажите соответствующее значение свойства grid-area. Прекрасная альтернатива реального дачного труда, не так ли? А еще здесь есть подсказки!

Grid Critters

• $149 за вечную подписку
• на английском

Оказавшись на таинственной планете Grideros, спасите местных обитателей от вымирания. 

CSSBattle «LEARN»

• бесплатно
• на английском

Интерактивный обучающий курс по CSS, который будет одинаково полезен как начинающим программистам, так и экспертам. Ваша задача — сделать из квадрата заданную фигуру. Сначала вашей целью будет круг и треугольник, а затем, по мере прохождения уровней и повышения сложности, даже гитара и гриб. Пройдя курс вы получите возможность зачелленджить других участников игры.

Раздел 2: JavaScript

Crunchzilla

• бесплатно
• на английском

Интерактивное обучение программированию трех уровней сложности. Вам придется не только редактировать код, но и писать программы самостоятельно. К примеру, игрокам нужно изменять цвета фигур, перемещать их и объединять. 

Warriorjs

• бесплатно
• на английском

Обыщите заброшенный замок в поисках легендарного меча. С каждым этажом здания задания становятся все более сложными. Читайте описание с правой стороны, прописывайте функции с методами и наслаждайтесь полученным результатом.

JS Robot

• бесплатно
• на английском

Проведите робота через ловушки до финишного флага. Но помните, что не только препятствия могут отбросить вас назад: если робот разрядится, тоже придется начинать по новой. На всех уровнях идет качественное объяснение основ языка JS. Сперва вы будете читать инструкции, и только после этого писать код. Тем не менее, в этой игре кодить не обязательно: можно выбрать управление с помощью клавиатуры, чтобы пройти ее как обыкновенную браузерную “бродилку”. 

Elevator Saga

• бесплатно
• на английском

Игрушка для тех, кто уже имеет определенный опыт в разработке. Программируйте на JS движения лифта и выполняйте поставленные задания. К примеру, перевезите 10 человек за 50 секунд. Кроме правильного решения здесь будет важна эффективность, т.к. что заодно вы неплохо натренируете алгоритмическое мышление. К слову, есть отличный хак — в этой игре вы можете посмотреть на решения других геймеров.

Screeps

• бесплатно
• на английском

Жанр — многопользовательская стратегия. Игроки в онлайн-режиме создают колонии, стремятся добыть как можно больше ресурсов и занимаются постройкой юнитов,которые представляют собой скрипты. Уже запрограммированные скрипсы самостоятельно возводят здания, запасаются ресурсами, торгуют и захватывают новые земли.

Untrusted

• бесплатно
• на английском

Играя за доктора Эвала, помогите ему справится с различными испытаниями. Для этого вам придется решать много задач, связанных со знанием JavaScript. Сразу предупредим, это развлечение для более опытных программистов. Изменяйте код в окне справа, чтобы устранить препятствия, заграждающие дорогу к прямоугольнику.

Раздел 3: PHP

Return true to win

• бесплатно
• на английском

Переписывайте функции так, чтобы они возвратили true. По мере прохождения уровней сложность будет расти. Никаких подсказок и руководств не ждите — думать придется самостоятельно.