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.

• Игра: https://rupl.github.io/unfold
• GitHub: https://github.com/rupl/unfold
• Создатель: Chris Ruppel

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]