Pac Man Game HTML CSS - BihariGraphic

Pac Man Game 🎮 HTML CSS #coding #shorts #reels #status #games

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Pac-Man</title>
        <style>
/* BASIC CSS RESETTING */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CREATING VARIABLES */
:root {
    --containerWidth: 500px;
    --containerHeight: 100px;

    --circleContainerWidth: var(--containerWidth);
    --circleContainerHeight: var(--containerHeight);

    --circleWidth: 20px;
    --circleHeight: 20px;

    --pac-manContainerWidth: 60px;
    --pac-manContainerHeight: var(--containerHeight);

    --pac-manBodyDimension: var(--pac-manContainerWidth);

    --ghostContainerWidth: 60px;
    --ghostContainerHeight: var(--containerHeight);

    --ghostBodyWidth: var(--ghostContainerWidth);
    --ghostBodyHeight: 80px;

    --ghostEyesWidth: var(--ghostBodyWidth);
    --ghostEyesHeight: 100px;

    --ghostTriangleWidth: var(--ghostBodyWidth);
    --noOfTriangles: 3; /* fixed from html triangle number */
    --ghostTriangleHeight: calc(
        var(--ghostTriangleWidth) / var(--noOfTriangles)
    );
}

/* MAKING ALL ELEMENTS FLEX OBJECT */
html {
    height: 100vh;
    width: 100vw;
    background: darkkhaki
        radial-gradient(rgba(175, 167, 54, 0.863), rgba(48, 226, 226, 0.521));
    display: flex;
    justify-content: center;
    align-items: center;
}

/* MAKING ALL ELEMENTS INSIDE BODY FLEX OBJECT */
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-items: center;
    gap: 1.5rem;
}

/* STYLING CONTAINER FOR ALL PAC-MAN OBJECTS I.E. PAC-MAN, GHOST AND CIRCULAR DOTS */
.container {
    background-color: black;
    height: var(--containerHeight);
    width: var(--containerWidth);
    box-shadow: 0px 0px 50px rgb(0, 0, 0);
    position: relative;
    overflow: hidden;
}

/* CREATING AND STYLING CONTAINER FOR CIRCULAR WHITE DOTS */
.circleContainer {
    background-color: black;
    height: var(--circleContainerHeight);
    width: var(--circleContainerWidth);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

/* STYLING ALL CIRCULAR WHITE DOTS */
.circleContainer > div {
    height: var(--circleHeight);
    width: var(--circleWidth);
    border-radius: 50%;
    background-color: whitesmoke;
}

/* CREATING AND STYLING CONTAINER FOR PAC-MAN */
.pac-manContainer {
    position: absolute;
    height: var(--pac-manContainerHeight);
    width: var(--pac-manContainerWidth);
    top: 0;
    left: -60px;
}

/* STYLING PAC-MAN */
.pac-manContainer > #pac-manBody::before,
.pac-manContainer > #pac-manBody::after {
    content: "";
    height: 0;
    width: 0;
    border-radius: 50%;
    border: calc(var(--pac-manBodyDimension) / 2) solid yellow;
    position: absolute;
    top: calc(var(--containerHeight) / 2 - var(--pac-manBodyDimension) / 2);
}

.pac-manContainer > #pac-manBody::before {
    border-right-color: transparent;
    border-bottom-color: transparent;
}

.pac-manContainer > #pac-manBody::after {
    border-right-color: transparent;
    border-top-color: transparent;
}

