Pac-Man On The Grid (Playable-ish on mobile)

A CSS grid implementation of the famous Pac-Man 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

GitHub

View Github