I've put together a couple of small programs to demonstrate some of the aspects of Object Oriented Programming. This program makes use of JavaScript's canvas element. A single Class Constructor or "blueprint" is used to define the objects. In this case circles. Using variables for X and Y coordinates plus a radius length and fill colour the constructor has all the properties needed to draw a circle of any size and colour anywhere on the canvas.

In addition to the object's properties each object has it's own behaviour. One follows the mouse postion and the other changes colour when it detects contact (or collision) with the other object.

How does the object know when a collision has taken place? Why using trigonometry of course. Imagine a right angle triangle being drawn from the centre of one circle to the centre of the other circle.

Since the program has the value for each circle's X and Y coordinates the exact lengths of the triangles horizontal and vertical sides can be easily determined. With that information we can use a simple trigonometry formula to calculate the length of the unknown side. When that length is less than the sum of each circles radius then a collision has occured.

Give it a try!

Using this simple collision detection formula, or object behaviour, we can program the circles to do more than simply change colour. If we give the circles variables for velocity in the X and Y directions with a little bit more trigonometry the circles can bounce off each other and the sides of the canvas. Check out the NEXT SLIDE.

Making use of JavaScript's 'requestAnimationFrame' function we can add movement to the program. I've added two more properties to the circles. An X and Y axis velocity. Every time the screen refreshes each circle adds the value of the X and Y velocities to it's X and Y positions then redraws itself. When a circle touches one of the sides the velocity for that axis is reversed. For example a +1 becomes -1.

At the same time each circle will calculate it's distance to every other circle on the canvas. Every time your browser refreshes the screen, usually 60 times per second, every circle will update it's position and check it's distance to all the other circles.

When contact with another circle is detected some slightly more advanced trigonometry is used to calculate the resulting direction and velocities.

Using some of these simple concepts combined with a little imagination all sorts of applications or games can be created! Check out the NEXT SLIDE for my game demo!

Like in my simple circle programs this program also uses only one class constructor or blueprint to generate all the objects in the game. From the user player, the enemy targets, projectiles and the stars in the background. Giving different objects different values for their constructor parameters and those objects calling different class functions or "object behaviours" one single class constructor can be used for every object needed in this game

Using the same collision detection formula, along with some event listeners, 'if' statements, a few more functions and a little imagination these concepts can be used to make a neat little space shooter game!

Give it a try! Click on the game image. It will open in a new tab