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

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

  • 相关阅读:
    LWE Open Question
    Lattice Problem
    Small Program about Error Distribution
    Photon Server伺服务器在LoadBalancing的基础上扩展登陆服务
    Photon PUN 三 RPCs & RaiseEvent
    Photon PUN 二 大厅 & 房间
    Photon PUN 一 介绍
    通用麻将胡牌算法
    一款麻将小游戏的准备工作
    ABC203
  • 原文地址:https://www.cnblogs.com/rosecanoe/p/15535706.html
Copyright © 2011-2022 走看看