前言最近一直在研究如何让web前端的学习变得更有趣，对新人更友好，而游戏化是我未来想深入的一个重要方向。为此，我做了一些研究，发现玩中学的游戏化内容还是挺多的，我一一通关了。本篇文章分享给大家。以下游戏都是免费的FlexboxDefense。这是一款塔防游戏，共有12个关卡。玩家可以使用align-items,justify-content,flex-direction,align-self等语法来设置防御塔的位置来击败进攻的敌人。Flexboxdefense游戏地址：http://www.flexboxdefense.com/游戏体验：从逻辑上讲，它真的很像一个真正的游戏，错误的语法会导致游戏失败。与其他几个游戏不同，只允许正确的语法。FlexboxFroggy就像一款休闲益智游戏，共有24个关卡。玩家需要使用align-items、justify-content、align-content、flex-direction、align-self、flex-wrap、flex-flow等语法将青蛙设置到正确的位置。Flexboxfroggy游戏地址：https://flexboxfroggy.com游戏体验：游戏性不强，但可以通过解谜很好的学习flexbox的常用语法。使用错误的语法会有效，但您无法通过该级别。例如，在屏幕截图中的拼图中，您必须使用flex语法找到一种方法将三只青蛙的颜色与荷叶的颜色相匹配。GridGarden放置益智游戏，和FlexboxFroggy是同一作者。游戏共有28个关卡。玩家需要使用grid-column-start,grid-column-end,grid-column,grid-row-start,grid-row-end,grid-row,grid-area,order,grid-template-columns,grid-模板行和其他语法来设置水源和灌溉所有的萝卜。Gridgarden游戏地址：https://cssgridgarden.com游戏体验：游戏性不强，但可以通过谜题很好的学习grid的常用语法。使用错误的语法会有效，但您无法通过该级别。CSSDiner是一款益智游戏。主要测试你对CSS选择器的掌握程度。总共有32个级别。如果你能通过所有级别，你一定是CSS选择器方面的专家。cssdiner游戏地址：http://flukeout.github.io游戏体验：玩法尚可，解谜过程中对CSS选择器的掌握会真正提高。游戏中没有任何提示，如果你不用寻找答案就能破译一切，那你绝对是高手。FlexboxZombies益智游戏，在游戏中你必须使用flexbox的语法将弓箭指向僵尸。一共12章，每一章都有很多关卡。Flexboxzombies游戏地址：https://mastery.games/flexboxzombies/游戏体验：画面很不错，真的是设计成正经游戏，不过玩法一般般。只有使用正确的语法才能通过关卡。结语是通过游戏化学习的，非常直观和令人印象深刻。但要将游戏玩法和知识点的巧妙结合融入到游戏中是非常具有挑战性的。希望能早日了解其中的奥妙……
