Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

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.


advertisement
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.

 

 

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