Pac-Man… in CSS!

css-tricks.com css-tricks.com3 years ago in #Dev Love179

https://voltomedia.com/fresh/wp-content/uploads/Pac-Man…-in-CSS.png You all know famous Pac-Man video game, right? The game is fun and building an animated Pac-Man character in HTML and CSS is just as fun! I’ll show you how to create one while leveraging the powers of the clip-path property. See the Pen Animated Pac-Man by Maks Akymenko (@maximakymenko)on CodePen. Are you excited? Let’s get to it! First, let’s bootstrap the project We only need two files for our project: index.html and style.css. We could do this manually by creating an empty folder with the files inside. Or, we can use this as an excuse to work with the command line, if you’d like: mkdir pacman cd pacman touch index.html && touch style.css Set up the baseline styles Go to style.css and add basic styling for your project. You could also use things like reset.css and normalize.css to reset the browser styling, but our project is simple and straightforward, so we won’t do much here.One thing you’ll want to do for sure is use Autoprefixer to help with cross-browser compatibility. We’re basically setting the body to the full width and height of the viewport and centering things right smack dab in the middle of it. Things like the background color and fonts are purely aesthetic. @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! Do you remember how Pac-Man looks? He’s essentially a yellow circle and an opening in the circle for a mouth. He’s a two-dimensional dot-eating machine! So he has a body (or is he just a head?) and a mouth. He doesn’t even have eyes, but we’ll give him one anyway. This’ll be our HTML markup: <div class=”pacman”> <div class=”pacman__eye”></div> <div class=”pacman__mouth”></div> </div> Dressing up Pac-Man with CSS The most interesting part starts! Go to style.css and create the styles for Pac-Man. First, we’ll create his body/head/whatever-that-is. Again, that’s merely a circle with a yellow background: .pacman { width: 100px; height: 100px; border-radius: 50%; background: #f2d648; position: relative; margin-top: 20px; } His (non-existent) eye is pretty much the same — a circle, but smaller and dark gray. We’ll give it absolute positioning so we can place it right where it needs to be: .pacman__eye { position: absolute; width: 10px; height: 10px; border-radius: 50%; top: 20px; right: 40px; background: #333333; } Now we have the basic shape! See the Pen Mouthless Pac-Man by CSS-Tricks (@css-tricks)on CodePen. Using clip-path to draw the mouth Pretty straightforward so far, right? If our Pac-Man is going to eat some dots (and chase some ghosts), he’s going to need a mouth. We’re going to create yet another circle, but make it black this time and overlay it right on top of his yellow head. Then we’re going to use the clip-path property to cut out a slice of it — sort of like an empty pie container except for one last piece of pie. The dotted border shows where the black circle has been cut out, leaving only a slice of it to be Pac-Man’s mouth. .pacman__mouth { background: #000; position: absolute; width: 100%; height: 100%; clip-path: polygon(100% 74%, 44% 48%, 100% 21%); } Why a polygon and all those percentages?!?! Notice that we’ve already established the width and height of the element. The polygon() function let’s us draw a free-form shape inside the bounds of the element and that shape serves as a mask that only displays that portion of the element. So, we’re using clip-path and telling it we want…

Like to keep reading?

This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply