CSS Flexbox 青蛙游戏
共 1048字,需浏览 3分钟
·
2020-12-31 09:29
导语
在学习CSS中,Flexbox是一个比较实用的CSS 布局属性,但很复杂,有些人可能没法很快掌握,今天我要推荐一个跟这个相关的游戏,在游戏中学习Flexbox,这岂不是一个让人觉得很快乐的事吗?
游戏介绍
来看一下作者对这个游戏的具体介绍吧。
我制作了一个学习CSS Flexbox的游戏,叫Flexbox Froggy。游戏的目标是通过编写CSS代码来帮助青蛙到达他们的百叶窗。看看你是否能打败所有的关卡!
Flexbox Froggy的灵感来自于经典街机游戏Frogger,以及网络扫盲游戏,比如出色的CSS Diner和Erase All Kittens,你可以分别学习CSS选择器和HTML标记。
我之所以选择CSS flexbox,部分原因是它的布局属性使得游戏机制很好。游戏关卡类似于我在Mozilla Thimble教程中特色的 "定位僵尸 "活动,但使用了强大的新flexbox模型而不是绝对定位。
Flexbox也是一个很好的话题,因为初学者可以直接学习这种改进的定位方式,而很多有经验的Web开发者还不熟悉它,终于可以上手了。这也是我自己有段时间一直想学的东西。像CSS Tricks、Codrops和Scotch.io的教程都是顶级的,但很少有交互式的学习体验。
试玩感受
作者从一个简单的青蛙位置跳到对应的荷叶上,根据对应的属性设计不同的排版,从而达到学习Flexbox的目的,这简直太棒了。下面我简单截取一些属性截图。
justify-content:flex-end
justify-content:center
justify-content:space-around
align-items:flex-end
还有属性结合的布局
其它不一一列举了,还是挺有趣的,喜欢可以去看看哈
关注数:10亿+ 文章数:10亿+
粉丝量:10亿+ 点击量:10亿+
悬赏博主专区请扫描这里
喜爱数: 1亿+ 发帖数: 1亿+
回帖数: 1亿+ 结贴率: 99.9%
—————END—————
喜欢本文的朋友,欢迎关注公众号 程序员哆啦A梦,收看更多精彩内容
点个[在看],是对小达最大的支持!
如果觉得这篇文章还不错,来个【分享、点赞、在看】三连吧,让更多的人也看到~