[[429957]]

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

前言

大帥最近都在研究如何讓W(xué)eb前端學(xué)習(xí)更加有趣，對(duì)新人更加友好，而游戲化(Gamification)是我未來(lái)也想要深入的一個(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 等語(yǔ)法來(lái)設(shè)置防御塔的位置從而擊敗進(jìn)擊的敵人。

flexboxdefense

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

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

Flexbox Froggy

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

flexboxfroggy

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

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

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 等語(yǔ)法去設(shè)置水源，灌溉到所有的蘿卜。

gridgarden

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

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

CSS Diner

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

cssdiner

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

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

Flexbox Zombies

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

flexboxzombies

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

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

結(jié)語(yǔ)

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

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

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

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