我制作了一个可用的 Gameboy CSS 艺术作品：尝试一下🕹

故事是这样的。三年前，我去参加了一个 Angular 职位的面试，面试官问了我一个解迷宫的算法。于是我完成了这个算法，然后出于好玩，我又做了一个 Angular 项目，需要你解迷宫（生成迷宫也是个不错的练习）。

因此，我的笔记本电脑上有一个功能齐全的迷宫游戏，而且我还有一个 Gameboy 的 CSS 艺术 👉 我认为将这两者合并在一起会很有趣。

• 在这里尝试一下（如果您使用的是笔记本电脑，则可以使用键盘）
• 在这里做出贡献（或者如果你想给⭐️）
• 演示在这里👇

在 Twitter 上关注我twitter.com/theAngularGuy，我几乎每天都会发布推文，分享我在 6 年多的 Web 开发历程中所学到的东西✅

在本文中，我们将讨论这个项目的一些内容。首先，我们将讨论迷宫生成算法和迷宫求解算法。然后，我们将讨论一些 CSS 艺术的关键概念。

迷宫生成算法

有很多算法可以实现这一点。我选择的是递归生成，原因有二：

1. 因为我喜欢用递归解决问题（Scheme永远改变了我）
2. 因为生成的迷宫看起来更漂亮（有长巷）

该算法分为四个步骤：

1. 划定迷宫区域
2. 将区域垂直地从中间（或任意一点）划分，并在划分处开一个口子
3. 取两半，从中间水平分开，并在每个部分开一个口
4. 取出每份新食物并转至步骤 2

这会一直持续下去，直到没有足够的空间进行除法。
这里有一个 gif，展示了完整的生成过程 👇

您可以将迷宫视为二叉树，每个节点代表迷宫的一部分/分区。

迷宫求解算法

为了解决迷宫问题，我使用了深度优先搜索算法。它并非解决迷宫问题最高效的算法，但能够完成任务，而且实现起来相当容易。此外，我还会用它来穿越迷宫，找到最长的路径，然后将其作为迷宫的出口点（有些人可能称之为目标位置）。以下是一张演示该算法的动图：

我不会在这里深入讨论细节，但如果您对迷宫解决文章感兴趣，请在评论中告诉我。

CSS 艺术：关键概念

我们将讨论一些我想重点介绍的 CSS 属性。我们可以将这些属性分为两类：形状 (Shape) 和亮度 (Lightening，光影效果)。

形状

border-radius

第一个是经典的border-radius。你可以用它来绘制圆形或椭圆形。但这个属性可以实现更多功能。你可以指定每个角的水平和垂直半径。请看下面的代码片段：

.plate {
    border-radius: 20% 20% 49% 49% / 2% 2% 6.5% 6.5%;
}

我用它来塑造 gameboy 板和黑屏。

aspect-ratio

这个属性非常有用，它设置了盒子的首选宽高比，用于自动计算尺寸。
例如，我可以设置width一个宽高比，然后高度就会自动计算。请看：

.plate {
    width: 500px;
    aspect-ratio: 1 / 2;
    /* The height will be 1000px */
}

我几乎在每个元素上都用了这个。没错，我超爱这个属性！

transform: skew

你可以用它transform来进行旋转、缩放（调整大小）或平移（移动），但也可以用它来进行扭曲（倾斜）。
这个skewCSS 属性定义了在二维平面上倾斜元素的变换。

我用它来做音孔网格。请看下面的图片，有倾斜的（右）和没有倾斜的（左）：

两张图片中的网格都应用了旋转。
此外，对于声音网格，我使用了网格布局。如果你想了解更多关于 CSS 网格的知识，我写了一篇文章，详细解释了它的每一个概念 👇

CSS Grid：图文介绍

Mustapha Aouas ・ 19年9月12日

#css #webdev #教程 #beginners

光与影

box-shadow

为了营造立体感，光照至关重要。请看下面的两个示例，左边没有阴影，右边使用了阴影（text-shadow& box-shadow）：

为了达到这种光照效果，我们必须了解在哪里放置光线，在哪里放置阴影，这取决于物体是凸起的还是凹陷的。请看下面的图片：

如果我们将其应用到按钮上，我们会得到类似这样的效果（假设灯光位于屏幕的左上角）：

翻译成如下代码：

.button {
  box-shadow:
    inset 3px 5px 5px -1px rgb(255 255 255 / 50%), 
    inset -3px -3px 5px -1px rgb(0 0 0 / 99%),
    1px 1px 1px 2px rgb(0 0 0 / 80%),
    2.5px 5px 5px 1px rgb(0 0 0 / 90%)
}

inset 关键字将阴影设置为进入框架内部。

text-shadow

对于文本，我们采用相同的原则，文本要么是凸起的，要么是凹陷的。以下是一个凸起文本的示例：

.text {
  text-shadow: -1px -1px 1.2px rgb(255 255 255 / 50%),
               1px 1px 1px rgb(1 1 1 / 7%);
}

这篇文章就到这里。希望你喜欢。如果喜欢，请分享给你的朋友和同事，并在 Twitter 上关注我@theAngularGuy，我会在这里发布关于 Web 开发和计算机科学的推文。

干杯!

接下来读什么？

你可能还不知道的 7 个令人惊叹的 CSS 属性

Mustapha Aouas ・ 2020年4月20日

#css #webdev #design #beginners