How to Create a JavaScript Animation

By Lisha Sterling

Bounce All Around

Let's put it all together. We can make the ball go up and down, left and right, and random speeds. We can start the animation and stop it with a click. Click here to make our example ball visible at the top of the page

. Start Animation Stop Animation Here's the code:
1 <script language="javascript"
2 var dirx = 1; 
3 var diry = 1; 
4 var spdx = setRand(); 
5 var spdy = setRand(); 
6 var imgLeftInt; 
7 var imgTopInt; 
8 var imgHeight; 
9 var imgWidth; 
10 var winWidth; 
11 var winHeight; 
12 var t; 
13  
14 function animBall(on) {               
15     imgLeftInt = parseInt(document.images['ball1'].style.left); 
16     imgTopInt = parseInt(document.images['ball1'].style.top); 
17     imgHeight =  parseInt(document.images['ball1'].height); 
18     imgWidth =  parseInt(document.images['ball1'].width); 
19     winWidth = parseInt(computeWin().windWidth); 
20     winHeight = parseInt(computeWin().windHeight); 
21  
22     if(dirx == 1){                            // if I should go right... 
23         goRight(); 
24     } else {                                     // otherwise, I'd better go left! 
25         goLeft(); 
26     } 
27  
28     if(diry == 1) {                             // if I should go down... 
29         goDown();  
30     } else {                                              // otherwise, I'll go up! 
31         goUp(); 
32     } 
33  
34
35  
36 function goRight() { 
37     document.images['ball1'].style.left = imgLeftInt+spdx +"px"
38     if (imgLeftInt >  (winWidth-imgWidth)){ 
39         dirx = 0; 
40         spdx= setRand(); 
41     } 
42
43  
44 function goLeft() { 
45     document.images['ball1'].style.left = (imgLeftInt-spdx) +"px"
46     if (imgLeftInt <  5){ 
47         dirx = 1; 
48         spdx= setRand(); 
49     } 
50
51  
52 function goDown() { 
53     document.images['ball1'].style.top = imgTopInt+spdy+"px"
54     if (imgTopInt >  (winHeight-imgHeight)){ 
55         diry = 0; 
56         spdy= setRand(); 
57     } 
58
59  
60 function goUp() { 
61     document.images['ball1'].style.top = (imgTopInt-spdy) +"px"
62     if (imgTopInt < 5){ 
63         diry = 1; 
64         spdy= setRand(); 
65     } 
66
67  
68 function setRand() { 
69     randnum= Math.floor(Math.random()*6)+2; 
70     return randnum; 
71
72  
73 function computeWin(){ 
74     if(document.body.clientWidth) { 
75         this.windWidth=document.body.clientWidth; 
76         this.windHeight=document.body.clientHeight; 
77     } else { 
78         this.windWidth = window.innerWidth; 
79         this.windHeight=document.innerHeight; 
80     } 
81 return this
82
83 </script> 
84 <a href="javascript:var t=setInterval('animBall()', 80)">Start Animation</a> <a href="javascript:clearInterval(t);">Stop Animation</a> <br /> 
85 <img src="ball.png" style="position:absolute;left:10px;top:20px;" id="ball2" /> 

Tune In Next Time...

Is it just me, or does this look a lot like Pong without the paddles? Next time we'll make some paddles and make our little animation into an interactive Web game.

About the Author

Lisha Sterling is a partner at the Israeli venture technology firm http://www.sparkthing.com where she has fun and makes a living helping startups start up.

This article originally appeared at WebReference.com.


Page 3 of 3

Previous Page
1 2 3
 

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date