12 бесплатных игр для изучения CSS

Перевод статьи «8 Games to learn CSS the fun way».

Должен признать, мне сложно запоминать многие вещи. Особенно те, что касаются CSS. Например, Flexbox Layout. Свойство flex-контейнера justify-content может иметь больше 12 различных значений, многие из которых могут комбинироваться с ключевыми словами safe или unsafe.

Можно, конечно, читать различные статьи, но они длинные и раскрывают не все темы. Но вот недавно я наткнулся на одну игру…

Погодите, что?

Да, как выясняется, есть довольно много игр, помогающих изучить CSS. Я собрал несколько таких бесплатных игр, которые оказались полезными для меня самого и которые, надеюсь, помогут вам не скучно изучить CSS!

1. Flexbox Defense

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

Игра: http://www.flexboxdefense.com
GitHub: https://github.com/channingallen/tower-defense
Создатель: Channing Allen

2. Flexbox Froggy

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

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

3. Grid Garden

Игра предлагает изучение CSS Grid Layout на 28 разных уровнях. Освещены следующие свойства grid: 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
GitHub: https://github.com/thomaspark/gridgarden
Создатель: Codepip

4. CSS Diner

Маленькая игра для изучения различных селекторов CSS. Попробуйте пройти все 32 уровня, чтобы стать экспертом по селекторам (и попутно проголодаться).

Игра: http://flukeout.github.io
GitHub: https://github.com/flukeout/css-diner
Создатель: Luke Pacholski

5. Unfold

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

6. Roadmap

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

Игра: http://victordarras.fr/cssgame
Создатель: Victor Darras

7. Carnival

У вас лишь 8 секунд, чтобы поразить все цели! Прекрасная маленькая CSS-игра, использующая чекбоксы и CSS-анимации.

Игра: https://codepen.io/una/pen/NxZaNr
Создатель: Una Kravets

8. Tic-Tac-Toe

И, наконец, классика. Tic-Tac-Toe («крестики-нолики») — игра на чистом CSS, с двумя уровнями сложности. Также использует чекбоксы и CSS-анимации.

Игра: https://codepen.io/alvaromontoro/pen/BexWOw
Создатель: Alvaro Montoro

9. Flexbox Zombies

Игра с сюжетом. По ходу игры вы учитесь использовать Flexbox и арбалет для охоты на зомби. Необходима регистрация.

Игра: https://mastery.games/p/flexbox-zombies
Создатель: Dave Geddes

10. Service Workies

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

Игра: https://serviceworkies.com
Создатель: Dave Geddes

11. Grid Critters

Ваш путь освоения CSS Grid начинается на загадочной планете Grideros. Ваша миссия — использовать мощный инструментарий вашего корабля (Grid) для спасения инопланетных животных от вымирания. Требуется регистрация.

Игра: https://gridcritters.com
Создатель: Dave Geddes

Двенадцатую игру мы взяли из статьи «Train your CSS skills with online games».

12. CSS Battle

В игре CSS Battle вам нужно повторить заданный макет при помощи как можно меньшего количества кода. Можно соревноваться с другими игроками.

Игра: https://cssbattle.dev
Создатели — Kushagra Gour и Kushagra Agarwal

Заключение

Я надеюсь, что, независимо от вашего уровня знаний, эти игры вас развлекут, а также помогут приобрести (или освежить в памяти) некоторые навыки работы с CSS. Если знаете и другие подобные игры — дополняйте в комментариях!

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]