In this chapter, we will recreate Pac Man with the HTML5 canvas. Just like the previous chapter, we will be using functional programming. With the HTML5 canvas and JavaScript, you can play games in the browser.

Pac Man is a classic game where the player (Pac Man, the yellow circle) must eat all of the dots. The ghosts are the enemies of Pac Man: when you get caught by a ghost, you lose. If you eat all of the dots without being caught by a ghost, you win the game.

Drawing on a canvas is, just like modifying the HTML elements of a page, a side effect and thus not pure. Since we will be using functional programming, we will create some abstraction around it, similar to what React does. We will build a small non-pure framework so we can use that to build the rest of the game with pure functions. We will also use strictNullChecks in this chapter. The compiler will check which values can be undefined or null.

We will build the game in these steps: