zoukankan      html  css  js  c++  java
  • 两个学习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 (空格环绕内容)。

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

  • 相关阅读:
    linux内核源码之基础准备篇
    GDB 自动化操作的技术-PYTHON
    GDB 调试PYTHON
    GCC onlinedocs
    深入CSS,让网页开发少点“坑”
    多款控件新版发布,新特性抢鲜知
    如何选择前端框架:ANGULAR VS EMBER VS REACT
    推荐10个很棒的AngularJS学习指南
    Top 15 不起眼却有大作用的 .NET功能集
    最全数据结构详述: List VS IEnumerable VS IQueryable VS ICollection VS IDictionary
  • 原文地址:https://www.cnblogs.com/rosecanoe/p/15535706.html
Copyright © 2011-2022 走看看