CSS 游戏8 个游戏，以有趣的方式学习 CSS

我必须承认，我记忆力很差，尤其是在 CSS 方面。比如 Flexbox 布局。justify-content弹性容器的属性可以有超过12 个不同的值，其中很多值可以用safe或unsafe关键字组合。要阅读CSS Tricks 上关于 Flexbox 的完整指南，你必须滚动浏览一个高度超过 2 万像素的两列页面——虽然标题暗示了这一点，但它们并没有涵盖所有内容。

我最近偶然发现了一款教 Flexbox 的塔防游戏，这真是……
等等，什么？
是的，原来有很多游戏可以帮助学习 CSS。我收集了一些对我有用的免费 CSS 游戏，也许能帮助你重拾 CSS 的乐趣！

1. Flexbox防御

我刚才提到了这款游戏。它涵盖了 flex 属性align-items、、justify-content和flex-direction，共有 12 个不同的关卡。尤其是最后 4align-self个order关卡非常有趣，而且略带技巧性。

游戏：http://www.flexboxdefense.com
贡献：https://github.com/channingallen/tower-defense
创作者：钱宁·艾伦

2. Flexbox Froggy

这款游戏同样与Flexbox有关，并涵盖了更多 flex 属性：align-items、justify-content、align-content、flex-direction、align-self、，flex-wrap以及，flex-flow共有order24 个不同关卡。如果你已经解决了最后一个关卡，欢迎留言评论😅。

游戏：https://flexboxfroggy.com
贡献：https://github.com/thomaspark/flexboxfroggy
创建者：Codepip

3.网格花园

您可以在28个不同级别学习CSS网格布局。它涵盖以下网格属性：grid-column-start、、、、、、、、、和。grid-column-endgrid-columngrid-row-startgrid-row-endgrid-rowgrid-areaordergrid-template-columnsgrid-template-rowsgrid-template

游戏：https://cssgridgarden.com
贡献：https://github.com/thomaspark/gridgarden
创建者：Codepip

4. CSS 餐厅

这是一款关于各种CSS 选择器的小游戏。尝试掌握全部 32 个关卡，称自己为 CSS 选择器专家——并且渴望学习😋。

游戏：http://flukeout.github.io
贡献：https://github.com/flukeout/css-diner
创作者：卢克·帕乔尔斯基

5.展开

这并非一款游戏，而是一个关于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
创作者：Una Kravets

8.井字游戏

最后是一个经典游戏。井字棋是一款纯 CSS 游戏，具有 2 个难度级别，还使用了复选框和 CSS 动画。

游戏：https://codepen.io/alvaromontoro/pen/BexWOw
创作者：阿尔瓦罗·蒙托罗

奖金

以下是来自评论的推荐奖励部分：

9. 弹性框僵尸

这是一个以故事情节为主导的培训课程，你将学习如何使用 Flexbox 和弩来猎杀僵尸。需要注册。

游戏：https://mastery.games/flexboxzombies/
价格：179 美元（撰写本文时免费）
创作者：戴夫·格迪斯

10. 服务工

在这场冒险中，你将学习如何避开 PWA 的陷阱。你将提升技能，并与 Service Workers 一起茁壮成长。你甚至可能杀死那些困扰了可怜的乡村工人几个世纪的野兽！需要注册。

游戏：https://serviceworkies.com
价格：179 美元（撰写本文时免费）
创作者：戴夫·格迪斯

11.网格小动物

你的 CSS 网格大师之旅始于神秘的 Grideros 星球。你的任务是使用飞船强大的网格工具，拯救濒临灭绝的外星生物。需要注册。

游戏：https://gridcritters.com
价格：179美元
创作者：戴夫·格迪斯

12. CSSBattle

在这个在线 CSS 代码高尔夫游戏中，来自世界各地的玩家尝试用尽可能短的 CSS 代码直观地复制“目标”，并争夺排行榜的榜首。

游戏：https://cssbattle.dev
创作者：Kushagra Gour和Kushagra Agarwal

总结

无论您是初学者还是专家，我都希望您在玩游戏的同时还能学习一些 CSS 知识！尤其是在 Codepen 上，您可以找到许多仅使用 HTML 和 CSS 创建的精彩游戏。

如果您知道其他出色的 CSS 学习游戏，请在下面的评论中告诉大家。

编辑于：2021 年 7 月 2 日（修复 flexbox zombies 链接，添加 cssbattle）
编辑于：2019 年 10 月 29 日（添加 Dave Geddes 在评论中推荐的 3 个奖励游戏）
编辑于：2019 年 10 月 28 日（从错误的 flexbox 示例切换justify-items到justify-content）
最初发布于：2019 年 10 月 24 日，Medium

文章来源：https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f

CSS 游戏 8 个游戏，以有趣的方式学习 CSS