Food-Man: How I built the PacMan-like game without using AI

Why I chose PacMan as an inspiration

I have always wanted to build a browser-based game to challenge my web knowledge in structuring and styling the web page. I loved playing PacMan as a kid, I always wondered about the effort that went into designing the maze, ghost animations and the food as well as the PacMan animation. I chose the PacMan as an inspiration for my Food-Man game concept, the Food-Man character is based on a traditional headshot of me in a suit. The Food-Man is controlled by the player to move and eats food to not starve and survive on the run by grandma chasing with a broccoli. The art is developed with Piskel Sprite Maker, I also drew all of the grandma which has  sleeping, awake and chasing modes. I drew the foods that Food-Man has to eat to survive, donut, hamburger, fries, drinks, hotdog, and pizza.

Game Logic & Features

I wrote dynamic collision-detection algorithm which checks at least 2 items colliding. Foods and the grandma are assigned their own collide object CSS classes, separately from their primary classes like "food-item" or "grandma". Game ends when the grandma catches up to the Food-Man. Or, Food-Man just eats the food.

I wrote player movement controller that lets you move the character with WASD, Arrow Keys, or Mobile touches using Keyboard Event API, I had game listens to user's interaction through the browser signals with DOM manipulation API. Food-Man will runs on its own in a specific direction, it has the ability to stop as well.

Random food (fries, burger, soda and more) are spawned randomly at calculated x, y positions by game screen's offset width/height and for every few seconds with their collide object classes.

The grandma chasing algorithm recalculates Food-Man's position per animation frame, the grandma will always be chasing the Food-Man on a 2D cartesian system (x and y). The grandma is asleep at page load and wakes up once Food-Man eats his first food. The grandma has 2 speed modes. One where grandma jogs slowly with a broccoli or gets angry and run faster.

Score board, it tracks on the clock and the number of foods eaten. A starvation bar (Like Health Bar) but Food-Man starves. This forces the player to eats some food to recover from starvation or the game ends, this prevents the game from running infinitely. Same as Grandma, this acts as game logic.

List of mistakes I made and how I fixed them:

• One developer pointed out images were being downloaded over and over due to animation frames, I fixed it by preloading the images with Image() constructor.
• I used setInterval() with very SHORT delay which were draining user's CPU badly, I fixed it by replacing it with requestAnimationFrame() method. This rAF() method ensures browser executes code block before the next repaint. At least 2 animations were conflicting which became very buggy which meant bad user experience. Animation is very smooth as a result.
• Game objects often get out of bounds due to browser resizing by the player. I wrote an algorithm to prevent it, I have user's browser listens to "resizing" event with DOM API and it resizes/recalculates everything accordingly.