通过玩游戏学习 CSS

学习CSS 有时会令人沮丧。学习编程的一大好处是，擅长编程的人恰好也具备制作游戏来教别人编程的技能。

这里有一些可以帮助您掌握 CSS 的游戏。

1. Flexbox Froggy

这个游戏是关于弹性盒子它涵盖了 24 个不同级别的 flex 属性，如、align-items、justify-content、align-content、和order 。flex-directionalign-selfflex-wrapflex-flow

是的，最后一关有点挑战性

2.弹性盒僵尸

在这里，我们使用 Flexbox 来定位英雄的弩，击杀僵尸并在游戏中生存下来。
每个部分都会解开部分剧情，让你熟悉一个新的 Flexbox 概念，并提出僵尸生存挑战，迫使你像保命一样巩固新技能。

3. Flexbox 防御

弹性盒防御基于经典的塔防游戏，但我们通过 CSS 指令来放置元素。我们使用主容器的 justify-content 属性将单个塔移动到有效位置。

4.网格花园

网格花园游戏共有 28 个关卡，难度从简单开始，逐渐增加。使用各种网格属性来浇灌和培育你的胡萝卜花园。网格花园拥有代码编辑器和可视化区域，让你可以立即查看结果。

5. CSS 之战

CSS Battle 与其说是真正的 CSS 练习游戏，不如说是一场在线挑战。游戏的目标是用尽可能少的代码编写 HTML 和 CSS 代码，复制给定的目标图像。这款游戏会不断更新新的挑战。它拥有全球排名系统，并且允许你重复挑战，从而提高自己的成绩。

6.CSS餐厅

CSS Diner Web 应用趣味十足，无论开发者水平如何，都能从中汲取真正的教育意义。你将体验 26 个难度递增的级别。前几个级别将教授元素选择器和类选择器等核心基础知识。在后续级别，你将学习 :only-of-type 和 :not(x) 等高级概念。

7. CodePip

我们已经测试过 Grid Garden 和 Flexbox Froggy，您也已经看过 CodePip 的一些作品示例了。
这只是他们提供的两款免费游戏。如果您在他们的网站上注册专业帐户，他们还提供从常规 CSS 复习到 JavaScript 的各种游戏。

8. CodeMonkey

CodeMonkey 使用 CoffeeScript（一种真正的编程语言）来教你如何用 HTML5 开发自己的游戏。它的目标用户是儿童，但成年人也能从中获益匪浅。

9. CodinGame

CodinGame 提供有趣的免费游戏，帮助学习超过 25 种编程语言，包括 JavaScript、Ruby 和 PHP。CodinGame 的一大优势在于，你可以与朋友或同事一起玩，还可以参加国际编程比赛。

10. CodeCombat

学习 Python、JavaScript、CoffeeScript 或 Lua 游戏脚本语言。在初级地下城关卡中，你将根据游戏附带的教程，使用一些基本命令来移动你的英雄。

使用纯 CSS 的游戏

1.路线图

玩这个仅用 CSS 和 HTML 制作的小游戏需要技巧和速度。它不是直接教 CSS，而是通过查看源代码来学习很多关于 clip-path、transform 和使用 @keyframes 动画的知识！

2.狂欢节

你只有8秒的时间来击中所有目标！这是一款使用复选框和CSS动画的精美CSS小游戏。

3.服务人员

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

4.展开

这与其说是游戏，不如说是 CSS 3D 变换的互动演示。试试看，一点也不无聊😂，纯 CSS 实现的动画效果真的很棒。

付费游戏🤑

网格小动物

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