5个学习CSS的游戏分享 | 我在路易莎的日子

最近爱上以玩游戏的方式去学习CSSヽ(✿ﾟ▽ﾟ)ノ好快乐~ 尤其是之前对选择器和Grid Layout一直没有很熟练，透过游戏，印象更深刻，也不失为一个不错的学习方式(有些游戏我自己刷了两次，多玩几次就记起来了嘿嘿)，以下就分享一下自己玩过的游戏们

1. CSS Diner (选择器练习)

原图取自DesignRock

这是一个关于各种 CSS 选择器的小游戏，总共有 32 个关卡，由浅入深，透过选择相对应的食物或是碗盘来练习选择器语法，如果32关都破完了，对CSS选择器应该也有基本概念!仅有英文版!

游戏网址: https://flukeout.github.io/
答案和解释: https://andersjensen.org/solutions-to-css-diner/

2. GRID GARDEN (Grid Layout练习)

个人觉得Grid是CSS里比较複杂的排版方式，透过游戏学轻鬆愉快一点o(￣▽￣)ｄ 玩家要想办法写出对应的程式码帮你的胡萝蔔园浇水！有支援繁体中文版，讚!

游戏网址: http://cssgridgarden.com/#zh-tw
答案和解释:https://programmingmentor.com/post/playing-css-grid-garden/

3. 六角学院-Flex Pirate 击倒海盗 (Flexbox练习)

有分为新手村和老鸟村，老鸟村一开始的题目会跟新手村有点重叠，不过重点在后面几题(印象中是26~30)，会比较複杂一点。游戏的缺点是不会保存进度，所以如果不小心把视窗关掉的话，又要从第一关开始破(ノへ￣、) 我的辛酸血泪，在玩的时候可以注意一下!另外这个游戏也会计时你花了多久的时间破了全部的关卡!

游戏网址: https://hexschool.github.io/flexbox-pirate/index.html#/

4. FLEXBOX FROGGY (Flexbox练习)

这个游戏也是关于 Flexbox 的，它涵盖了许多的 flex 属性：align-items、justify-content、align-content、flex-direction、align-self、flex-wrap、flex-flow 、order，总共有 24 个关卡，有支援繁体中文版。

游戏网址: https://flexboxfroggy.com/#zh-tw
答案和解释: https://shunnien.github.io/2018/05/25/flexbox-froggy/

5. CSSBattle (综合练习)

CSSBattle是针对Code Golf(代码高尔夫)的一款游戏，里头的题目比较进阶一点，玩家要想办法用最少的程式码来完成指定的题目，另外，你也可以挑战看看其他玩家出的题。

▲上图中，左侧是你进行编码的编辑区域，当开始键入时，中间的输出区域会动态渲染结果，尽量让中间的结果跟右边的完成目标越像越好，按下submit提交后便可查看得分，输出区的下方也会出现你的分数和最终目标的匹配率，仅有英文版!

游戏网址: https://cssbattle.dev/

大部分的游戏旁边会有相关的注解和提示，辅助玩家了解此设定的用意和基本观念，不过我自己是会再额外去找文章来补充各个知识点!希望能藉由这次的分享，让我们一起快乐学CSS ^ ^