Pac-Man… in CSS!

Sie alle kennen das berühmte Pac-Man Videospiel, richtig? Das Spiel macht Spaß und das Erstellen eines animierten Pac-Man Charakters in HTML und CSS macht genauso viel Spaß! Ich zeige Ihnen, wie Sie einen erstellen, indem Sie die Stärke der clip-path Eigenschaft nutzen.

Sehen Sie den Pen
Animierter Pac-Man von Maks Akymenko (@maximakymenko)
auf CodePen.

Sind Sie aufgeregt? Legen wir los!

Zuerst richten wir das Projekt ein

Wir brauchen nur zwei Dateien für unser Projekt: index.html und style.css. Wir könnten das manuell tun, indem wir einen leeren Ordner mit den Dateien darin erstellen. Oder wir nutzen das als Ausrede, um mit der Kommandozeile zu arbeiten, wenn Sie möchten.

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

Richten Sie die Basisstile ein

Gehen Sie zu style.css und fügen Sie grundlegende Stile für Ihr Projekt hinzu. Sie könnten auch Dinge wie reset.css und normalize.css verwenden, um das Browser-Styling zurückzusetzen, aber unser Projekt ist einfach und unkompliziert, daher werden wir hier nicht viel tun. Eine Sache, die Sie sicher tun möchten, ist die Verwendung von Autoprefixer, um die Browserkompatibilität zu gewährleisten.

Wir setzen den Body im Grunde auf die volle Breite und Höhe des Viewports und zentrieren die Dinge genau in der Mitte. Dinge wie die Hintergrundfarbe und Schriftarten sind rein ästhetisch.

@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;
}

Behold, Pac-Man in HTML!

Erinnern Sie sich, wie Pac-Man aussieht? Er ist im Grunde ein gelber Kreis mit einer Öffnung im Kreis für einen Mund. Er ist eine zweidimensionale Punktfressmaschine!

Also hat er einen Körper (oder ist er nur ein Kopf?) und einen Mund. Er hat nicht einmal Augen, aber wir werden ihm trotzdem eines geben.

Das wird unser HTML-Markup sein

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

Pac-Man mit CSS verkleiden

Der interessanteste Teil beginnt! Gehen Sie zu style.css und erstellen Sie die Stile für Pac-Man.

Zuerst erstellen wir seinen Körper/Kopf/wasauchimmer. Wiederum ist das nur ein Kreis mit gelbem Hintergrund

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

Sein (nicht vorhandenes) Auge ist so ziemlich dasselbe – ein Kreis, aber kleiner und dunkelgrau. Wir geben ihm eine absolute Positionierung, damit wir ihn genau dort platzieren können, wo er sein muss.

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

Jetzt haben wir die Grundform!

Sehen Sie den Pen
Mundloser Pac-Man von CSS-Tricks (@css-tricks)
auf CodePen.

clip-path zum Zeichnen des Mundes verwenden

Ziemlich unkompliziert bisher, oder? Wenn unser Pac-Man Punkte fressen (und Geister jagen) soll, braucht er einen Mund. Wir erstellen einen weiteren Kreis, machen ihn diesmal schwarz und legen ihn direkt über seinen gelben Kopf. Dann verwenden wir die Eigenschaft clip-path, um einen Teil davon auszuschneiden – so etwas wie ein leerer Kuchenbehälter, bis auf ein letztes Kuchenstück.

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

Warum ein Polygon und all diese Prozente?!?! Beachten Sie, dass wir bereits die Breite und Höhe des Elements festgelegt haben. Die Funktion polygon() ermöglicht es uns, eine Form nach freiem Ermessen innerhalb der Grenzen des Elements zu zeichnen, und diese Form dient als Maske, die nur diesen Teil des Elements anzeigt. Wir verwenden also clip-path und sagen ihm, dass wir eine Form (polygon()) mit einer Reihe von Punkten an bestimmten Positionen (100% 74%, 44% 48%, 100% 21%) wünschen.

Die Eigenschaft clip-path kann schwierig zu verstehen sein. Das CSS-Tricks Almanac hilft bei der Erklärung. Es gibt auch die coole Clippy App, mit der man einfach clip-patch Formen zeichnen und den CSS-Code exportieren kann, was ich für dieses Tutorial getan habe.

Bisher alles gut

Sehen Sie den Pen
Pac-Man mit Mund von CSS-Tricks (@css-tricks)
auf CodePen.

Pac-Man zum Fressen bringen

Wir haben einen ziemlich gut aussehenden Pac-Man, aber es wäre viel cooler, wenn er sein Futter nicht kauen könnte. Ich meine, vielleicht will er sein Futter im Ganzen schlucken, aber das werden wir nicht zulassen. Machen wir stattdessen seinen Mund auf und zu.

Alles, was wir tun müssen, ist die Eigenschaft clip-path zu animieren, und dafür verwenden wir @keyframes. Ich nenne diese Animation 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%);
  }
}

Auch hier habe ich die Clippy App verwendet, um die Werte zu erhalten, aber Sie können gerne Ihre eigenen eingeben. Vielleicht können Sie die Animation sogar noch reibungsloser gestalten!

Wir haben unsere Keyframes platziert, also fügen wir sie unserer Klasse .pacman hinzu. Wir könnten die Kurzschreibweise der animation Eigenschaft verwenden, aber ich habe die Eigenschaften aufgeteilt, um die Dinge selbsterklärender zu machen, damit Sie sehen können, was vor sich geht.

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

Da haben wir es!

Sehen Sie den Pen
Kauernder Pac-Man von CSS-Tricks (@css-tricks)
auf CodePen.

Wir müssen Pac-Man füttern

Wenn Pac-Man kauen kann, warum sollte er dann nicht etwas zu essen bekommen! Modifizieren wir unser HTML-Markup ein wenig, um etwas Essen hinzuzufügen.

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

…und stylen wir es. Schließlich muss Essen für die Augen genauso appetitlich sein wie für den Mund! Wir machen noch *einen* Kreis, denn das Spiel verwendet das.

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

Sehen Sie den Pen
Kauender Pac-Man mit verlockendem Essen von CSS-Tricks (@css-tricks)
auf CodePen.

Ach, der arme Pac-Man sieht das Essen, kann es aber nicht essen. Bringen wir das Essen mit einer weiteren Prise CSS-Animation zu ihm.

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

Jetzt müssen wir diese Animation nur noch auf unsere Klasse .pacman__food anwenden.

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

Wir haben einen glücklichen, essenden Pac-Man!

Sehen Sie den Pen
Pac-Man isst von CSS-Tricks (@css-tricks)
auf CodePen.

Wie zuvor erforderte die Animation einige Anpassungen meinerseits, um sie genau richtig hinzubekommen. Was passiert ist, ist, dass das Essen weit weg von Pac-Man mit voller Deckkraft beginnt, sich dann näher zu ihm bewegt, indem es transform: translateX() verwendet, um sich von links nach rechts zu bewegen und mit null Deckkraft verschwindet. Dann ist es so eingestellt, dass es unendlich läuft, damit er den ganzen Tag isst, jeden Tag!

---

Das war's! Es macht Spaß, kleine Dinge wie diese zu nehmen und zu sehen, wie HTML und CSS verwendet werden können, um sie nachzubilden. Ich würde gerne Ihre eigenen Pac-Man (oder Ms. Pac-Man!) sehen. Teilen Sie es in den Kommentaren!