Bounce ball in JavaScript

Question

Bouncing Ball won't stop bouncing

every time I do it, I am left with a very annoying problem - the ball just keeps on bouncing just a little bit at the bottom.

Please find my jsfiddle code link below

http://jsfiddle.net/elankeeran/xe5wJ/

(function(){

    var bounceBall = {} || bounceBall;

    bounceBall = {

        container: {
            obj         : null,
            width       : 0,
            height      : 0,
            interval    : 0
        },
        ball : {
            obj         : null,
            top         : 0,
            left        : 0,
            height      : 0,
            width       : 0,
            maxWidth    : 0,
            maxHeight   : 0,
            dx          : 10,
            dy          : 30,
            stopBall    : false,
            moveRight   : true,
            moveDown    : true,
            counter     : 0
        },
        init: function(){
            console.log("BounceBall Init");
            var self = this;
            var myContainer
            if(document.getElementById('container'))
                 myContainer = document.getElementById('container');
            myContainer.addEventListener('click', self.handleClick, false);
            self.setBall(myContainer);
            self.ball.width = self.ball.obj.clientWidth;
            self.ball.height = self.ball.obj.clientHeight;


        },
        setBall : function(myContainer){

                var ballDiv = document.createElement("div");
                this.container.obj = myContainer;
                this.container.width = myContainer.clientWidth;
                this.container.height =myContainer.clientHeight;
                ballDiv.className= "ball";
                this.ball.obj = ballDiv;
                myContainer.appendChild(ballDiv);


        },
        handleClick : function(event){
            console.log(bounceBall.container.height + " " + event.y);
                bounceBall.ball.top = bounceBall.container.height;
                bounceBall.ball.maxHeight =  event.y;
                bounceBall.ball.maxWidth = event.x;
                bounceBall.ball.obj.style.top =  bounceBall.ball.maxHeight + 'px';
                bounceBall.ball.obj.style.left = bounceBall.ball.maxWidth + 'px';
                bounceBall.container.interval = setInterval(function(){bounceBall.move(); },100);
        },
        move : function(){



                    if (this.ball.top >= this.ball.maxHeight){
                        this.ball.moveDown = false;

                    }
                    if (this.ball.top <= 0){
                        this.ball.moveDown = true;
                        this.ball.maxHeight =  this.ball.maxHeight -20;
                    }



                    if (this.ball.moveDown){
                        this.ball.top = this.ball.top + this.ball.dy;
                    } else {
                        this.ball.top = this.ball.top - this.ball.dy;
                    }

                    this.ball.obj.style.top = this.container.height  - this.ball.top + 'px';



        }
    };
    bounceBall.init();

})();

I would be very grateful if someone could point out my error

Answer 1

The following code does not take ball height into account:

 if (this.ball.top <= 0){

If you change it to this - it should work:

if ((this.ball.top - 20) <= 0){