Должен признаться, мне сложно что-то запоминать. Особенно, если речь идет о CSS. Например, макет Flexbox. Свойство justify-contentгибкого контейнера может иметь более 12 различных значений, многие из которых можно комбинировать с ключевыми словами safe или unsafe. Чтобы прочитать полное руководство по flexbox по трюкам CSS, вам нужно прокрутить страницу с двумя столбцами высотой более 20 тыс. Пикселей – и хотя заголовок подразумевает это, они не охватывают все.

Я недавно наткнулся на игру в жанре Tower Defense, в которой учат flexbox, что на самом деле …
Погодите, а что?
Да, оказалось, что существует довольно много игр, помогающих обучать CSS. Я собрал несколько бесплатных игр с CSS, которые были мне полезны и, возможно, помогут вам снова развлечься с CSS!

1. Защита Flexbox

CSS Game: 8 игр для увлекательного изучения CSS - DEV

Я как раз упоминал об этой игре. Он охватывает гибкие свойства align-items, justify-content, flex-direction, align-selfи orderв 12 различных уровней. Особенно последние 4 уровня действительно забавны и немного сложны.

Игра: http://www.flexboxdefense.com
Вклад: https://github.com/channingallen/tower-defense
Создатель: Ченнинг Аллен

2. Flexbox Froggy

Эта игра также о Flexbox и охватывает еще более гибкое свойство: align-items, justify-content, align-content, flex-direction, align-self, flex-wrap, flex-flowи orderв 24 различных уровнях. Оставьте комментарий, если вы решили последний уровень ?.

Игра: https://flexboxfroggy.com
Вклад: https://github.com/thomaspark/flexboxfroggy
Создатель: Codepip

3. Садовая сетка

На 28 различных уровнях вы можете изучить CSS Grid Layout. Она включает в себя следующие свойства сетки: grid-column-start, grid-column-end, grid-column, grid-row-start, grid-row-end, grid-row, grid-area, order, grid-template-columns, grid-template-rowsи grid-template.

Игра: https://cssgridgarden.com
Взносы: https://github.com/thomaspark/gridgarden
Создатель: Codepip

4. CSS Diner

Это небольшая игра про все виды селекторов CSS. Попробуйте освоить все 32 уровня, чтобы называть себя экспертом по CSS-селекторам ?.

Игра: http://flukeout.github.io
Вклад: https://github.com/flukeout/css-diner
Создатель: Люк Пачольски

5. Unfold

Это не совсем игра, это скорее интерактивная презентация CSS 3D-преобразований. Вы можете подумать, что это скучно, но поверьте мне: анимация, и вы не подумаете, что это возможно с чистым CSS.

6. Дорожная карта

Для решения этой маленькой игры, созданной только с использованием CSS и HTML, требуются навыки и скорость. Он не учит напрямую CSS, но изучение исходного кода многому учит clip-path, transformи animationс помощью @keyframes!
Напишите комментарий, сколько попыток нужно было для победы – мне понадобилось 8! ?

Игра: http://victordarras.fr/cssgame
Создатель: Виктор Даррас

7. Карнавал

У вас всего 8 секунд, чтобы поразить все цели! Маленькая симпатичная CSS-игра с флажками и CSS-анимацией.

Игра: https://codepen.io/una/pen/NxZaNr
Creator: Una Kravets

8. Крестики-нолики.

И наконец классика. Tic-Tac-Toe как игра на чистом CSS с 2 уровнями сложности, также с использованием флажков и анимации CSS.

Игра: https://codepen.io/alvaromontoro/pen/BexWOw
Создатель: Альваро Монторо

Бонус

А вот и бонусная часть с рекомендациями из комментариев:

9. Зомби Flexbox

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

Игра: https://mastery.games/p/flexbox-zombies
Цена: $ 179 (но бесплатно на момент написания этой статьи)
Создатель: Дэйв Геддес

10. Сервисные работники (Service Workies)

В этом приключении вы узнаете, как избежать ловушек PWA. Вы повысите свои навыки и преуспеете с сервисными работниками. Возможно, даже убить диких зверей, которые веками преследовали бедных деревенских рабочих! Требуется регистрация.

Игра: https://serviceworkies.com
Цена: $ 179 (но бесплатно на момент написания этой статьи)
Создатель: Дэйв Геддес

11. Grid Critters

Ваш путь к освоению CSS Grid начинается на загадочной планете Гридерос. Ваша миссия – использовать мощный инструмент сетки вашего корабля, чтобы спасти инопланетных существ от вымирания. Требуется регистрация.

Игра: https://gridcritters.com
Цена: 179 долларов
Создатель: Дэйв Геддес

Подведение итогов

Неважно, новичок вы или эксперт – надеюсь, вам понравилось играть в некоторые игры и в то же время что-то узнавать о CSS! В частности, на Codepen вы можете найти множество потрясающих игр, созданных людьми с использованием HTML и CSS.

Если вы знаете другие отличные обучающие игры по CSS, сообщите об этом в комментариях ниже.

Первоначально опубликовано: 24 октября 2019 г. на Medium

Источник записи: https://dev.to