/* CREATING AND STYLING CONTAINER FOR GHOST */
.ghostContainer {
    width: var(--ghostContainerWidth);
    height: var(--ghostContainerHeight);
    position: absolute;
    top: 0;
    left: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* STYLING GHOST BODY */
.ghostContainer > #ghostBody {
    height: var(--ghostBodyHeight);
    width: var(--ghostBodyWidth);
    background-color: red;
    border-radius: calc(var(--ghostBodyWidth) / 2)
        calc(var(--ghostBodyWidth) / 2) 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* CREATING AND STYLING CONTAINER FOR GHOST EYES*/
.ghostContainer > #ghostBody > .eyes {
    height: var(--ghostEyesHeight);
    width: var(--ghostEyesWidth);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* STYLING GHOST EYES */
#eye-1,
#eye-2 {
    height: 25px;
    width: 20px;
    margin-left: 4px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
/* STYLING GHOST EYE PUPIL */
.eyesColor {
    height: 12px;
    width: 10px;
    margin-left: 2px;
    margin-bottom: 3px;
    background-color: blue;
    border-radius: 50%;
}

/* CREATING AND STYLING CONTAINER FOR GHOST SKIRT (BOTTOM TRIANGULAR PART) */
.ghostContainer > #ghostBody > .triangle {
    height: var(--ghostTriangleHeight);
    width: var(--ghostTriangleWidth);
    display: flex;
    justify-content: space-between;
}

/* STYLING GHOST SKIRT */
.ghostContainer > #ghostBody > .triangle > div {
    border: calc(var(--ghostTriangleHeight) / 2) solid black;
    border-top-color: transparent;
}

/* IT'S TIME TO ANIMATE */
.pac-manContainer,
.ghostContainer {
    animation-name: move;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.pac-manContainer {
    animation-delay: 1s;
}

@keyframes move {
    from {
        left: -60px;
    }
    to {
        left: var(--containerWidth);
    }
}
.pac-manContainer > #pac-manBody::before {
    animation: mouthTop 0.3s linear infinite;
}
.pac-manContainer > #pac-manBody::after {
    animation: mouthBottom 0.3s linear infinite;
}

@keyframes mouthTop {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(45deg);
    }
}
@keyframes mouthBottom {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-45deg);
    }
}

#ghostBody {
    animation: blink 0.3s linear infinite;
}
@keyframes blink {
    0% {
        background-color: red;
    }
    70% {
        background-color: red;
    }
    100% {
        background-color: black;
    }
}

.eyesColor {
    animation: cross 0.3s linear infinite;
    animation-direction: alternate;
}
@keyframes cross {
    0% {
        margin-left: 2px;
    }
    100% {
        margin-left: 8px;
    }
}

/* ATTRIBUTION */
.attribution {
    font-size: 1.5rem;
    text-align: center;
    white-space: nowrap;
}
.attribution a:any-link {
    color: white;
    font-weight: bold;
    text-shadow: 2px 2px 5px black;
    text-decoration: none;
}
.attribution a:hover {
    display: inline-block;
    color: yellow;
    transform: scale(1.15, 1.15);
}

/* ----- MEDIA QUERIES ----- */
@media screen and (max-width: 550px) {
    body {
        transform: rotate(-90deg);
    }
}
</style>
    </head>
    <body>
        <div class="container">
            <div class="circleContainer">
                <div id="circle-1"></div>
                <div id="circle-2"></div>
                <div id="circle-3"></div>
                <div id="circle-4"></div>
                <div id="circle-5"></div>
                <div id="circle-6"></div>
                <div id="circle-7"></div>
                <div id="circle-8"></div>
                <div id="circle-9"></div>
                <div id="circle-10"></div>
            </div>
            <div class="pac-manContainer">
                <div id="pac-manBody"></div>
            </div>
            <div class="ghostContainer">
                <div id="ghostBody">
                    <div class="eyes">
                        <div id="eye-1">
                            <div class="eyesColor"></div>
                        </div>
                        <div id="eye-2">
                            <div class="eyesColor"></div>
                        </div>
                    </div>
                    <div class="triangle">
                        <div class="triangle-1"></div>
                        <div class="triangle-2"></div>
                        <div class="triangle-3"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
Pac Man Game 🎮 HTML CSS #coding #shorts #reels #status #games

Source Code All Topic
