玩遊戲學 CSS！

對於初學者來說，CSS 繁多的語法可能有些枯燥，而且重要的是 W3C 中 CSS 相關文檔不僅多，而且閱讀體驗極差。

之前也聽過一些後端同學吐糟 CSS 比較難學，就算學會了，長時間不用也會遺忘。

其實，我們不妨利用玩遊戲來加深對枯燥概念的學習和理解，對於日常開發會使用到的基本操作刻意練習，養成肌肉記憶。邊玩邊學，它不香嗎？

1.Flexbox Froggy

Flexbox 青蛙，一共 24 個關卡，每一關都有語法提示，鼠標 hover 到語法屬性上，會顯示其所有的屬性值。

通過 Flex 語法編程，移動青蛙到目標荷葉，幫助你加深記憶。

呱～

2.Flexbox Defense

Flexbox 塔防，一共 12 個關卡的塔防遊戲，通過 Flex 語法擺放防禦塔，阻擋敵方小兵通過。

(敵軍還有 30 秒到達戰場，碾碎他們！)

3.CSS Diner

CSS 晚餐，一共 32 個關卡，由簡入難，通過 CSS 選擇器語法選擇跳動的盤子來進行通關，幫你熟悉和記憶選擇器相關的語法。

“

食堂店小二兒：撿盤子這事兒我熟練！

”

4.Grid Garden

Grid 花園，共 28 關，通過 Grid 語法編程，種植，澆灌你自己的胡蘿蔔園，幫你熟悉和記憶 Grid 語法。

5.Flexbox Zombies

Flexbox 殭屍，共 12 章節，每一章中都有難度遞增的挑戰回合。

自帶劇情，炫酷的動畫和音效，用 Flex 語法打殭屍，強烈推薦體驗！！！

6.Grid Critters

網格小動物，數百個關卡，需要付費。

你的旅程從神祕的 Grideros 星球開始，你的任務是使用你船上強大的網格工具來拯救外星生物免於滅絕。

作者是一名擁有十多年前端經驗的 UI 架構師，爲了幫助人們可以輕鬆愉快的精通 CSS Grid 佈局，他選擇全職並投入了大量的精力開發了這款遊戲。

學習這件事本身就是反人性的，但如果邊學邊玩的話，你是否願意爲了你的熱愛，多一點點堅持呢？

你如果還知道一些好玩的學習 CSS 的遊戲，那麼就在評論區和大家分享吧～

參考資料

[1]

https://www.w3.org/TR/?title=css/: https://www.w3.org/TR/?title=css/

[2]

https://www.w3.org/TR/css-syntax-3/: https://www.w3.org/TR/css-syntax-3/

[3]

傳送門: https://flexboxfroggy.com/

[4]

傳送門: http://www.flexboxdefense.com/

[5]

傳送門: https://flukeout.github.io/

[6]

傳送門: https://cssgridgarden.com/

[7]

傳送門: https://mastery.games/flexboxzombies/

[8]

傳送門: https://gridcritters.com/

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/2iYBZALLd7WOdJ6W7F2GnQ

猜你喜歡