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 (空格环绕内容)。

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

  • 相关阅读:
    (收藏)Wp7开发中文网站
    (收藏)Andriod中文翻译组
    (1) BlackBerry 环境的配置:安装standalone版的BlackBerry安装包
    (2)把BlackBerry作为插件安装到已有的Eclipse中
    (收藏)一个很不错的编程网站
    Android Architecture
    在Eclipse Android中设置模拟器屏幕大小
    (收藏)C#网站
    (Android) Binding to Data with AdapterView
    ListView 的理解
  • 原文地址:https://www.cnblogs.com/rosecanoe/p/15535706.html
Copyright © 2011-2022 走看看