PacMan On The Grid (Playable-ish on mobile)

A CSS grid implementation of the famous PacMan arcade game. Build using: HTML; CSS; And JavaScript, as Project no 1 of the Ironhack WebDev Bootcamp.

About Implementation

This implementation uses the following:

• A JS Array as a matrix to generate; render and keep track of the playground's state.
• An Interval to refresh and update the players logic.
• Two overlayed grids. One to display the ghosts; And another for everything else.
• CSS animations and class names to display the appropriate sprites.

Demo

What's next?

• Give PacMan more than one life.
• Improve the UI and make it more responsive.
• Add the ability to store the high score in localStorage.
• Add fruits as consumables.
• Add more levels.
• Turn it into a PWA.

Credit

Sound Effects: Classicgaming.cc

Sprites: Spriters-Resource.com

Article: Understanding Pac-Man Ghost Behavior - By Chad Birch