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.