Bounce the Ball — Browser game made with P5.js

It’s much easier on mobile.

A few months ago, I tried to start up a game of Facebook Messenger soccer only to find out that it was removed in Summer 2019.

Wanting to deviate from my usual CRUD applications and learn more about creative programming, I decided to try to recreate the game with help from my friend and P5.js guru Adam.

Try out the released game here or read on to learn a bit about the development process.

Original Facebook soccer game. Ours is definitely more minimal.

Gameplay — It’s just soccer

The original game was mobile exclusive and had a ball that bounces every time it’s touched. Dropping the ball offscreen would save your final score and project it to your group chat.

We’d decided to just focus on the main mechanics of bouncing a ball and keeping score to start off with and go from there.

P5.js Framework

The P5.js framework gives us a lot of tools to make a browser game using simple shapes with built in functions and global variables.

Setup() will be called once on runtime and give the program all the data needed to draw the canvas and our first ball object. From here, draw() is called once per frame (60/fps) and will contain all of the physics logic for determining how the ball will interact with the canvas and mouse cursor.

We created a ball class, instantiated a ball in setup(), and rendered the ball in draw(). Now how do we get it to move when clicked?

Math and Physics — I’m out of my element

I’ve since realized that programming graphics takes a surprising amount of geometry and sometimes physics knowledge. Coming from a creative background before learning programming, I love coming up with ideas to code in P5.js but I’m not much of a mathematician. I was lucky I had someone to guide me with the more technical aspects of this project.

“How can we find out if our click was inside of the ball?”

This question was the first of many that needed to be answered in order for our ball to fly gracefully on our screen.

In this case we can use the built in P5.js dist() function to compare the distance between two points in pixels, our points used being the center of the ball and where the mouse was clicked. Then we can compare that number to the radius of the ball to determine if our click hit the ball or not.

We never want the ball to be hit downwards so we just ignore hits that are too high.

Another important use of geometry was how to calculate the angle the ball should launch depending on where it was clicked. The documentation for atan2 tells us it returns the arc tangent of a given point, which is just what we need. (My first real world use of Soh Cah Toa!)

The angle the ball is launched is determined by where it was clicked. If it was outside of our preferred range (e.g. the ball is to be launched straight left/right) then constrain it to be more upwards.

Outside these functions, the ball has its own gravity, acceleration, velocity, restitution, speed limit and more that determines how it travels around the screen. The physics came more natural than the geometry.

Game Design — No, we didn’t do anything actually innovative

The worst part about Facebook soccer was trying to beat your personal best score. After scoring in the hundreds, it could take up to 10 minutes to get back to where you were, which makes the first 8 minutes boring and low stakes.

I could totally score higher if I wasn’t demonstrating…

The change that we decided to make that sets our game apart the most besides the minimal style is the multi ball powerup.

Every 10 points, a star will fall from the top of the screen that gives you an extra ball to score points with if you can click it. Not only is this just more interesting, but it gives players a way to play a bit more risky in an attempt to earn points faster.

There’s also no limit to how many balls you can juggle at one time so a really good player could keep track of 3–5 balls if they’re brave enough.

Closing Thoughts — What I learned

I’m glad I took this detour from standard web development because of how different and fun to work on it was. There were still many problems to solve with JavaScript and TONS of debugging with Chrome DevTools.

Minimal wiggle.

This was my first time using OOP in JavaScript. Actually seeing individual ball objects with their specific properties undoubtedly helped me understand OOP a little better.

I also learned about animating sprites with a sprite sheet when making the star and ball objects with help from The Coding Train.

Once again, try to bounce the ball for yourself here or check out the GitHub repo here.

You can check out my portfolio site if you want to learn more about me.

Adam often makes cool P5.js art to post to his Instagram.

Potential Future Updates — Yes, we know you can cheat

We released the “finished” game to our group chat on Christmas 2020. After seeing a score of 400+, we learned that playing on an iPhone’s low power mode caps the game at 30fps. This makes it extremely easy to hit a ball multiple times before it flies away and also it’s very hard to drop it. You can also set the framerate in the dev console.

There are definitely more exploits to fix but there are diminishing returns in fixing those bugs so they’re low priority.

There were plans of using AWS DynamoDB or Google Firebase to save scores with your initials and render a leaderboard somewhere on the main screen to show how you stack up against other players. For a browser game that we’re burnt out on developing its currently more than we want to take on, but maybe in the future.

Just screenshot your phone if you want to brag. Unless you cheated.

Software Developer