How to Make Web Page Animations Using Javascript

Creating a Simple Javascript Game with the setTimeout method

Sep 21, 2009

Javascript games for a web page are not difficult to create. The programmer only needs notepad and a web browser. And, of course, a little Javascript magic

In the world of computer games a programmer doesn't necessarily need a high-tech gaming engine. They don't even need a convoluted story line.

All that they need is a simple, interactive game and this can easily be achieved with a text editor, a web browser and a little Javascript code. In just a few minutes the web page programmer can create some simple, but effective, web page animation which will even respond to mouse clicks.

Setting Up the Javascript Objects to be Used

Many people do not realize it, but a web page is a classic example of object oriented design. Every table, image or paragraph is an instantiation of a class with its own properties and methods. In fact every part of a web pages is an object that can manipulated by the programmer. The first step, therefore, is to create the objects that are going to be used as part of the animation:

<div

style="width:500; height: 500; background-color:Yellow;position:absolute;top:0;left:0"

</div>

Here a Javascript function (which will be defined in a moment) has been assigned the document body's onmousedown event, and two div objects have been created. The first is simply to provide a background for the animation and the second will be animated by the Javascript code. The next stage is to write the Javascript code that will carry out the animation itself.

Adding Properties to Javascript Objects

The object to be animated is a div object. This will be moved either up or down the screen and either to the left or to the right. The programmer can even add new properties to the object to record these details:

var myBox = document.getElementById("myBox");

myBox.axis = {}

myBox.axis = 1;

myBox.direction = {};

myBox.direction = 1;

Moving Javascript Objects

First the current coordinates are obtained. The parseInt method is used to strip away the "px" portion of the stored left and top properties:

var x = parseInt(myBox.style.left);

var y = parseInt(myBox.style.top);

Next the function checks to make sure that the object has not moved outside of the animation area:

if ((y>=500) || (y<=0) || (x>=500) || (x<=0)) {

myBox.direction = -myBox.direction;

}

Then either the top or left properties are updated according to the state of the object's custom properties:

if (myBox.axis == 1) {

y+=myBox.direction;

myBox.style.top = y;

myBox.innerHTML = y;

} else {

x+=myBox.direction;

myBox.style.left = x;

myBox.innerHTML = x;

}

Perhaps the most interesting part of the function is the setTimeout method. This is what actually enables the animation:

setTimeout (function() { moveBox ()} , 10, "JavaScript");

}

Here the setTimeout method reruns the moveBox function after a 10 millisecond delay. This is, of course, repeated at the end of every run of the function creating an infinite loop. And so, the final step is to start the animation in motion:

If the web page is viewed at the moment then the div object will be seen to move up and down the page.

Enabling User Interaction

When the body was defined a function named "clicked" was assigned to the onmousedown event. That will fire every time that a mouse button is pressed. This can be used to change the axis along which the object is being moved:

function clicked () {

myBox.axis = -myBox.axis;

}

</script>

</body>

And, at the end of this simple piece of programming, the programmer will have produced an animation over which the user has limited control.

The copyright of the article How to Make Web Page Animations Using Javascript in Javascript/Java Programming is owned by Mark Alexander Bain. Permission to republish How to Make Web Page Animations Using Javascript in print or online must be granted by the author in writing.