13 - Final Project

Let’s Build a Game!

In this chapter, we will be building a game that makes use of everything that we have seen so far. We will also learn a couple of more tricks along the way as well. The fact that we can build a simple game using the p5.js library is pretty impressive and very illustrative of the capabilities of this library.

Our game is going to be simple. It is a typing speed game where we will be rapidly displaying numbers to the player and expect the player to enter the current number on the screen using their keyboard. If they enter the correct number in the given amount of time, they score. We will keep track of the score to be able to display it at the end of the game. It would be great if the game presents a strong visual experience but the primary focus is going to be around getting the game logic right.

Let’s create a breakdown of things that we need to create:

• We need to display a number on the screen every N frames.
• We don’t want the number to remain static on the screen. It should be animated to make it easier or harder to read with time.
• That number needs to remain on the screen until the next number is displayed or until the player presses a key in an attempt to match the number.
• If the player entry matches to the number on the screen, we will display a success message. If not, the failure will be indicated.
• We need to keep the amount of success and failure, and after X many frames / or attempts display the results to the user.
• We need to find a way to restart the game after it is over.

Getting Started

The first item on our list is to be able to display a unique number on screen at regular intervals. Remember that we used the remainder operator to achieve this feat before. Here, we will be displaying a number in between 0 and 9 on the screen every 100 frames.

In this example, we are first initializing a variable called content in the global scope. Then in the draw function, we are using the random function to generate a random number on the first frame or every 100 frames and then save that value inside the content variable. Though the problem with the random function is; it returns a floating point number. We would like to have whole numbers, integers, for the purpose of this game. So we are using the parseInt function to convert the floating point number to an integer number. Remember that the parseInt function requires you to pass the second argument to set the base for the operation which is almost always going to be the number 10.

We are storing the generated number inside a variable called content and then pass that variable into a **text ** function that displays it in the middle of the screen.

We will need lots of custom behavior from the number that we will display on the screen; so we will create a JavaScript object to represent it. This way, the functions that we will be creating to manipulate the number such as transformation operations, color configurations, etc… can remain grouped under the object which helps with the organization of the program. We will call this new object GuessItem. I am well aware that’s a terrible name but as they say, there are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.

If we are to look at our code after this attempt at creating a JavaScript object that wraps the p5.js text function, it might look like we are adding additional complexity for no reason as our code grew almost twice in size. But containing the text drawing functionality under an object would help with organizing our code a lot down the road.

Let’s focus on the GuessItem object first. GuessItem is an object creating Constructor Function that requires three arguments: the x and y position and the scale of the shape that it draws to the screen. It also has two methods on itself. One of them is getContent, which generates a random number in between 0 and 10 and stores it inside a property called content ...