Building A Game With p5 - Part 3: Rhythm Game

If you’re just joining us, check out our blog posts on learning to draw and animate in p5.

Christopher Cotton recently joined our Web Development and Software Engineering students to show them how to create a game with p5. This workshop is based on a class he’s developed called Mr. Kitty Codes with video tutorials and a book coming soon. You can watch the video tutorials on the Mr. Kitty Codes YouTube channel and get notified when the book comes out at MrKittyCodes.com. Thanks to Christopher for sharing his knowledge with our students and for allowing us to share it here on our blog.

This series assumes you have some basic JavaScript knowledge.

It’s the moment you’ve all been working toward. Building a rhythm game!

Player instructions:

There is a ball on the screen that will fall down to the bottom. When it reaches the bottom, you press a key to get points and your points will be added to the scoreboard.

Sounds simple enough?

Breaking it down

Before we jump into coding it in the p5.js web editor, let’s break this game down into parts that will use our p5 drawing and animation skills.

Learn better with video tutorials? You can also watch the video of building the rhythm game.

Let’s start with a single ball, or ellipse, falling (or moving) down the screen. This is just like the rectangle we did in part 2 of this series, except we’ll want to add a background so we don’t see the animation trails.

Add a background.
Add an ellipse.
Animate the ellipse so that it moves down the screen.

Jump to solution: Drawing the ellipse.

Now here’s where we start to get a bit fancy. We’re going to change our variable name and also replace our y coordinate with the variable so that it starts at the top of our screen.

Instead of a for our variable, let’s name it bY to represent “ball moving down the Y-axis.” This will help us keep track of variable names as we add more variables.

And instead of 20 + a for our Y value for our ellipse, let identify it as bY.

Now, when we add bY = bY + 5;, our ball will start at the top and disappear off the bottom. If you would like it to move faster, try adding 7 instead of 5.

Jump to solution : Establishing the bY variable.

Now let’s loop the ball back to the top with an if statement.

Jump to solution: Loop the ball.

Add the score display

Now that we have a ball moving, let’s add our scoreboard.

We’ll need a new draw function, called text, to add your score to the screen. The function looks like this:

text (“What you want to display”, X , Y);

Let’s start with the words, “Your Score.”

text (“Your Score”, X , Y);

p5-Your Score

To calculate and display the score, we’ll need a new variable. Let’s name it score and give it a point value of 25 to start so we can verify that it’s working.

We’ll use the text function again, but instead of text inside of quotation marks, we’ll put our variable there.

text (variable, X, Y);

p5-Your Score with variable

Pro Tip: When you want the text function to display words, the words should be in quotation marks. If you want the text function to display a variable, no quotation marks are needed.

Now that you have a place to display your score, it’s time to start earning points.

Generate points when any key is pressed

If you recall from the rules of our game, points are earned when a key is pressed when the ball is at the bottom of the screen. To calculate our points, we’re going to introduce a whole new set of functions.

function keyPressed() { }

So if we want to give 25 points every time any key is pressed, we add the formula score = score + 25;.

To test your solution, click on the drawing screen and start mashing the keys on your keyboard. Go ahead, it is fun to press wildly and see the score increase. If your score is growing, your new function is working.

p5-points s key + bottom screen

Pro tip: Test each step of the way to make sure one thing works before adding more functionality. E.g. test that any key pressed adds to your score before narrowing down to which key pressed generates points.

Generate points when the “s” key is pressed

To make our game more specific, let’s only give points if the “s” key is pressed.

We’ll need another if statement for that.

if ( key == ‘s’ ) { score = score + 25; }

The letter inside the single quotes like s can be any letter or number.

Test it out! When you press the s key, do you get points? How about when you press the k key?

Coding Newbie tip: Make sure you do not have your CAPSLOCK key on, otherwise you might not be able to get points.

Jump to solution: Points only when the 'S' key is pressed.

Generate points when ball is at the bottom

Let’s create a rectangle in the draw function across the bottom of the screen to reflect the scoring zone.

Then we need to expand our if statement in the keyPressed function. Similar to other if statements in JavaScript, you can use && to create a second conditional statement.

if ( key == ‘s’ && bY > 300) { score = score + 25; }

Test it out! Do you only get points when you press the s key and the ball is at the bottom of the screen?

Increasing the Challenge Level

So now that you have all the basic components of the game you can increase the challenge level by moving the ball to different parts of the screen each time it falls

To do this, we’ll need to create a new variable to control the placement on the X-axis, we’ll name it bX. We’ll then replace the X-axis of 20 from our earlier placement of the ellipse with the variable.

p5-bX variable

To make it move randomly, we’ll give bX a new value when it reaches the bottom. So if we go to our if statement of if (bY > 400) {}, we can add a function to move bX.

if ( bY > 400) { bY = 0; bX = random( 20, 360 ); }

bX = random( 20, 360 ); will give bX a new starting point between 20 and 360.

To make the game more challenging, you can add more balls, move them at different speeds, or make the bottom of the screen smaller.

Give it a try and let us know how you do!

What else are you excited to create with P5? Let us know in the comments below!

If you want more - check out how to build a Cat and Toy game which uses the mouse to move and launch a toy at a cat.