Object Oriented Games Programming in Javascript

How to Use Javascript to Write Classes and Instantiate Objects

Sep 24, 2009

A programmer can create simple, but effective, games for web browsers by using Javascript. A job that's made even easier by using object oriented programming

Javascript is an excellent and universally supported scripting language. This is one of the reasons that it's suitable for creating applications such as games for web pages. There's no need for any third party software to be installed before the game can be run. It does not need to be downloaded and installed. All that's needed is a web browser. Any web browser. And the programmer does not need a high-tech, memory intensive integrated design environment (or IDE). They just require a simple text editor.

The other great thing about Javascript is that it is a full blown object oriented programming language. A programmer can create a complicated class (such as a game character to be animated) complete with its own custom properties and methods.

Setting up the Javascript Programming Environment

Creating a Class with Javascript

A Javascript class can be a little disconcerting because, at first glance, it looks like a function:

function Alien (left,top, maxleft, maxtop) {

However, that's where it stops looking like a function because it can have it's own properties, for example:

this.maxleft = maxleft;

this.maxtop = maxtop;

this.speed = 1;

And, while it doesn't directly inherit the methods and properties of other classes, it can make use of them:

this.image = new Image();

this.image.src = "alien.png";

this.image.style.position = "absolute";

this.image.style.top = top;

this.image.style.left = left;

The class can, of course, also have its own methods. In this case the method is used to move instantiated object around the screen:

this.move = function() {

var x = parseInt(this.image.style.left);

var y = parseInt(this.image.style.top);

if (y <= this.maxtop) {

if ((x >= this.maxleft) || (x <= 0)) {

this.speed = 1.25 * -this.speed;

y += 0.5 * this.image.height;

this.image.style.top = y;

}

this.image.style.left = x + this.speed;

return true;

} else {

return false;

}

It's worth noting the semi-colon that must be used to complete the creation of the method (as seen above). And finally, the class's instantiation will display the object's image on the screen:

Creating Objects with Javascript

A programmer creates objects within an Javascript application by using the new method:

var alien1 = new Alien (1,100, 500, 500);

var alien2 = new Alien (100,100, 500, 500);

The script can create as may objects as are necessary, and then they can be used wherever need in the application. In this example a simple loop animates the objects:

function moveAliens() {

alien1.move();

alien2.move();

setTimeout("moveAliens()" , 10, "JavaScript");

}

If this is saved as a .html file and then viewed in a web browsers then some games characters will be seen make their way down the screen gaining speed as they do so (as can be seen in figure 1). And this technique can be extended for as many objects as the programmer desires.

The copyright of the article Object Oriented Games Programming in Javascript in Javascript/Java Programming is owned by Mark Alexander Bain. Permission to republish Object Oriented Games Programming in Javascript in print or online must be granted by the author in writing.