[[429957]]

本文轉(zhuǎn)載自微信公眾號(hào)「大帥老猿」，作者大帥老猿  。轉(zhuǎn)載本文請聯(lián)系大帥老猿公眾號(hào)。

前言

大帥最近都在研究如何讓W(xué)eb前端學(xué)習(xí)更加有趣，對新人更加友好，而游戲化(Gamification)是我未來也想要深入的一個(gè)重要方向。為此我做了一些調(diào)研，發(fā)現(xiàn)有不少優(yōu)秀的玩中學(xué)的游戲化內(nèi)容做得很贊，每一個(gè)我都打通關(guān)了，此文給大家做一個(gè)分享。

以下游戲都是免費(fèi)的

Flexbox Defense

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

flexboxdefense

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

游戲感受：邏輯上確實(shí)像一個(gè)真正的游戲，使用的語法不對時(shí)會(huì)導(dǎo)致游戲失敗。不像其他幾個(gè)游戲，只允許正確的語法。

Flexbox Froggy

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

flexboxfroggy

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

游戲感受：游戲性不強(qiáng)，但通過謎題可以很好的學(xué)習(xí)flexbox的常用語法，使用錯(cuò)誤的語法會(huì) 有效果，但無法過關(guān)。比如截圖中的謎題，你要想辦法用flex語法將三只青蛙的顏色和荷葉的顏色匹配上。

Grid Garden

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

gridgarden

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

游戲感受：游戲性不強(qiáng)，但通過謎題可以很好的學(xué)習(xí)grid的常用語法，使用錯(cuò)誤的語法會(huì) 有效果，但無法過關(guān)。

CSS Diner

算是解謎游戲，主要考驗(yàn)?zāi)銓SS選擇器的掌握，一共32關(guān)，能全打通關(guān)你一定是CSS選擇器專家。

cssdiner

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

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

Flexbox Zombies

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

flexboxzombies

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

游戲感受：畫面非常棒，真的是當(dāng)正兒八經(jīng)的游戲在設(shè)計(jì)的，但游戲性一般般。只有使用正確的語法才能通過關(guān)卡。

結(jié)語

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

我是大帥，一個(gè)老程序猿

讓大家開開心心的學(xué)習(xí)編程是我的理想

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