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梦,收看更多精彩内容

点个[在看],是对小达最大的支持!


如果觉得这篇文章还不错,来个【分享、点赞、在看】三连吧,让更多的人也看到~

浏览 38
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报