吃豆人…用 CSS 实现！

大家肯定都认识著名的 吃豆人游戏，对吧？这个游戏很有趣，用 HTML 和 CSS 创建一个动画吃豆人角色也同样有趣！我将向您展示如何利用 clip-path 属性来创建一个吃豆人。

查看 CodePen 上 Maks Akymenko (@maximakymenko) 编写的
动画吃豆人
在 CodePen 上。

你兴奋了吗？让我们开始吧！

首先，让我们初始化项目

我们的项目只需要两个文件：index.html 和 style.css。我们可以手动创建空文件夹并在其中创建这些文件。或者，如果愿意，我们可以以此为借口来练习使用命令行

mkdir pacman
cd pacman
touch index.html && touch style.css

设置基础样式

转到 style.css 并为您的项目添加基本样式。您也可以使用 reset.css 和 normalize.css 等工具重置浏览器样式，但我们的项目简单直接，因此在这里我们不会做太多操作。您肯定想要做的一件事是使用 Autoprefixer 来帮助解决跨浏览器兼容性问题。

我们基本上将 body 设置为视口全宽和全高，并将内容居中放置在正中间。背景颜色和字体等都是纯粹的审美考虑。

@import url('https://fonts.googleapis.com/css?family=Slabo+27px&display=swap');

*, *:after, *:before {
  box-sizing: border-box;
}

body {
  background: #000;
  color: #fff;
  padding: 0;
  margin: 0;
  font-family: 'Slabo 27px', serif;
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

看，HTML 中的吃豆人！

你还记得吃豆人是什么样子的吗？它本质上是一个黄色的圆圈，圆圈上有一个开口作为嘴巴。它是一个二维吃点机器！

所以它有一个身体（或者它只是一个头？）和一个嘴巴。它甚至没有眼睛，但我们还是会给它一个。

这是我们的 HTML 标记

<div class="pacman">
  <div class="pacman__eye"></div>
  <div class="pacman__mouth"></div>
</div>

用 CSS 为吃豆人打扮

最有趣的部分开始了！转到 style.css 并为吃豆人创建样式。

首先，我们将创建它的身体/头部/任何东西。同样，这仅仅是一个具有黄色背景的圆圈

.pacman {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #f2d648;
  position: relative;
  margin-top: 20px;
}

它的（不存在的）眼睛几乎相同——一个圆圈，但更小，颜色为深灰色。我们将使用绝对定位，以便将其放置在需要的位置

.pacman__eye {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: 20px;
  right: 40px;
  background: #333333;
}

现在我们有了基本形状！

查看 CodePen 上 CSS-Tricks (@css-tricks) 编写的
无嘴吃豆人
在 CodePen 上。

使用 clip-path 绘制嘴巴

到目前为止，非常简单，对吧？如果我们的吃豆人要吃一些点（并追逐一些鬼魂），它将需要一个嘴巴。我们将再创建一个圆圈，但这次将其设置为黑色，并将其覆盖在黄色的头上。然后，我们将使用 clip-path 属性剪切掉一部分——有点像一个空的派容器，只留下一块派。

.pacman__mouth {
  background: #000;
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(100% 74%, 44% 48%, 100% 21%);
}

为什么是多边形以及所有这些百分比？！！请注意，我们已经确定了元素的宽度和高度。polygon() 函数允许我们在元素的边界内绘制一个自由形状，并且该形状充当掩码，仅显示该部分的元素。因此，我们使用 clip-path 并告诉它我们想要一个包含一系列特定位置点 (100% 74%, 44% 48%, 100% 21%) 的形状 (polygon())。

clip-path 属性可能难以理解。CSS-Tricks 年鉴 提供了帮助解释。还有一个很酷的 Clippy 应用程序，它可以轻松绘制 clip-patch 形状并导出 CSS，这正是我在本教程中所做的。

到目前为止，一切顺利

查看 CodePen 上 CSS-Tricks (@css-tricks) 编写的
带嘴巴的吃豆人
在 CodePen 上。

让吃豆人吃东西

我们有一个非常好看的吃豆人，但如果它无法吃东西的话会更酷。我的意思是，也许它想一口吞下食物，但我们不会允许那样。让我们让它的嘴巴张开和闭合。

我们只需要为 clip-path 属性制作动画，并且我们将为此使用 @keyframes。我将此动画命名为 eat

@keyframes eat {
  0% {
    clip-path: polygon(100% 74%, 44% 48%, 100% 21%);
  }
  25% {
    clip-path: polygon(100% 60%, 44% 48%, 100% 40%);
  }
  50% {
    clip-path: polygon(100% 50%, 44% 48%, 100% 50%);
  }
  75% {
    clip-path: polygon(100% 59%, 44% 48%, 100% 35%);
  }
  100% {
    clip-path: polygon(100% 74%, 44% 48%, 100% 21%);
  }
}

同样，我使用 Clippy 应用程序来获取值，但是，您可以随意输入自己的值。也许，您可以使动画更加流畅！

我们已经设置了关键帧，所以让我们将其添加到 .pacman 类中。我们可以使用简写 animation 属性，但我已经将属性分解以使事情更易于理解，以便您可以了解正在发生的事情

animation-name: eat;
animation-duration: 0.7s;
animation-iteration-count: infinite;

就是这样！

查看 CodePen 上 CSS-Tricks (@css-tricks) 编写的
咀嚼的吃豆人
在 CodePen 上。

我们必须喂饱吃豆人

如果吃豆人可以咀嚼，为什么不给它一些食物吃呢！让我们稍微修改一下 HTML 标记以包含一些食物

<div class="pacman">
  <div class="pacman__eye"></div>
  <div class="pacman__mouth"></div>
  <div class="pacman__food"></div>
</div>

…让我们为它设置样式。毕竟，食物需要既能满足眼睛又能满足嘴巴！我们将再创建一个圆圈，因为这就是游戏中使用的。

.pacman__food {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 50%;
  top: 40%;
  left: 120px;
}

查看 CodePen 上 CSS-Tricks (@css-tricks) 编写的
咀嚼的吃豆人和诱人的食物
在 CodePen 上。

哦，可怜的吃豆人看到了食物，却无法吃掉它。让我们使用另一段 CSS 动画让食物向它移动

@keyframes food {
  0% {
    transform: translateX(0);
      opacity: 1;
  }
  100% {
    transform: translateX(-50px);
    opacity: 0;
  }
}

现在我们只需要将此动画传递给我们的 .pacman__food 类。

animation-name: food;
animation-duration: 0.7s;
animation-iteration-count: infinite;

我们有一个快乐的、正在吃东西的吃豆人！

查看 CodePen 上 CSS-Tricks (@css-tricks) 编写的
吃豆人正在吃东西
在 CodePen 上。

和之前一样，动画需要我进行一些调整才能使其完美。发生的事情是食物从吃豆人的远处开始，具有完全不透明度，然后使用 transform: translateX() 从左向右移动，并以零不透明度消失。然后将其设置为无限循环，以便它每天都吃东西！

---

就这样！将像这样的简单事物拿出来看看 HTML 和 CSS 如何用于重新创建它们，这很有趣。我想看看你自己的吃豆人（或 吃豆小姐！）。在评论中分享吧！