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

Эта игра также о 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.

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

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