两个学习flexbox的小游戏-测评

偶然看到一个介绍关于CSS学习小游戏的帖子，正在努力逃避写文书的本小白火速凑了上来，感觉还挺有趣的，和大家分享一下。

介绍贴链接：https://jingsam.github.io/2016/03/03/flexbox-games.html

 

 

两个游戏加起来玩了二十分钟，还是挺有意思的。推荐先玩第一个塔防小游戏，再玩第二个青蛙速度就会快很多。

 

第一个小游戏：

Flexbox Defense（弹性盒塔防）

链接：http://www.flexboxdefense.com/

教学作用很好，很直观地感受直角坐标系和flex布局的关系。

感觉游戏性还挺不错，作者添加了一种多面炮台，放置在交通要塞比较有用。

 

第二个小游戏：

Flexbox Froggy （弹性盒小蛙）

链接：https://flexboxfroggy.com/

这个可以帮助游戏者在视觉上更直观地理解flex布局，游戏性就没有那么强了。

在20来关的时候可以体会到被拉扯变形的蛙蛙，让我想起了自己处理过的静态页面图片（囧）。

 

说一下我最大感受：学css可以有效扩大英文词汇量（狗头）。

比如justify-content，看下justify的词典解释： to arrange lines of printed text so that one or both edges are straight （排列印刷文本的行，使一条或两条边都是直的）。

再说align-items，看下align是啥：to arrange sth in the correct position, or to be in the correct position, in relation to sth else, especially in a straight line（把某物安排在正确的位置，或使其处于正确的位置，尤指在直线上）。

还有space-around，顾名思义，space around （空格环绕内容）。

好了，今天摸鱼就摸到这了，祝大家玩得开心！