Skip to content

Create a dynamic and engaging Pac-Man animation using HTML and CSS. This challenge focuses on replicating the classic Pac-Man character's movement and eating animation purely through CSS animations. The Pac-Man should appear to chomp as it moves across the screen, with dots moving towards it to simulate eating.

Notifications You must be signed in to change notification settings

Yashi-Singh-1/Day-22-Pac-Man

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Pac-Man

Challenge Description

This challenge involves creating a Pac-Man animation using HTML and CSS. The Pac-Man character will animate as if it is chomping, and dots will move towards it, creating the effect of Pac-Man eating the dots.

Table of Contents

Introduction

This challenge is part of the 100 Days CSS series. It demonstrates the use of CSS animations to create a dynamic and engaging visual effect. The Pac-Man animation is a fun and interactive way to showcase CSS animation techniques.

Features

  • Animated Pac-Man character
  • Moving dots that Pac-Man appears to eat
  • Pure HTML and CSS implementation

Prerequisites

  • Basic understanding of HTML and CSS

File Structure

Pac-Man-Challenge/
│
├── index.html
├── style.css
└── README.md

Tools

  • A code editor (e.g., VSCode)
  • A web browser for viewing the demo

Preview

Live demo link: Pac-Man Animation

Pac-Man Animation

Contributing

Contributions are welcome! Please follow these steps to contribute:

  1. Fork the Repository
    • Navigate to the GitHub repository: Day-22-Pac-Man
    • Click the "Fork" button at the top right of the repository page.
  2. Clone the Forked Repository
    • Open your terminal or command prompt.
    • Clone your forked repository using the command:
      git clone https://github.com/Yashi-Singh-1/Day-22-Pac-Man.git
  3. Create a New Branch
    • Navigate to the project directory:
      cd Day-22-Pac-Man
    • Create a new branch for your feature or bug fix:
      git checkout -b feature-or-bugfix-name
  4. Make Your Changes
    • Make the necessary changes to the codebase.
    • Ensure your changes are properly tested.
  5. Commit Your Changes
    • Add the files you changed:
      git add .
    • Commit your changes with a descriptive message:
      git commit -m "Description of changes"
  6. Push to Your Fork
    • Push your changes to your forked repository:
      git push origin feature-or-bugfix-name
  7. Create a Pull Request
    • Navigate to the original repository: Day-22-Pac-Man
    • Click the "New Pull Request" button.
    • Select your fork and the branch you made changes in, then create the pull request.
    • Provide a detailed description of your changes and submit the pull request.

Credits

This challenge is inspired by 100 Days CSS.

About

Create a dynamic and engaging Pac-Man animation using HTML and CSS. This challenge focuses on replicating the classic Pac-Man character's movement and eating animation purely through CSS animations. The Pac-Man should appear to chomp as it moves across the screen, with dots moving towards it to simulate eating.

Topics

Resources

Stars

Watchers

Forks