另类CSS学习方式：有趣的CSS游戏教你编程

783人浏览 2023-10-23 14:35:57

前言

css的属性是非常的多，如果全靠大脑来记，相信没有几位能够做到，只能通过反复编写，增加熟练度，知道有哪些属性，然后根据编辑器或者浏览器等工具提示，得心应手的完成样式开发。

比如，flex布局。flex的属性justify-content就有12个以上的不同值，必须阅读flexbox的完整指南，才能了解他们各自的作用，但是文档就有几页内容，看起来非常的枯燥乏味。

我最近偶然发现了一个塔防游戏，需要用css编程，来完成塔防，听起来是不是非常的有趣，下面一起看看。

Flexbox Defense

上图就是整个游戏界面，第一关卡说明翻译：使用justify-content属性将这两个塔移动到有效位置。可以点击help帮助按钮，查看justify-content文档说明。 (英文水平很菜，了解意思即可)

上图就是点击帮助按钮后的，justify-content文档说明

Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!

你的任务是阻止来犯的敌人越过你的防线。与其他塔防游戏不同，你必须使用css定位你的塔防！

We'll start with container properties. A flexbox container has a main axis and a cross axis.

我们从容器属性开始。一个flexbox有一个主轴和一个横轴。

Use the justify-content property on the tower group container to move your towers into effective positions. justify-content positions a container's items along the main axis and accepts the following values:

使用塔组容器上的justify-content属性将塔移动到有效位置。justify-content可以设置以下值：

1、flex-start（默认值）：左对齐 2、flex-end：右对齐 3、center：居中 4、space-between：两端对齐，项目之间的间隔都相等。 5、space-around：每个item两侧的间隔相等。所以，item之间的间隔比item与边框的间隔大一倍。

Try justify-content: center; for example, to move the container's towers to the center of the main axis.

尝试使用 justify-content: center;。例如，将容器的塔移动到主轴的中心。

地址：可以点击文章最下方“了解更多”获取

Flexbox Froggy

这个游戏也是关于flexbox的，它涵盖了更多的flex属性：align-items, justify-content, align-content, flex-direction, align-self, flex-wrap, flex-flow 和24个不同级别的 order。

第一关：使用justify-content属性将青蛙引导到右侧的岛屿上

地址：可以点击文章最下方“了解更多”获取

Grid Garden

使用grid-column-start属性只对有胡萝卜的区域浇水。

通过28个关卡，学习css Grid布局，它包含以下属性: grid-column-start, grid-column-end, grid-column, grid-row-start, grid-row-end, grid-row, grid-area, order, grid-template-columns, grid-template-rows, grid-template.

地址：可以点击文章最下方“了解更多”获取