Pac-Man ... ¡en CSS! | Programar Plus ▷ Tutoriales

Todos conocen el famoso videojuego Pac-Man, ¿verdad? ¡El juego es divertido y construir un personaje animado de Pac-Man en HTML y CSS es igual de divertido! Te mostraré cómo crear uno mientras aprovechas los poderes del clip-path propiedad.

Ver la pluma
Pac-Man animado por Maks Akymenko (@maximakymenko)
en CodePen.

¿Estás emocionado? ¡Hagámoslo!

Primero, arranquemos el proyecto

Solo necesitamos dos archivos para nuestro proyecto: index.html y style.css. Podríamos hacer esto manualmente creando una carpeta vacía con los archivos adentro. O podemos usar esto como una excusa para trabajar con la línea de comando, si lo desea:

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

Configurar los estilos de línea de base

Ir style.css y agregue un estilo básico para su proyecto. También podrías usar cosas como reset.css y normalize.css para restablecer el estilo del navegador, pero nuestro proyecto es simple y directo, por lo que no haremos mucho aquí. Una cosa que querrá hacer con seguridad es usar Autoprefixer para ayudar con la compatibilidad entre navegadores.

Básicamente, estamos configurando el cuerpo al ancho y alto completo de la ventana gráfica y centrando las cosas correctamente en el medio. Cosas como el color de fondo y las fuentes son puramente estéticas.

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

¡Mira, Pac-Man en HTML!

¿Recuerdas cómo se ve Pac-Man? Es esencialmente un círculo amarillo y una abertura en el círculo para una boca. ¡Es una máquina devoradora de puntos bidimensional!

Entonces tiene un cuerpo (¿o es solo una cabeza?) Y una boca. Ni siquiera tiene ojos, pero le daremos uno de todos modos.

Este será nuestro marcado HTML:

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

Vestir a Pac-Man con CSS

¡Empieza la parte más interesante! Ir style.css y crea los estilos para Pac-Man.

Primero, crearemos su cuerpo / cabeza / lo que sea. Nuevamente, eso es simplemente un círculo con un fondo amarillo:

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

Su ojo (inexistente) es prácticamente el mismo: un círculo, pero más pequeño y de color gris oscuro. Le daremos un posicionamiento absoluto para que podamos colocarlo justo donde debe estar:

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

¡Ahora tenemos la forma básica!

Ver la pluma
Pac-Man sin boca por Programar Plus(@ css-tricks)
en CodePen.

Usando clip-path para dibujar la boca

Bastante sencillo hasta ahora, ¿verdad? Si nuestro Pac-Man va a comerse algunos puntos (y perseguir algunos fantasmas), necesitará una boca. Vamos a crear otro círculo, pero esta vez lo haremos negro y lo superpondremos justo encima de su cabeza amarilla. Entonces usaremos el clip-path propiedad para cortar una porción, algo así como un recipiente de pastel vacío, excepto por un último trozo de pastel.

El borde punteado muestra dónde se ha cortado el círculo negro, dejando solo una porción de la boca de Pac-Man.

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

¡¿Por qué un polígono y todos esos porcentajes?!?! Observe que ya hemos establecido el ancho y el alto del elemento. El polygon() función nos permite dibujar una forma de forma libre dentro de los límites del elemento y esa forma sirve como una máscara que solo muestra esa parte del elemento. Entonces, estamos usando clip-path y diciéndole que queremos una formapolygon()) que contiene una serie de puntos en posiciones específicas (100% 74%, 44% 48%, 100% 21%).

El clip-path la propiedad puede ser difícil de asimilar. El Programar PlusAlmanac ayuda a explicarlo. También está la genial aplicación Clippy que facilita dibujar clip-patch formas y exportar el CSS, que es lo que hice para este tutorial.

Hasta ahora tan bueno:

Ver la pluma
Pac-Man con boca por Programar Plus(@ css-tricks)
en CodePen.

Haz comer a Pac-Man

Tenemos un Pac-Man bastante guapo, pero será mucho más genial, pero no hay forma de que mastique su comida. Quiero decir, tal vez queramos tragar su comida entera, pero no vamos a permitir eso. En su lugar, hagamos que su boca se abra y se cierre.

Todo lo que tenemos que hacer es animar clip-path propiedad, y usaremos @keyframes para eso. Estoy nombrando esta animación 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%);
  }
}

Nuevamente, utilicé la aplicación Clippy para obtener los valores, sin embargo, siéntase libre de pasar los suyos. ¡Quizás puedas hacer que la animación sea aún más fluida!

Tenemos nuestros fotogramas clave en su lugar, así que añádalos a nuestro .pacman clase. Podríamos usar la taquigrafía animation propiedad, pero he desglosado las propiedades para que las cosas se expliquen por sí mismas para que pueda ver lo que está sucediendo:

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

¡Aquí vamos!

Ver la pluma
Masticando Pac-Man por Programar Plus(@ css-tricks)
en CodePen.

Tenemos que alimentar a Pac-Man

Si Pac-Man puede masticar, ¿por qué no darle algo de comer? Modifiquemos un poco nuestro marcado HTML para incluir algo de comida:

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

… y vamos a darle estilo. Después de todo, ¡la comida debe ser apetitosa tanto para los ojos como para la boca! Vamos a hacer otro círculo más porque eso es lo que usa el juego.

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

Ver la pluma
Masticando Pac-Man con comida burlona de Programar Plus(@ css-tricks)
en CodePen.

Aw, el pobre Pac-Man ve la comida, pero no puede comerla. Hagamos que la comida le llegue usando otra pizca de animación CSS:

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

Ahora solo necesitamos pasar esta animación a nuestro .pacman__food clase.

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

¡Tenemos un Pac-Man feliz y comiendo!

Ver la pluma
Pac-Man Eating por Programar Plus(@ css-tricks)
en CodePen.

Como antes, la animación requirió algunos ajustes por mi parte para hacerlo bien. Lo que está sucediendo es que la comida comienza alejándose de Pac-Man con la opacidad total, luego se desliza más cerca de él usando transform: translateX() para moverse de izquierda a derecha y desaparece con cero opacidad. Entonces está programado para funcionar infinitamente, por lo que come todo el día, ¡todos los días!

¡Eso es un envoltorio! Es divertido tomar pequeñas cosas como esta y ver cómo se pueden usar HTML y CSS para recrearlas. Me gustaría ver tu propio Pac-Man (¡o Ms. Pac-Man!). ¡Comparte en los comentarios!

(Visited 2 times, 1 visits today)

Pac-Man … ¡en CSS! | Programar Plus