How to Create a JavaScript Animation / Page 3

How to Create a JavaScript Animation [con't]

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:

<script language="javascript">
var dirx = 1;
var diry = 1;
var spdx = setRand();
var spdy = setRand();
var imgLeftInt;
var imgTopInt;
var imgHeight;
var imgWidth;
var winWidth;
var winHeight;
var t;
function animBall(on) {
    imgLeftInt = parseInt(document.images['ball1'].style.left);
    imgTopInt = parseInt(document.images['ball1'].style.top);
    imgHeight =  parseInt(document.images['ball1'].height);
    imgWidth =  parseInt(document.images['ball1'].width);
    winWidth = parseInt(computeWin().windWidth);
    winHeight = parseInt(computeWin().windHeight);
    if(dirx == 1){                            // if I should go right...
        goRight();
    } else {                                     // otherwise, I'd better go left!
        goLeft();
    }
    if(diry == 1) {                             // if I should go down...
        goDown();
    } else {                                              // otherwise, I'll go up!
        goUp();
    }
}
function goRight() {
    document.images['ball1'].style.left = imgLeftInt+spdx +"px";
    if (imgLeftInt >  (winWidth-imgWidth)){
        dirx = 0;
        spdx= setRand();
    }
}
function goLeft() {
    document.images['ball1'].style.left = (imgLeftInt-spdx) +"px";
    if (imgLeftInt <  5){
        dirx = 1;
        spdx= setRand();
    }
}
function goDown() {
    document.images['ball1'].style.top = imgTopInt+spdy+"px";
    if (imgTopInt >  (winHeight-imgHeight)){
        diry = 0;
        spdy= setRand();
    }
}
function goUp() {
    document.images['ball1'].style.top = (imgTopInt-spdy) +"px";
    if (imgTopInt < 5){
        diry = 1;
        spdy= setRand();
    }
}
function setRand() {
    randnum= Math.floor(Math.random()*6)+2;
    return randnum;
}
function computeWin(){
    if(document.body.clientWidth) {
        this.windWidth=document.body.clientWidth;
        this.windHeight=document.body.clientHeight;
    } else {
        this.windWidth = window.innerWidth;
        this.windHeight=document.innerHeight;
    }
return this;
}
</script>
<a href="javascript:var t=setInterval('animBall()', 80)">Start Animation</a> <a href="javascript:clearInterval(t);">Stop Animation</a> <br />
<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 venture technology firm SparkThing.com

Original: May 30, 2007

Digg This Add to del.icio.us

Find a programming school near you