How to Create a JavaScript Animation / Page 3

How to Create a JavaScript Animation [con't]

Technical Lead
Thomson Reuters (Markets) LLC
US-NY-New York

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:

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;
}

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.