Pacman & Ghost Animation: CSS Tutorial (Day 17 of CSS3 in 30 Days)



Use CSS to create n animation of Pacman chomping and chasing a ghost along this container element!

⭐️Files you need ⭐️
💻Pacman Code: https://www.dropbox.com/sh/k52690nidi673el/AAAcSxszWSiofZfX4jRaC87Aa?dl=0
💻All tutorials in this series need this “_theme-styles” directory (only download once): https://www.dropbox.com/sh/890hx6ke34oovaz/AAByJ-jb-H5pWuIUx7t_GvQqa?dl=0

This video works as a stand-alone tutorial but is also day 13 of CSS3 in 30 Days. For the rest of the series, check out this playlist: https://www.youtube.com/playlist?list=PLWKjhJtqVAbl1AfjiGyYxwpdAPi5v-1OU

CSS3 in 30 Days is developed by Brad Hussey. Check out his website for more great tutorials: https://codecollege.ca/

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

This Post Has 18 Comments

  1. Osum!!! would've been kooler if there was a way of getting the dots disappear off but, crazy nonetheless!

    EDIT:
    k.. so I made that work by creating another empty div inside path (named it .path1) and transitioning its width to 1400px as ease-out with delay of 1.8s.. it does appear as if the pacman is eating away the dots but not that well though cause his chomps are kinda eating them away before he comes closer LOL (cause ease-out, right?) no other transition seemed to work out better.. linear was a disaster and so were others.. this was as much as I could do:

    .path1 {
    position: relative;
    width: 10px;
    height: 100%;
    background: #333;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    animation: disappear 5s ease-out infinite;
    animation-delay: 1.8s;
    z-index: 99;
    }
    .path1:after {
    content: "";
    position: absolute;
    border: none;
    color: #333;
    }

    @keyframes disappear {
    0% {
    width: 10px;
    }
    100% {
    width: 1400px;
    }
    }

  2. Kas hilju

    Very beautiful, the explication of your course is very very easy and I understand 90% of course, thank you

  3. Daniel Correa

    Excelent!!! Congrats and thank you about the series of CSS videos.

  4. Evan Rost

    "show your friends, show your mom, they'll really think your cool that you spent ALOT of time, on your computer making pacman….."

    lol This outro hit me hard

  5. Lukáš Kovář

    Where i can download the meter tool which you are using in this video ?

  6. Dimas Hadi Azra

    Try to add this pseudo after .path and see what would happen:

    .path::before {
    position: absolute;
    content: "";
    display: block;
    left: -20%;
    width: 20%;
    height: 100%;
    margin: -20px;
    background: linear-gradient( to right, transparent 40%, #333 60% );
    z-index: 50;
    animation: moveForward 5s linear infinite;
    animation-delay: 1.4s;
    }

  7. Rolando

    Great Tutorial Thank You So Much !!! Here goes another cool animation for the ghost :

    insert this into the ghost css class :
    top: 45%;
    animation: wavyMovement 1s linear infinite;

    then add this keyframe at the end :
    @keyframes wavyMovement {
    0%, 100% {
    top: 45%;
    } 50% {
    top: 55%;
    }
    }

  8. Tech Paravai

    superb work all most understood. how to that dot remove after moving packman.

  9. Mukesh Kumar

    in mouthtop animation,why we have taken 50% in keyframes?

  10. Business Opportunity in Ruvol

    I have invented a Board Game [still unpublished and not yet out in the market] that I believe is guaranteed to be as challenging and exciting as CHESS. I called it “RUVOL.”

    It is my hope that one day Ruvol may surpass chess as the “Number One Board Game in the World.”

    The weakness of chess is it always starts in fixed positions that the opening moves become “memorizable.” In fact, not a few have so mastered the moves that they can play against their opponents “blindfolded.” It is for this very reason that the great Bobby Fischer introduced his so-called “Fischer Random Chess,” where the starting position of the pieces is “randomized” to make the memorization of openings impracticable. Fortunately, it is also for this reason that I invented Ruvol where “every game” has been calculated to be a challenging one to play.

    HOW IS RUVOL PLAYED and HOW YOU CAN MONETIZE IT?

    I detailed everything in my YouTube video. Here is the link: https://www.youtube.com/watch?v=jcqth0m3-R0

    BIG MONEY POTENTIAL IN RUVOL!

    It is worthwhile to note that the people who play chess will be the same people who will play Ruvol. In my Google search, I learned there are around 800 million chess players in the world. Even just a small percentage of these 800 million is good enough to earn big money from Ruvol either as an ONLINE GAME BUSINESS or as a PHYSICAL PRODUCT DISTRIBUTOR.

    You may contact me at: rodolfovitangcol@gmail.com.

    Thanks and God bless!

    RODOLFO MARTIN VITANGCOL

    The Ruvol Inventor

Leave a Reply