[[429957]]

本文轉載自微信公眾號「大帥老猿」，作者大帥老猿  。轉載本文請聯系大帥老猿公眾號。

前言

大帥最近都在研究如何讓Web前端學習更加有趣，對新人更加友好，而游戲化(Gamification)是我未來也想要深入的一個重要方向。為此我做了一些調研，發現有不少優秀的玩中學的游戲化內容做得很贊，每一個我都打通關了，此文給大家做一個分享。

以下游戲都是免費的

Flexbox Defense

這是一個塔防游戲，一共12關，玩家可以使用align-items, justify-content, flex-direction, align-self 等語法來設置防御塔的位置從而擊敗進擊的敵人。

flexboxdefense

游戲地址：http://www.flexboxdefense.com/

游戲感受：邏輯上確實像一個真正的游戲，使用的語法不對時會導致游戲失敗。不像其他幾個游戲，只允許正確的語法。

Flexbox Froggy

像是放置類的解謎游戲，一共有24關。玩家需要通過使用align-items, justify-content, align-content, flex-direction, align-self, flex-wrap, flex-flow等語法來將青蛙設置到正確的位置上。

flexboxfroggy

游戲地址：https://flexboxfroggy.com

游戲感受：游戲性不強，但通過謎題可以很好的學習flexbox的常用語法，使用錯誤的語法會 有效果，但無法過關。比如截圖中的謎題，你要想辦法用flex語法將三只青蛙的顏色和荷葉的顏色匹配上。

Grid Garden

放置類的解密游戲，和Flexbox Froggy是同一作者。游戲一共28關，玩家需要使用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 等語法去設置水源，灌溉到所有的蘿卜。

gridgarden

游戲地址：https://cssgridgarden.com

游戲感受：游戲性不強，但通過謎題可以很好的學習grid的常用語法，使用錯誤的語法會 有效果，但無法過關。

CSS Diner

算是解謎游戲，主要考驗你對CSS選擇器的掌握，一共32關，能全打通關你一定是CSS選擇器專家。

cssdiner

游戲地址：http://flukeout.github.io

游戲感受：游戲性尚可，解謎過程對CSS選擇器的掌握真的會有提升。游戲中沒有提示，如果你不去搜索答案就能全解密的話，那絕對是專家。

Flexbox Zombies

解謎游戲，在游戲中你要使用flexbox的語法讓弓箭指向僵尸。一共12個章節，每個章節都有不少關卡。

flexboxzombies

游戲地址：https://mastery.games/flexboxzombies/

游戲感受：畫面非常棒，真的是當正兒八經的游戲在設計的，但游戲性一般般。只有使用正確的語法才能通過關卡。

結語

通過游戲化的方式來學習，非常的直觀，讓人印象深刻。但既要有游戲性，又要將知識點巧妙的結合到游戲里，挑戰是非常大的，希望我也能早日參透其中的奧妙...

我是大帥，一個老程序猿

讓大家開開心心的學習編程是我的理想

參考資料：https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f