A Simple JavaScript Application To Help You Learn Object-Oriented Programming

Since I've started my JavaScript studies I've struggled to fully grasp OOP (Object-Oriented Programming). Learning about prototypes has made my head feel like it's exploding at times even, as you can see from this Reddit post. :)

Anyways, while I still have a lot more to learn about OOP, one thing that has helped me the most has been to work on a simple 'bouncing ball' JavaScript application.

This way I was able to get my hands 'dirty' breaking things and fixing them, and I got more practice writing code which is what I need right now.

Do the bouncing ball assessment in the last two lessons of this Javascript course:

  1. You get the introduction to the bouncing ball program in this lesson.

  2. The actual 'assessment', for adding more functionality to the program by creating an 'Evil Circle' that is controlled by the user's keyboard and 'eats up' the colorful bouncing balls, can be found here.

I went through the assessment and almost got it all right without looking at their finished example's code.

I got hung up a little on this requirement or tip:

"Remember to set the Ball() constructor's prototype and constructor appropriately."

Which of course is done by this bit of code:

Ball.prototype = Object.create(Shape.prototype);
Ball.prototype.constructor = Ball;

The first line is creating the prototype object and setting it to be the same as Shape.prototype.

The second line is setting the prototype object's constructor property to be the Ball() object.

Here's what I finally ended up with though:


The 'A' key on your keyboard moves the white circle left, 'S' moves it down, 'D' moves it right and 'W' moves it up. Try and eat all of the colorful circles.

I hope you find this bouncing ball assessment as helpful as I did!

Like this blog post? Subscribe to my newsletter here.

Show Comments

var.pop( )

Web Development Tips & Tricks