article image

While creating games to form part of a curriculum to teach kids to code, I worked on a Pacman game. I created the game using javascript and the library P5.JS. Creating constructor components helps the flow of the game and keeps everything neet while using p5.JS functions like draw() and keyPressed(), really helps with the speed of game creation.

One of the more interesting things about the game was creating a map. Using arrays I used different characters which when they were looped through would either create a wall or a free space.

Pacman has an X and Y coordinates in his object along with his image, so he knows in which block he is in. each block is a 20×20 square.

Moves would then be verified. in pseudo code that would look like this. if the space pacman wants to move into is not a zero, then Pacman's coordinates are updated and he moves.This whole process is helped by P5.JS and it’s draw function, which effectively continually loops, so you can position your function in there and then at its framerate will keep running through the draw function.

Above is the draw function that contains other functions. background() is a p5.JS function as are textSize, fill, strokeWeight, stroke and text. These functions really help with a lot of the general work you will need to do creating javascript games.