CSS Game: 8 игр для увлекательного изучения CSS — Chrome World по-русски

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

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

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

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

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

2. Flexbox Froggy

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

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

Эта игра также о 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. Садовая сетка

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

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

На 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 Game: 8 игр для увлекательного изучения CSS

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

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

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

5. Unfold

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

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

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

  • Игра: https://rupl.github.io/unfold
  • Вклады: https://github.com/rupl/unfold
  • Создатель: Крис Руппел

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

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

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

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

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

7. Карнавал

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

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

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

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

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

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

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

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

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

Бонус

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

9. Зомби Flexbox

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

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

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

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

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

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

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

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

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

11. Grid Critters

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

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

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

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

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

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

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

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