几个前端学习小游戏,玩转前端!


几个好玩又好学的前端小游戏

对于新手小白学习前端来说,CSS的布局可谓是学习路上的一大拦路虎。虽然它看起来简单,但实际上各种灵活多变的用法可是让小白们头疼不已呀!
下面给大家推荐几个好玩有趣的小网站来帮助新手更好的了解和掌握前端,相信通过这几个网页小游戏,你一定可以对CSS的布局理解更上一层楼!(随文附游戏网址)

1.Flex Froggy

image

通过代码来帮助可爱的小青蛙回到属于它们自己颜色的荷叶上,可以帮助我们进一步熟悉Flex布局的属性和值。一共有24个小节,每个操作都很简单,还有非常友好的详细提示来帮助大家完成代码。
点此跳转到Flex Froggy

2.Flexbox Defence

image

这是一个塔防游戏,也是用来熟悉Flex布局的小游戏。用对应的flex属性来控制炮塔放置的位置,布局到满意的位置后,点击“开始战斗”后就请享受打败敌人的快感吧!
点此跳转到Flex Defence

3.Grid Garden

image

跟第一个小青蛙差不多,这次换成了给胡萝卜浇水。控制对应的grid参数来给胡萝卜浇水并把荆棘放回泥沼。这个小游戏可以很好的帮助我们熟悉Grid布局的属性、更深入的理解grid布局如何操作。
点此跳转到Grid Garden

4.CSS Diner

image

与前面三个都不太一样,这是一个最打基础的小游戏。游戏一共有32个关卡,每个关卡都需要输入正确的选择器才能把各式各样晃动的物品从卡住的地方“救”出来。在左侧白色部分写选择器,右侧则是对应部分的html代码。这个小游戏可以很快让我们上手选择器的使用,也能帮助我们更快速的了解选择器的具体使用效果。
点此跳转到CSS Diner

以上就是几个值得向大家推荐的前端学习小游戏啦!希望可以帮助到初学前端的大家~


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM