As you see on the picture(i attach it below) pacman should’ve eatten that dot but it went right through him. To prevent this action i made pseudo-element(.pacman::before) and wanted to make it overflow:hidden for hidding dots when it came into pacman’s mouth. It doesn’t work. Any ideas guys? Or different approach?
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Centralized the game */
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: gray;
}
/* Game Container */
.game-container {
display: flex;
align-items: center;
width: 70%;
height: 100px;
overflow: hidden;
}
/* Pacman */
.pacman {
display: inline-block;
width: 80px;
height: 80px;
background-image: url("../images/pacman1.png");
background-size: contain;
background-repeat: no-repeat;
animation: chomping 0.6s linear 1s infinite;
z-index: 1;
}
.pacman::before {
position: relative;
display: block;
content: "";
width: 40px;
height: 80px;
overflow: hidden;
}
@keyframes chomping {
0% {
background-image: url("../images/pacman1.png");
}
16.67% {
background-image: url("../images/pacman2.png");
}
33.33% {
background-image: url("../images/pacman3.png");
}
50% {
background-image: url("../images/pacman4.png");
}
66.67% {
background-image: url("../images/pacman3.png");
}
83.33% {
background-image: url("../images/pacman2.png");
}
100% {
background-image: url("../images/pacman1.png");
}
}
/* Dots */
.dots {
width: 90%;
height: 30px;
position: relative;
}
.dots::before {
content: "";
width: 400%;
height: 100%;
background-image: radial-gradient(circle, white 30%, transparent 15%);
background-size: 40px 20px;
position: absolute;
background-repeat: repeat-x;
left: 0;
top: 10%;
animation: dots-moving 23.5s linear 1s infinite;
}
@keyframes dots-moving {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles/index.css">
</head>
<body>
<div class="game-container">
<div class="pacman"></div>
<div class="dots"></div>
</div>
</body>
</html>
Here is a different implementation with less of code and easier to adjust
.game-container {
--s: 60px; /* control the size of the pacman */
width: 70%;
margin: auto;
height: var(--s);
background: radial-gradient(10px, black 98%, #0000) 0/var(--s) 100% padding-box content-box;
padding-left: calc(var(--s)/2);
animation: dots .5s linear infinite;
}
@keyframes dots {
to {background-position: calc(-1*var(--s))}
}
.game-container:before {
content: "";
display: block;
height: 100%;
aspect-ratio: 1;
border-radius: 50%;
margin-left: calc(var(--s)/-2);
background: gold;
animation: chomping .25s linear infinite alternate;
}
@keyframes chomping {
0%,15%{clip-path: polygon(0 0,100% 0,100% 50%,50% 50%,100% 50% ,100% 100%,0 100%)}
100% {clip-path: polygon(0 0,100% 0,100% 0 ,50% 50%,100% 100%,100% 100%,0 100%)}
}<div class="game-container"></div>1