Browse DevX
Sign up for e-mail newsletters from DevX


Cool DHTML: Animating Objects Within Irregular Shapes : Page 3

This article shows you how to use JavaScript and DHTML to animate a small ball within an arbitrary closed area, and provides a simple solution for determining the bounce angle of the ball from any point on the border of the enclosing area.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Step 2. Adding the Ball
You add the ball in three steps. First of all, you add an image to the body of the document that refers to a small red circle, seven pixels in diameter:

<div id="Ball" name="Ball" style="position:absolute; top:100; left:100; height:7; width:7"> <img src="ball1.gif" width="7" height="7"> </div>

Next, you add an object-oriented reference to the ball. The reference consists of:

  1. Two new variables:

var colBalls; var iBalls = 0;

  1. Two dummy functions (you'll see the implementation later in this article):

function MoveBall(){} function CalculateDirection (){}

  1. Two constructors. The first one is for the balls collection:

function clsBallsCollection() { this.Balls = new Array(); this.length = this.Balls.length; }

The second one is for the ball object (see the clsBall function in Listing 2).

Finally, you initialize the balls collection and the ball within the InitBall function, adding the following code to it:

colBalls = new clsBallsCollection(); for (var i = 0; i<=iBalls; i++) { var objBall = new clsBall(-1, -1); objBall.Index = colBalls.length++; colBalls.Balls[objBall.Index] = objBall; }

Listing 2 shows the the HTML document at this point.. Nothing moves yet,—everything's static—but you're ready to add the movement.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date